About
React Native is a cross-platform development framework that transforms react component to native platform UI targeted first at mobile application but integrates now web, windows, and mac.
It's also reliant on:
- React, (run on react)
- the Chrome runtime (and allows therefore debugger).
- metro - The JavaScript bundler for React Native (- ie transpile module to a format that is understandable by React Native)
The React Native framework provides a set of JavaScript API (bindings) to the native target platform (iOS and Android APIs) to control the user interface and access device hardware, like the camera.
Installation / Devel
You can develop with two frameworks:
- expo
- or/and react cli
expo is a framework wrapped around react cli that is easier to use at the cost of not permitting native binary. You can always transform an expo project as a react cli if needed.
Expo
Two tools:
- a command line app called Expo CLI to initialize and serve your project
- and a mobile client app called Expo Go to open it on iOS and Android. Expo Go allows to open up apps that are being served through Expo CLI
- You don't need macOS to build an iOS app with Expo, you only need an iOS device to run the Expo Go app
- As you update your code, the changes will automatically be reflected on the mobile device.
- Works only for pure-JavaScript apps but you can eject to transform it as a react-native app.
yarn global add expo-cli
REM or npm install --global expo-cli
success Installed "[email protected]" with binaries:
- expo
- expo-cli
- Install the mobile app Expo Go
- Register (optional) to have automatically a link between your local app and the mobile app
expo register
expo login
expo whoami
- Create a starter app
expo init my-project
- Start Metro Bundler, which:
- is an HTTP server that:
- compiles the JavaScript code of the app using Babel
- and serves it to the mobile Expo app.
- and pops up Expo Dev Tools, a graphical interface for Expo CLI.
expo start
Metro waiting on exp://192.168.178.29:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
- Firewall: On windows, open Windows Defender Firewall and open the port 19000 (for private network for instance)
- Install library with the expo cli to verify the compatibility.
expo install @react-navigation/native
React Cli
React cli needs a mobile simulator.
To call the cli with npx:
- Init: Initialize a new React Native project named <projectName> in a directory of the same name.
npx react-native init AwesomeProject
REM npx react-native --help
Android
To run for Android 1), you need to
- Have an Android emulator running (quickest way to get started) (ie Install Android Studio to get the emulator)
- Or a device connected.
Then run:
cd "c:\your\project\path" && npx react-native run-android
Windows
Run instructions for Windows:
- See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.
IOS
You must be on a mac with Xcode and an iOS simulator installed 2)
- Emulator
yarn install --global ios-sim
- Run
react-native run-ios
Hello World
Example of basic Hello World app
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, world!</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'rgb(59,108,212)',
fontSize: 42,
fontWeight: '100',
textAlign: 'center',
},
})
API / Component / Library
- React Native: https://reactnative.dev/docs/components-and-apis - views …
- Expo: https://docs.expo.dev/versions/latest/ - contacts, camera, and GPS location
- Library: https://reactnative.directory/
Sample App
Documentation / Reference
- Only web, see WebView - using the system's Web View.
Windows
- Check the last version at react-native-windows/releases
- Follow the getting-started
# Platform requirement
Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')
# Install
npx react-native init <projectName> --template react-native@^lastVersion