From IT Skills
Jump to: navigation, search

React Native Express .. Learn React Native

"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


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


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+ : :

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.

React design libraries[edit]


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


This category has only the following subcategory.


Pages in category "React Native"

The following 6 pages are in this category, out of 6 total.