React Native Express .. Learn React Native

"Lean Core" effort[edit | edit source]

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 | edit source]

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 | edit source]

Buck is a build system developed and used by Facebook.

Buck requires Java... choco install buck

ui[edit | edit source]

All dimensions in React Native are unitless, and represent density-independent pixels.

dimensions[edit | edit source]

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 | edit source]

scaling the size of your apps UI across different sized devices.

styles[edit | edit source]

<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 | edit source]

hacks[edit | edit source]

Composite components are not backed by a native view, so you cannot call setNativeProps on them.

canvas[edit | edit source]

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 | edit source]

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 | edit source]

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