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:
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.
You can develop with two frameworks:
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.
Two tools:
yarn global add expo-cli
REM or npm install --global expo-cli
success Installed "[email protected]" with binaries:
- expo
- expo-cli
expo register
expo login
expo whoami
expo init my-project
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)
expo install @react-navigation/native
React cli needs a mobile simulator.
To call the cli with npx:
npx react-native init AwesomeProject
REM npx react-native --help
To run for Android 1), you need to
Then run:
cd "c:\your\project\path" && npx react-native run-android
Run instructions for Windows:
You must be on a mac with Xcode and an iOS simulator installed 2)
yarn install --global ios-sim
react-native run-ios
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',
},
})
# 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