t18n / react-native-cross-platform-starter

One codebase to build for iOS, Android, Web and Desktop with React-Native

React Native Cross-platform Apps

Production ready starter to build cross platform app with React Native.

Getting started

• git clone [email protected]:turbothinh/react-native-cross-platform-starter.git && cd react-native-cross-platform-starter && yarn && yarn app:dep
• Run the app: On terminal 1, run packager with yarn app:start. On terminal 2, run yarn ios or yarn android for respective platform. Don't run both commands at the same time.
• Run on web: Run yarn web:dev
• Run on desktop: yarn electron

Set you your brand

• Change project name: Inside root folder, run npx react-native-rename <your-new-project-name> to rename the app
• With your IDE, global search and replace rnStarter
• Change project icon: Replace the icon.png and logo.png inside public/assets folder with your own assets. Then run yarn generate:icon && yarn generate:bootsplash

Set up deep linking

• Follow React-Navigation guide to replace the existing deep-linking prefixes with your domains

Development

Debug app with Flipper

This project comes with some Flipper integrations by default. You should install Flipper for desktop together with these plugins for development:

• Async storage
• Reactotron
• Redux-debugger

Debug app on web

For development on the web, you can also install Redux-Debugger Chrome extension

Tool recommendations

• Fastlane
• Codepush

Features

• Platforms
  • Run on iOS with react-native
  • Run on Android with react-native
  • Run on web with react-native-web
  • Run on desktop with electron
• Development
  • Testing with Jest'
  • Absolute import paths
  • Webpack loaders for JS, TS, fonts, files included
  • Native debuggers with Flipper: reactotron, redux-debugger, etc
  • Redux debuggger for web
• Design
  • Design system with Dark mode
  • Icons with eva-icons
  • Render semantic tags like H1, H2, H3 tag on web for better SEO
• Libraries
  • Redux + Redux-Toolkit for state management + Persist-storage
  • i18n with i18next
  • Tab navigation with react-navigation
  • Deep linking

Contribution

I do accept PRs, so please feel free to create PRs. It is prefered that the commits are following Conventional Commit

License

This project is licensed under MIT License.

react-native-cross-platform-starter's Issues

CocoaPods Error when executing yarn app:dep...

I'm new to reactive-native and was wondering if you could give me a quick solution to my problem...

Use react-native-macos/windows instead of electron

The react-native modules for macOS and windows have way better performance and user experience and should be used instead of electron.
For linux you could fallback to electron or any other lightweight webview.