React Native Express .. Learn React Native
"Lean Core" effort
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
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
Buck is a build system developed and used by Facebook.
- Buck requires Java... choco install buck
All dimensions in React Native are unitless, and represent density-independent pixels.
dark and light
All apps should support both light and dark interface styles
built-in support for light and dark modes... iOS 13+... Android 10+ : :
- navigation header changes color based on the route... StatusBar
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
scaling the size of your apps UI across different sized devices.
<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.
Composite components are not backed by a native view, so you cannot call setNativeProps on them.
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
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
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
JS operations without disturbing the main thread that runs the UI... InteractionManager... React native threads/workers... Using WebView
- react-native-threads... isn't real 'threading', but rather multi-processing... send a message, strings only
- react-native-workers... Todo... download worker files from same location as main bundle... load worker files from disk if not debug