React Native Express .. Learn React Native
Contents
"Lean Core" effort[edit]
React Native has accumulated a lot of parts that are now outdated, unused or otherwise legacy. It's time to clean everything up... We have also moved things out of React Native, like Metro and the react-native-cli
installation[edit]
if you are new... Expo CLI... If you are already familiar... use React Native CLI... npx react-native
Directory structure: file outside of the root directory... metro bundler doesn’t support symlink... extraNodeModules
building for Android[edit]
Buck is a build system developed and used by Facebook.
- Buck requires Java... choco install buck
ui[edit]
All dimensions in React Native are unitless, and represent density-independent pixels.
dark and light[edit]
All apps should support both light and dark interface styles
built-in support for light and dark modes... iOS 13+... Android 10+ : :
dimensions[edit]
while developing Expo web is how would someone go about creating media queries... npm add @expo/match-media react-responsive
React Native exposes an object called Dimensions... Event Listener for orientation changes
useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update... using inline styles rather than setting a value in a StyleSheet
scale[edit]
scaling the size of your apps UI across different sized devices.
styles[edit]
<Text> element is unique relative to layout: everything inside is no longer using the Flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
React design libraries[edit]
hacks[edit]
Composite components are not backed by a native view, so you cannot call setNativeProps on them.
canvas[edit]
pure JS+WebGL implementation of the canvas 2D... npm package ‘expo-2d-context’... this implementation is currently slower than a browser’s native 2D context implementation
Performance[edit]
whether or not a row needs to be re-rendered. If you are using immutable data structures, this would only need to be a reference equality check... pure components (where the return value of the render function is entirely dependent on props and state)... views in React Navigation use native components and the Animated library to deliver 60 FPS animations that are run on the native thread
Asynchronous[edit]
In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work... The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks
Pages in category "React Native"
The following 6 pages are in this category, out of 6 total.