AppRegistry is the JS entry point to running all React Native apps. App
-root components should register themselves with
-AppRegistry.registerComponent, then the native system can load the bundle
-for the app and then actually run the app when it's ready by invoking
-AppRegistry.runApplication.
AppRegistry should be required early in the require sequence to make
-sure the JS execution environment is setup before other modules are
-required.
AsyncStorage is a simple, asynchronous, persistent, global, key-value storage -system. It should be used instead of LocalStorage.
It is recommended that you use an abstraction on top of AsyncStorage instead -of AsyncStorage directly for anything more than light usage since it -operates globally.
This JS code is a simple facad over the native iOS implementation to provide -a clear JS API, real Error objects, and simple non-multi functions.
Fetches key and passes the result to callback, along with an Error if
-there is any.
Sets value for key and calls callback on completion, along with an
-Error if there is any.
Merges existing value with input value, assuming they are stringified json.
Not supported by all native implementations.
Erases all AsyncStorage for all clients, libraries, etc. You probably -don't want to call this - use removeItem or multiRemove to clear only your -own keys instead.
Gets all keys known to the system, for all callers, libraries, etc.
multiGet invokes callback with an array of key-value pair arrays that -matches the input format of multiSet.
multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
multiSet and multiMerge take arrays of key-value array pairs that match -the output of multiGet, e.g.
multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
Delete all the keys in the keys array.
Merges existing values with input values, assuming they are stringified -json.
Not supported by all native implementations.
Saves the image with tag tag to the camera roll.
@param {string} tag - Can be any of the three kinds of tags we accept: -1. URL -2. assets-library tag -3. tag returned from storing an image in memory
Invokes callback with photo identifier objects from the local camera
-roll of the device matching shape defined by getPhotosReturnChecker.
@param {object} params - See getPhotosParamChecker.
-@param {function} callback - Invoked with arg of shape defined by
-getPhotosReturnChecker on success.
-@param {function} errorCallback - Invoked with error message on error.
Use DatePickerIOS to render a date/time picker (selector) on iOS. This is
-a controlled component, so you must hook in to the onDateChange callback
-and update the date prop in order for the component to update, otherwise
-the user's change will be reverted immediately to reflect props.date as the
-source of truth.
The currently selected date.
Maximum date.
Restricts the range of possible date/time values.
Minimum date.
Restricts the range of possible date/time values.
The interval at which minutes can be selected.
The date picker mode.
Valid modes on iOS are: 'date', 'time', 'datetime'.
Date change handler.
This is called when the user changes the date or time in the UI. -The first and only argument is a Date object representing the new -date and time.
Timezone offset in seconds.
By default, the date picker will use the device's timezone. With this -parameter, it is possible to force a certain timezone offset. For -instance, to show times in Pacific Standard Time, pass -7 * 60.
A react component for displaying text which supports truncating -based on a set truncLength.
In the following example, the text will truncate -to show only the first 17 characters plus '...' with a See More button to -expand the text to its full length.
The styles that will be applied to the See More button. Default -is bold.
The caption that will be appended at the end, by default it is
-'See More'.
Text to be displayed. It will be truncated if the character length
-is greater than the truncLength property.
The styles that will be applied to the text (both truncated and -expanded).
The maximum character length for the text that will -be displayed by default. Note that ... will be -appended to the truncated text which is counted towards -the total truncLength of the default displayed string. -The default is 130.
Our first React Native implementation is ReactKit, targeting iOS. We are also
-working on an Android implementation which we will release later. ReactKit
-apps are built using the React JS framework, and render directly to
-native UIKit elements using a fully asynchronous architecture. There is no
-browser and no HTML. We have picked what we think is the best set of features
-from these and other technologies to build what we hope to become the best
-product development framework available, with an emphasis on iteration speed,
-developer delight, continuity of technology, and absolutely beautiful and fast
-products with no compromises in quality or capability.
React Nativebrew install nodebrew install watchmanbrew install flowGet up and running with our Movies sample app:
Once you have the repo cloned and met all the requirements above, start the -packager that will transform your JS code on-the-fly:
Examples/Movies/Movies.xcodeproj project in Xcode.Movies and that you have an iOS simulator
-selected to run the app.You should now see the Movies app running on your iOS simulator. -Congratulations! You've just successfully run your first React Native app.
Now try editing a JavaScript file and viewing your changes. Let's change the -movie search placeholder text:
Examples/Movies/SearchScreen.js file in your favorite JavaScript
-editor.Feel free to browse the Movies sample files and customize various properties to -get familiar with the codebase and React Native.
Also check out the UI Component Explorer for more sample code:
-Examples/UIExplorer/UIExplorer.xcodeproj. Make sure to close the Movies
-project first - Xcode will break if you have two projects open that reference
-the same library.
npm start fails with log spew like:brew install watchman should fix the issue.Please report any other issues you encounter so we can fix them ASAP.
A react component for displaying different types of images, -including network images, static resources, temporary local images, and -images from local disk, such as the camera roll.
Example usage:
accessibilityLabel - Custom string to display for accessibility.
accessible - Whether this element should be revealed as an accessible -element.
capInsets - When the image is resized, the corners of the size specified -by capInsets will stay a fixed size, but the center content and borders -of the image will be stretched. This is useful for creating resizable -rounded buttons, shadows, and other resizable assets. More info:
testID - A unique identifier for this element to be used in UI Automation -testing scripts.
Displaying images is a fascinating subject, React Native uses some cool tricks to make it a better experience.
If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.
In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.
A common feature request from developers familiar with the web is background-image. It turns out that iOS has a very elegant solution to this: you can add elements as a children to an <Image> component. This simplifies the API and solves the use case.
Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.
In the course of a project you add and remove images and in many instances, you end up shipping images you are not using anymore in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker called ix. The only allowed way to refer to an image in the bundle is to literally write ix('name-of-the-asset') in the source.
When your entire codebase respects this convention, you're able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.
iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.
In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with an uri attribute.
On the infrastructure side, the reason is that it allows to attach metadata to this object. For example if you are using ix, then we add a isStored attribute to flag it as a local file (don't rely on this fact, it's likely to change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
ListView - A core component designed for efficient display of vertically
-scrolling lists of changing data. The minimal API is to create a
-ListView.DataSource, populate it with a simple array of data blobs, and
-instantiate a ListView component with that data source and a renderRow
-callback which takes a blob from the data array and returns a renderable
-component.
Minimal example:
ListView also supports more advanced features, including sections with sticky
-section headers, header and footer support, callbacks on reaching the end of
-the available data (onEndReached) and on the set of rows that are visible
-in the device viewport change (onChangeVisibleRows), and several
-performance optimizations.
There are a few performance operations designed to make ListView scroll -smoothly while dynamically loading potentially very large (or conceptually -infinite) data sets:
Only re-render changed rows - the hasRowChanged function provided to the -data source tells the ListView if it needs to re-render a row because the -source data has changed - see ListViewDataSource for more details.
Rate-limited row rendering - By default, only one row is rendered per
-event-loop (customizable with the pageSize prop). This breaks up the
-work into smaller chunks to reduce the chance of dropping frames while
-rendering rows.
How many rows to render on initial component mount. Use this to make -it so that the first screen worth of data apears at one time instead of -over the course of multiple frames.
(visibleRows, changedRows) => void
Called when the set of visible rows changes. visibleRows maps
-{ sectionID: { rowID: true }} for all the visible rows, and
-changedRows maps { sectionID: { rowID: true | false }} for the rows
-that have changed their visibility, with true indicating visible, and
-false indicating the view has moved out of view.
Called when all rows have been rendered and the list has been scrolled -to within onEndReachedThreshold of the bottom. The native scroll -event is provided.
Threshold in pixels for onEndReached.
Number of rows to render per event loop.
An experimental performance optimization for improving scroll perf of -large lists, used in conjunction with overflow: 'hidden' on the row -containers. Use at your own risk.
() => renderable
The header and footer are always rendered (if these props are provided) -on every render pass. If they are expensive to re-render, wrap them -in StaticContainer or other mechanism as appropriate. Footer is always -at the bottom of the list, and header at the top, on every render pass.
(rowData, sectionID, rowID) => renderable -Takes a data entry from the data source and its ids and should return -a renderable component to be rendered as the row. By default the data -is exactly what was put into the data source, but it's also possible to -provide custom extractors.
(sectionData, sectionID) => renderable
If provided, a sticky header is rendered for this section. The sticky -behavior means that it will scroll with the content at the top of the -section until it reaches the top of the screen, at which point it will -stick to the top until it is pushed off the screen by the next section -header.
How early to start rendering rows before they come on screen, in -pixels.
Insets for the map's legal label, originally at bottom left of the map.
-See EdgeInsetsPropType.js for more information.
Maximum size of area that can be displayed.
Minimum size of area that can be displayed.
Callback that is called continuously when the user is dragging the map.
Callback that is called once, when the user is done moving the map.
When this property is set to true and a valid camera is associated
-with the map, the camera’s pitch angle is used to tilt the plane
-of the map. When this property is set to false, the camera’s pitch
-angle is ignored and the map is always displayed as if the user
-is looking straight down onto it.
The region to be displayed by the map.
The region is defined by the center coordinates and the span of -coordinates to display.
When this property is set to true and a valid camera is associated with
-the map, the camera’s heading angle is used to rotate the plane of the
-map around its center point. When this property is set to false, the
-camera’s heading angle is ignored and the map is always oriented so
-that true north is situated at the top of the map view
If false the user won't be able to change the map region being displayed.
-Default value is true.
If true the app will ask for the user's location and focus on it.
-Default value is false.
NOTE: You need to add NSLocationWhenInUseUsageDescription key in -Info.plist to enable geolocation, otherwise it is going -to fail silently!
Used to style and layout the MapView. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
If false the user won't be able to pinch/zoom the map.
-Default value is true.
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe -functionality across your app.
A route is an object used to describe each page in the navigator. The first
-route is provided to NavigatorIOS as initialRoute:
Now MyView will be rendered by the navigator. It will recieve the route
-object in the route prop, a navigator, and all of the props specified in
-passProps.
See the initialRoute propType for a complete definition of a route.
A navigator is an object of navigation functions that a view can call. It
-is passed as a prop to any component rendered by NavigatorIOS.
A navigation object contains the following functions:
push(route) - Navigate forward to a new routepop() - Go back one pagepopN(n) - Go back N pages at once. When N=1, behavior matches pop()replace(route) - Replace the route for the current page and immediately
-load the view for the new routereplacePrevious(route) - Replace the route/view for the previous pagereplacePreviousAndPop(route) - Replaces the previous route/view and
-transitions back to itresetTo(route) - Replaces the top item and popToToppopToRoute(route) - Go back to the item for a particular route objectpopToTop() - Go back to the top itemNavigator functions are also available on the NavigatorIOS component:
NavigatorIOS uses "route" objects to identify child views, their props, -and navigation bar configuration. "push" and all the other navigation -operations expect routes to be like this:
The default wrapper style for components in the navigator. -A common use case is to set the backgroundColor for every page
The color used for buttons in the navigation bar
One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs, the networking stack is a great example.
XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet, there isn't no concept of CORS.
Please follow the MDN Documentation for a description of the API.
As a developer, you're probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser one gives you the ability to use third-party libraries such as Parse JS SDK or super-agent directly from npm.
fetch is a better API being worked on by the standard committee and already available in Chrome. It is available in React Native by default.
PixelRatio class gives access to the device pixel density.
Some examples: -- PixelRatio.get() === 2 -- iPhone 4, 4S -- iPhone 5, 5c, 5s -- iPhone 6
There are a few use cases for using PixelRatio:
== Displaying a line that's as thin as the device permits
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's -thinner using a width of 1 / PixelRatio.get(). It's a technique that works -on all the devices independent of their pixel density.
style={{ borderWidth: 1 / PixelRatio.get() }}
== Fetching a correctly sized image
You should get a higher resolution image if you are on a high pixel density -device. A good rule of thumb is to multiply the size of the image you display -by the pixel ratio.
var image = getImage({ -width: 200 PixelRatio.get(), -height: 100 PixelRatio.get() -});
<Image source={image} style={{width: 200, height: 100}} /> -In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to be trick the eye. The downside of this technique is that it makes the resulting element look blurry.
In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.
We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.
In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.
A width of 1 is actually 2 physical pixels thick on an iPhone 4 and ~3 physical pixels thick on an iphone 6+. If you want to display a line that's as thin as possible, you can use a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.
You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.
Component that wraps platform ScrollView while providing -integration with touch locking "responder" system.
Doesn't yet support other contained responders from blocking this scroll -view from becoming the responder.
When true, the scroll view bounces horizontally when it reaches the end
-even if the content is smaller than the scroll view itself. The default
-value is true when horizontal={true} and false otherwise.
When true, the scroll view bounces vertically when it reaches the end
-even if the content is smaller than the scroll view itself. The default
-value is false when horizontal={true} and true otherwise.
When true, the scroll view automatically centers the content when the -content is smaller than the scroll view bounds; when the content is -larger than the scroll view, this property has no effect. The default -value is false.
These styles will be applied to the scroll view content container which -wraps all of the child views. Example:
return ( - <ScrollView contentContainerStyle={styles.contentContainer}> - </ScrollView> - ); - ... - var styles = StyleSheet.create({ - contentContainer: { - paddingVertical: 20 - } - });
A floating-point number that determines how quickly the scroll view -decelerates after the user lifts their finger. Reasonable choices include - - Normal: 0.998 (the default) - - Fast: 0.9
When true, the scroll view's children are arranged horizontally in a row -instead of vertically in a column. The default value is false.
Determines whether the keyboard gets dismissed in response to a drag. - - 'none' (the default), drags do not dismiss the keyboard. - - 'onDrag', the keyboard is dismissed when a drag begins. - - 'interactive', the keyboard is dismissed interactively with the drag - and moves in synchrony with the touch; dragging upwards cancels the - dismissal.
When false, tapping outside of the focused text input when the keyboard -is up dismisses the keyboard. When true, the scroll view will not catch -taps, and the keyboard will not dismiss automatically. The default value -is false.
The maximum allowed zoom scale. The default value is 1.0.
The minimum allowed zoom scale. The default value is 1.0.
When true, the scroll view stops on multiples of the scroll view's size -when scrolling. This can be used for horizontal pagination. The default -value is false.
Experimental: When true, offscreen child views (whose overflow value is
-hidden) are removed from their native backing superview when offscreen.
-This canimprove scrolling performance on long lists. The default value is
-false.
When true, the scroll view scrolls to top when the status bar is tapped. -The default value is true.
An array of child indices determining which children get docked to the
-top of the screen when scrolling. For example, passing
-stickyHeaderIndices={[0]} will cause the first child to be fixed to the
-top of the scroll view. This property is not supported in conjunction
-with horizontal={true}.
The current scale of the scroll view content. The default value is 1.0.
Callback called when the user finishes changing the value (e.g. when -the slider is released).
Callback continuously called while the user is dragging the slider.
Used to style and layout the Slider. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
Initial value of the slider. The value should be between 0 and 1. -Default value is 0.
This is not a controlled component, e.g. if you don't update -the value, the component won't be reseted to it's inital value.
The way to declare styles in React Native is the following:
StyleSheet.create construct is optional but provides some key advantages. It ensures that the values are immutable and opaque by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render.
All the core components accept a style attribute
and also accepts an array of styles
The behavior is the same as Object.assign: in case of conflicting values, the one from the right-most element will have precedence and falsy values like false, undefined and null will be ignored. A common pattern is to conditionally add a style based on some condition.
Finally, if you really have to, you can also create style objects in render, but they are highly discouraged. Put them last in the array definition.
In order to let a call site customize the style of your component children, you can pass styles around. Use View.stylePropType and Text.stylePropType in order to make sure only styles are being passed.
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
var styles = StyleSheet.create({ -container: { -borderRadius: 4, -borderWidth: 0.5, -borderColor: '#d6d7da', -}, -title: { -fontSize: 19, -fontWeight: 'bold', -}, -activeTitle: { -color: 'red', -}, -})
Use a StyleSheet:
<View style={styles.container}> -<Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> -</View> - -Code quality: -- By moving styles away from the render function, you're making the code -code easier to understand. -- Naming the styles is a good way to add meaning to the low level components -in the render function.
Performance: -- Making a stylesheet from a style object makes it possible to refer to it -by ID instead of creating a new style object every time. -- It also allows to send the style only once through the bridge. All -subsequent uses are going to refer an id (not implemented yet).
Use SwitchIOS to render a boolean input on iOS. This is
-a controlled component, so you must hook in to the onValueChange callback
-and update the value prop in order for the component to update, otherwise
-the user's change will be reverted immediately to reflect props.value as the
-source of truth.
If true the user won't be able to toggle the switch. -Default value is false.
Background color when the switch is turned on.
Callback that is called when the user toggles the switch.
Background color for the switch round button.
Background color when the switch is turned off.
The value of the switch, if true the switch will be turned on. -Default value is false.
A react component for displaying text which supports nesting,
-styling, and touch handling. In the following example, the nested title and
-body text will inherit the fontFamily from styles.baseText, but the title
-provides its own additional styles. The title and body will stack on top of
-each other on account of the literal newlines:
Used to truncate the text with an elipsis after computing the text -layout, including line wrapping, such that the total number of lines does -not exceed this number.
This function is called on press. Text intrinsically supports press
-handling with a default highlight state (which can be disabled with
-suppressHighlighting).
When true, no visual change is made when text is pressed down. By -default, a gray oval highlights the text on press down.
Used to locate this view in end-to-end tests.
In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.
Behind the scenes, this is going to be converted to a flat NSAttributedString that contains the following information
The <Text> element is special 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.
On the web, the usual way to set a font family and size for the entire document is to write
When the browser is trying to render a text node, it's going to go all the way up to the root element of the tree and find an element with a font-size attribute. An unexpected property with this system is that any node can have font-size attribute, including a <div>. The reason why it was designed this way is that it is convenient, even though not really semantically correct.
In React Native, we are more strict about it. The first place where it'll show up is that you have to wrap all the text nodes inside of a <Text> component. It is not allowed to have a text node directly under a <View>.
You also lose the ability to setup a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that's going to set them and use this component all across your app. You can also make other components such as MyAppHeaderText for other kind of texts.
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
We believe that this more constrained way to style text will yield better apps.
(Developper) React components are designed with strong isolation properties in mind, you should be able to drop a component anywhere in your application and it will look and behave the same way, as long as the props are the same. Having text properties be inherited from outside of the props breaks isolation.
(Implementor) The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
A foundational component for inputting text into the app via a -keyboard. Props provide configurability for several features, such as auto- -correction, auto-capitalization, placeholder text, and different keyboard -types, such as a numeric keypad.
The simplest use case is to plop down a TextInput and subscribe to the
-onChangeText events to read the user input. There are also other events, such
-as onSubmitEditing and onFocus that can be subscribed to. A simple
-example:
The value prop can be used to set the value of the input in order to make
-the state of the component clear, but <TextInput> does not behave as a true
-controlled component by default because all operations are asynchronous.
-Setting value once is like setting the default value, but you can change it
-continuously based on onChangeText events as well. If you really want to
-force the component to always revert to the value you are setting, you can
-set controlled={true}.
The multiline prop is not supported in all releases, and some props are
-multiline only.
Can tell TextInput to automatically capitalize certain characters.
If false, disables auto-correct. Default value is true.
If true, focuses the input on componentDidMount. Default value is false.
This helps avoid drops characters due to race conditions between JS and -the native text input. The default should be fine, but if you're -potentially doing very slow operations on every keystroke then you may -want to try increasing this.
When the clear button should appear on the right side of the text view
If you really want this to behave as a controlled component, you can set -this true, but you will probably see flickering, dropped keystrokes, -and/or laggy typing, depending on how you process onChange events.
If false, text is not editable. Default value is true.
Determines which keyboard to open, e.g.numeric.
If true, the text input can be multiple lines. Default value is false.
Callback that is called when the text input is blurred
(text: string) => void
Callback that is called when the text input's text changes.
Callback that is called when the text input is focused
The string that will be rendered before text input has been entered
The text color of the placeholder string
See DocumentSelectionState.js, some state that is responsible for -maintaining selection information for a document
The default value for the text input
Timers are an important part of an application and React Native implements the browser timers.
requestAnimationFrame(fn) is the exact equivalent of setTimeout(fn, 0), they are triggered right after the screen has been flushed.
setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.
The Promise implementation uses setImmediate its asynchronicity primitive.
One reason why native apps feel so good performance wise is that barely any work is being done during an interaction/animation. In React Native, you can use InteractionManager that allows long-running work to be scheduled after any interactions/animations have completed.
Applications can schedule tasks to run after interactions with the following:
Compare this to other scheduling alternatives:
The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks until all touches have ended or been cancelled.
InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced TimerMixin. If you include TimerMixin, then you can replace your calls to setTimeout(fn, 500) with this.setTimeout(fn, 500) (just prepend this.) and everything will be properly cleaned up for you when the component unmounts.
We highly recommend never using bare timers and always using this mixin, it will save you from a lot of hard to track down bugs.
A wrapper for making views respond properly to touches. -On press down, the opacity of the wrapped view is decreased, which allows -the underlay color to show through, darkening or tinting the view. The -underlay comes from adding a view to the view hierarchy, which can sometimes -cause unwanted visual artifacts if not used correctly, for example if the -backgroundColor of the wrapped view isn't explicitly set to an opaque color.
Example:
Determines what the opacity of the wrapped view should be when touch is -active.
Called when the touch is released, but not if cancelled (e.g. by -a scroll that steals the responder lock).
The color of the underlay that will show through when the touch is -active.
A wrapper for making views respond properly to touches. -On press down, the opacity of the wrapped view is decreased, dimming it. -This is done without actually changing the view hierarchy, and in general is -easy to add to an app without weird side-effects.
Example:
Determines what the opacity of the wrapped view should be when touch is -active.
The most fundamental component for building UI, View is a
-container that supports layout with flexbox, style, some touch handling, and
-accessibility controls, and is designed to be nested inside other views and
-to have 0 to many children of any type. View maps directly to the native
-view equivalent on whatever platform react is running on, whether that is a
-UIView, <div>, android.view, etc. This example creates a View that
-wraps two colored boxes and custom component in a row with padding.
By default, Views have a primary flex direction of 'column', so children
-will stack up vertically by default. Views also expand to fill the parent
-in the direction of the parent's flex direction by default, so in the case of
-a default parent (flexDirection: 'column'), the children will fill the width,
-but not the height.
Many library components can be treated like plain Views in many cases, for
-example passing them children, setting style, etc.
Views are designed to be used with StyleSheets for clarity and
-performance, although inline styles are also supported. It is common for
-StyleSheets to be combined dynamically. See StyleSheet.js for more info.
When true, indicates that the view is an accessibility element
For most touch interactions, you'll simply want to wrap your component in
-TouchableHighlight.js. Check out Touchable.js and
-ScrollResponder.js for more discussion.
In the absence of auto property, none is much like CSS's none
-value. box-none is as if you had applied the CSS class:
.cantTouchThis * { - pointer-events: auto; - } - .cantTouchThis { - pointer-events: none; - }
But since pointerEvents does not affect layout/appearance, and we are
-already deviating from the spec by adding additional modes, we opt to not
-include pointerEvents on style. On some platforms, we would need to
-implement it as a className anyways. Using style or not is an
-implementation detail of the platform.
This is a special performance property exposed by RKView and is useful -for scrolling content when there are many subviews, most of which are -offscreen. For this property to be effective, it must be applied to a -view that contains many subviews that extend outside its bound. The -subviews must also have overflow: hidden, as should the containing view -(or one of its superviews).
Used to style and layout the View. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
Used to locate this view in end-to-end tests.