https://github.com/nativescript/capacitor-react-demo

https://github.com/nativescript/capacitor-react-demo

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/nativescript/capacitor-react-demo
• Owner: NativeScript
• Created: 2021-03-01T05:40:08.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-01T06:01:20.000Z (over 5 years ago)
• Last Synced: 2025-09-19T00:44:22.683Z (9 months ago)
• Language: TypeScript
• Size: 652 KB
• Stars: 4
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
A simple React Ionic demo with @nativescript/capacitor example wired.

Try it out:

```

npm install

npm run build:mobile

npx cap sync

npx cap run ios

// or...

npx cap run android

```

## How this demo was created

```

npm install -g @ionic/cli

ionic start

> React

> sidedrawer

npm install @capacitor/cli@next @capacitor/core@next @capacitor/android@next @capacitor/ios@next

npx cap init

// this creates the build directory in order to add platforms

npm run build 

npx cap add android

npx cap add ios

// Now ready for NativeScript 

npm i @nativescript/capacitor --save

```

Now add add bindings/wirings in any component, ie: ExploreContainer.tsx:

```

import './ExploreContainer.css';

import { native } from '@nativescript/capacitor';

const ExploreContainer: React.FC = ({ name }) => {

  function handleClick(e: React.MouseEvent) {

    e.preventDefault();

    native.openNativeModalView();

  }

  return (

    


      {name}

      


        Open Native Modal

      

    

  );

};


export default ExploreContainer;

```

Now build for mobile (builds react and nativescript together) and prepare to run:

```

npm run build:mobile

// Now sync

npx cap sync

// Now just run the app:

npx cap run ios

// or...

npx cap run android

```