Write once, run anywhere with Create React (Native) App and react-native-web

Write once, run anywhere with Create React (Native) App and react-native-web

☞ 

#Native

  • npm install –save-dev babel-preset-expo jest-expo flow-bin react-native-scripts add –dev babel-preset-expo jest-expo flow-bin react-native-scripts react-test-renderer@16.2.0And we add the packages for react-native, react-native-web and expo : – npm install –save expo@^25.0.0 react-native@0.52.0 react-native-weboryarn add expo@^25.0.0 react-native@0.52.0 react-native-webNow let’s add a few files necessary to build a React Native app : – { – “presets”:…
  • flowconfig file in your project directory and add the flow settings available here – { – “expo”: { – “sdkVersion”: “25.0.0” – } – }App.test.js : this is the entry point for testing the React Native app.
  • toJSON(); – then add a App.js file, this is going to be our React Native app entry point.
  • │ – └── src – │ ├── index.js – entry point for CRA (don’t move/rename it) – │ └── … more source files – │ – └── public – ├── index.html – ├── favicon.icon – └── manifest.jsonNow let’s make a few changes to our package.json file and add some useful…
  • import React, { Component } from ‘react’ – import { View, Text, StyleSheet } from ‘react-native’export default class App extends Component { – render() { – return ( – View style={styles.app} – View style={styles.appHeader} – Text style={styles.appTitle}Welcome to React âš›ï¸�/Text – /View – Text style={styles.appIntro} – To get started, edit…

EDIT January 2018: I’ve updated this article with up to date versions (no more beta dependencies!). Thanks @KajiTetsushi for your help! 🙂 EDIT Feb 2018 : All the versions are up to date to go along…
Continue reading “Write once, run anywhere with Create React (Native) App and react-native-web”

Write once, run anywhere with Create React (Native) App and react-native-web

¡Write once, run anywhere with Create React (Native) App and react-native-web by @yannickdot

  • npm install –save-dev babel-preset-expo jest-expo flow-bin react-native-scripts add –dev babel-preset-expo jest-expo flow-bin react-native-scripts react-test-renderer@16.2.0And we add the packages for react-native, react-native-web and expo : – npm install –save expo@^25.0.0 react-native@0.52.0 react-native-weboryarn add expo@^25.0.0 react-native@0.52.0 react-native-webNow let’s add a few files necessary to build a React Native app : – { – “presets”:…
  • flowconfig file in your project directory and add the flow settings available here – { – “expo”: { – “sdkVersion”: “25.0.0” – } – }App.test.js : this is the entry point for testing the React Native app.
  • toJSON(); – then add a App.js file, this is going to be our React Native app entry point.
  • │ – └── src – │ ├── index.js – entry point for CRA (don’t move/rename it) – │ └── … more source files – │ – └── public – ├── index.html – ├── favicon.icon – └── manifest.jsonNow let’s make a few changes to our package.json file and add some useful…
  • import React, { Component } from ‘react’ – import { View, Text, StyleSheet } from ‘react-native’export default class App extends Component { – render() { – return ( – View style={styles.app} – View style={styles.appHeader} – Text style={styles.appTitle}Welcome to React âš›ï¸�/Text – /View – Text style={styles.appIntro} – To get started, edit…

EDIT January 2018: I’ve updated this article with up to date versions (no more beta dependencies!). Thanks @KajiTetsushi for your help! 🙂 EDIT Feb 2018 : All the versions are up to date to go along…
Continue reading “Write once, run anywhere with Create React (Native) App and react-native-web”

Write once, run anywhere with Create React (Native) App and react-native-web

Write once, run anywhere with Create React (Native) App and react-native-web  #javascript

  • AmazeSince the first release of React Native, I’ve always hoped to build a React codebase that could run on any platform.I loved building multi platform apps using Cordova and web technologies, but React Native has raised the bar so high now with its native performance.So far, when you wanted to…
  • buckd/; Ignore unexpected extra Ignore duplicate module providers; For RN Apps installed via npm, “Libraries” folder is inside; “node_modules/react-native” but in the source repo it is in the Additional create-react-native-app ignores; Ignore duplicate module Ignore misbehaving Ignore missing expo-sdk dependencies (temporarily); Ignore react-native-fbads dependency of the expo – “expo”: {…
  • /src/App’export default class NativeApp extends React.Component { render() { return App / }}Let’s make a few changes to our package.json file and add some useful scripts// These scripts are merely copied from the create-react-native-app package.json file…”main”: { “start-web”: “react-scripts start”, “build-web”: “react-scripts build”, “test”: “react-scripts test –env=jsdom”, “eject-web”: “react-scripts eject”,…
  • js and add some platform agnostic code in it.You can now write all your code as if you were writing some React Native code.The trick here is that the webpack config of Create React App aliases automatically react-native to react-native-web (see the config here).
  • Everything is handled for us!import React, { Component } from ‘react’import { View, Text, StyleSheet } from ‘react-native’export default class App extends Component { render() { return ( View style={styles.app} View style={styles.appHeader} Text style={styles.appTitle}Welcome to React ⚛️/Text /View Text style={styles.appIntro} To get started, edit src/App.

Since the first release of React Native, I’ve always hoped to build a React codebase that could run on any platform. I loved building multi platform apps using Cordova and web technologies, but React…
Continue reading “Write once, run anywhere with Create React (Native) App and react-native-web”