React NativeAccessibility # | Edit on GitHub |
Native App Accessibility (iOS and Android) #
Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.
Making Apps Accessible #
Accessibility properties #
accessible (iOS, Android) #
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
Accessibility # | Edit on GitHub |
Native App Accessibility (iOS and Android) #
Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.
Making Apps Accessible #
Accessibility properties #
accessible (iOS, Android) #
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
accessibilityLabel (iOS, Android) #
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View:
ActionSheetIOS # | Edit on GitHub |
Methods #
static showActionSheetWithOptions(options, callback) #
Display an iOS action sheet. The options object must contain one or more
+
ActionSheetIOS # | Edit on GitHub |
Methods #
static showActionSheetWithOptions(options, callback) #
Display an iOS action sheet. The options object must contain one or more
of:
options(array of strings) - a list of button titles (required)cancelButtonIndex(int) - index of cancel button inoptionsdestructiveButtonIndex(int) - index of destructive button inoptionstitle(string) - a title to show above the action sheetmessage(string) - a message to show below the title
static showShareActionSheetWithOptions(options, failureCallback, successCallback) #
Display the iOS share sheet. The options object should contain
one or both of message and url and can additionally have
a subject or excludedActivityTypes:
url(string) - a URL to sharemessage(string) - a message to sharesubject(string) - a subject for the messageexcludedActivityTypes(array) - the activites to exclude from the ActionSheet
NOTE: if url points to a local file, or is a base64-encoded
diff --git a/releases/next/docs/activityindicator.html b/releases/next/docs/activityindicator.html
index 26e7402ad3a..5b88e473f5e 100644
--- a/releases/next/docs/activityindicator.html
+++ b/releases/next/docs/activityindicator.html
@@ -1,4 +1,4 @@
-
ActivityIndicator # | Edit on GitHub |
Displays a circular loading indicator.
Props #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36. +
ActivityIndicator # | Edit on GitHub |
Displays a circular loading indicator.
Props #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36. Other sizes can be obtained using a scale transform.
ioshidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
Examples # | Edit on GitHub |
Alert # | Edit on GitHub |
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the +
Alert # | Edit on GitHub |
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, diff --git a/releases/next/docs/alertios.html b/releases/next/docs/alertios.html index 1d01c103037..bd13c8afe07 100644 --- a/releases/next/docs/alertios.html +++ b/releases/next/docs/alertios.html @@ -1,4 +1,4 @@ -
AlertIOS # | Edit on GitHub |
AlertIOS provides functionality to create an iOS alert dialog with a
+
AlertIOS # | Edit on GitHub |
AlertIOS provides functionality to create an iOS alert dialog with a
message or create a prompt for user input.
Creating an iOS alert:
Building React Native from source # | Edit on GitHub |
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Local Maven repository for Support Libraries (formerly
Android Support Repository) >= 17 (for Android Support Library) - Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: either have $ANDROID_SDK and $ANDROID_NDK defined, or create a local.properties file in the root of your react-native checkout with the following contents:
Building React Native from source # | Edit on GitHub |
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
Prerequisites #
Assuming you have the Android SDK installed, run android to open the Android SDK Manager.
Make sure you have the following installed:
- Android SDK version 23 (compileSdkVersion in
build.gradle) - SDK build tools version 23.0.1 (buildToolsVersion in
build.gradle) - Local Maven repository for Support Libraries (formerly
Android Support Repository) >= 17 (for Android Support Library) - Android NDK (download links and installation instructions below)
Point Gradle to your Android SDK: either have $ANDROID_SDK and $ANDROID_NDK defined, or create a local.properties file in the root of your react-native checkout with the following contents:
Example:
Download links for Android NDK #
- Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
- Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
- Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
- Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip
You can find further instructions on the official page.
Building the source #
1. Installing the fork #
First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:
Alternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.
2. Adding gradle dependencies #
Add gradle-download-task as dependency in android/build.gradle:
Profiling Android UI Performance # | Edit on GitHub |
We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).
The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called systrace. But first...
Make sure that JS dev mode is OFF!
You should see
__DEV__ === false, development-level warning are OFF, performance optimizations are ONin your application logs (which you can view usingadb logcat)
Profiling with Systrace #
Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.
Collecting a trace #
NOTE:
Systrace support was added in react-native
v0.15. You will need to build with that version to collect a trace.
First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows
A quick breakdown of this command:
timeis the length of time the trace will be collected in secondssched,gfx, andvieware the android SDK tags (collections of markers) we care about:schedgives you information about what's running on each core of your phone,gfxgives you graphics info such as frame boundaries, andviewgives you information about measure, layout, and draw passes-a <your_package_name>enables app-specific markers, specifically the ones built into the React Native framework.your_package_namecan be found in theAndroidManifest.xmlof your app and looks likecom.example.app
Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.
Reading the trace #
After opening the trace in your browser (preferably Chrome), you should see something like this:
HINT: Use the WASD keys to strafe and zoom
Enable VSync highlighting #
The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:
You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.
Find your process #
Scroll until you see (part of) the name of your package. In this case, I was profiling com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.
On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.
UI Thread #
This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with Choreographer, traversals, and DispatchUI:
JS Thread #
This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:
Native Modules Thread #
This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:
Bonus: Render Thread #
If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:
Identifying a culprit #
A smooth animation should look something like the following:
Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.
If you noticed chop, however, you might see something like this:
Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, the problem lies in JS.
You might also see something like this:
In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, the problem lies in the native views being rendered.
At this point, you'll have some very helpful information to inform your next steps.
JS Issues #
If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:
This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into shouldComponentUpdate.
TODO: Add more tools for profiling JS
Native UI Issues #
If you identified a native UI problem, there are usually two scenarios:
- the UI you're trying to draw each frame involves to much work on the GPU, or
- You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).
Too much GPU work #
In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:
Notice the long amount of time spent in DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.
To mitigate this, you should:
- investigate using
renderToHardwareTextureAndroidfor complex, static content that is being animated/transformed (e.g. theNavigatorslide/alpha animations) - make sure that you are not using
needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.
If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.
Creating new views on the UI thread #
In the second scenario, you'll see something more like this:
Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.
There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.
Still stuck? #
If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.
Profiling Android UI Performance # | Edit on GitHub |
We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).
The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called systrace. But first...
Make sure that JS dev mode is OFF!
You should see
__DEV__ === false, development-level warning are OFF, performance optimizations are ONin your application logs (which you can view usingadb logcat)
Profiling with Systrace #
Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.
Collecting a trace #
NOTE:
Systrace support was added in react-native
v0.15. You will need to build with that version to collect a trace.
First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows
A quick breakdown of this command:
timeis the length of time the trace will be collected in secondssched,gfx, andvieware the android SDK tags (collections of markers) we care about:schedgives you information about what's running on each core of your phone,gfxgives you graphics info such as frame boundaries, andviewgives you information about measure, layout, and draw passes-a <your_package_name>enables app-specific markers, specifically the ones built into the React Native framework.your_package_namecan be found in theAndroidManifest.xmlof your app and looks likecom.example.app
Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.
Reading the trace #
After opening the trace in your browser (preferably Chrome), you should see something like this:
HINT: Use the WASD keys to strafe and zoom
Enable VSync highlighting #
The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:
You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.
Find your process #
Scroll until you see (part of) the name of your package. In this case, I was profiling com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.
On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.
UI Thread #
This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with Choreographer, traversals, and DispatchUI:
JS Thread #
This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:
Native Modules Thread #
This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:
Bonus: Render Thread #
If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:
Identifying a culprit #
A smooth animation should look something like the following:
Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.
If you noticed chop, however, you might see something like this:
Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, the problem lies in JS.
You might also see something like this:
In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, the problem lies in the native views being rendered.
At this point, you'll have some very helpful information to inform your next steps.
JS Issues #
If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:
This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into shouldComponentUpdate.
TODO: Add more tools for profiling JS
Native UI Issues #
If you identified a native UI problem, there are usually two scenarios:
- the UI you're trying to draw each frame involves to much work on the GPU, or
- You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).
Too much GPU work #
In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:
Notice the long amount of time spent in DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.
To mitigate this, you should:
- investigate using
renderToHardwareTextureAndroidfor complex, static content that is being animated/transformed (e.g. theNavigatorslide/alpha animations) - make sure that you are not using
needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.
If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.
Creating new views on the UI thread #
In the second scenario, you'll see something more like this:
Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.
There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.
Still stuck? #
If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.
Animated # | Edit on GitHub |
Animations are an important part of modern UX, and the Animated
+
Animated # | Edit on GitHub |
Animations are an important part of modern UX, and the Animated
library is designed to make them fluid, powerful, and easy to build and
maintain.
The simplest workflow is to create an Animated.Value, hook it up to one or
more style attributes of an animated component, and then drive updates either
diff --git a/releases/next/docs/animations.html b/releases/next/docs/animations.html
index e8dbab50346..c5a8e206edd 100644
--- a/releases/next/docs/animations.html
+++ b/releases/next/docs/animations.html
@@ -1,4 +1,4 @@
-
Animations # | Edit on GitHub |
Fluid, meaningful animations are essential to the mobile user experience. Like +
Animations # | Edit on GitHub |
Fluid, meaningful animations are essential to the mobile user experience. Like
everything in React Native, Animation APIs for React Native are currently under
development, but have started to coalesce around two complementary systems:
LayoutAnimation for animated global layout transactions, and Animated for
diff --git a/releases/next/docs/appregistry.html b/releases/next/docs/appregistry.html
index f2552f39f51..3bc19e42176 100644
--- a/releases/next/docs/appregistry.html
+++ b/releases/next/docs/appregistry.html
@@ -1,4 +1,4 @@
-
AppRegistry # | Edit on GitHub |
AppRegistry is the JS entry point to running all React Native apps. App
+
AppRegistry # | Edit on GitHub |
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
diff --git a/releases/next/docs/appstate.html b/releases/next/docs/appstate.html
index 6a18287c82e..73df21aa513 100644
--- a/releases/next/docs/appstate.html
+++ b/releases/next/docs/appstate.html
@@ -1,4 +1,4 @@
-
AppState # | Edit on GitHub |
AppState can tell you if the app is in the foreground or background,
+
AppState # | Edit on GitHub |
AppState can tell you if the app is in the foreground or background,
and notify you when the state changes.
AppState is frequently used to determine the intent and proper behavior when handling push notifications.
App States #
active- The app is running in the foregroundbackground- The app is running in the background. The user is either in another app or on the home screeninactive- This is a state that occurs when transitioning between diff --git a/releases/next/docs/asyncstorage.html b/releases/next/docs/asyncstorage.html index 3951c0a9304..dba7bdd5a13 100644 --- a/releases/next/docs/asyncstorage.html +++ b/releases/next/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage – React Native | A framework for building native apps using React AsyncStorage #
Edit on GitHub AsyncStorage is a simple, asynchronous, persistent, key-value storage +
AsyncStorage – React Native | A framework for building native apps using React AsyncStorage #
Edit on GitHub AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. 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.
On iOS, AsyncStorage is backed by native code that stores small values in a serialized diff --git a/releases/next/docs/backandroid.html b/releases/next/docs/backandroid.html index 73d5f36fe96..731430dd7c9 100644 --- a/releases/next/docs/backandroid.html +++ b/releases/next/docs/backandroid.html @@ -1,4 +1,4 @@ -
BackAndroid – React Native | A framework for building native apps using React BackAndroid #
Edit on GitHub Detect hardware back button presses, and programmatically invoke the default back button +
BackAndroid – React Native | A framework for building native apps using React BackAndroid #
Edit on GitHub Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true.
Example:
BackAndroid.addEventListener('hardwareBackPress', function() { if (!this.onMainScreen()) { this.goBack(); diff --git a/releases/next/docs/basics-component-image.html b/releases/next/docs/basics-component-image.html index 05bb16536b8..14d71a3a80c 100644 --- a/releases/next/docs/basics-component-image.html +++ b/releases/next/docs/basics-component-image.html @@ -1,4 +1,4 @@ -Image – React Native | A framework for building native apps using React Image #
Edit on GitHub The other basic React Native component is the
Imagecomponent. LikeText, theImagecomponent simply renders an image.An
Imageis analogous to usingimgwhen building websites.The simplest way to render an image is to provide a source file to that image via the
sourceattribute.This example displays a checkbox
Imageon the device.import React from 'react'; +Image – React Native | A framework for building native apps using React Image #
Edit on GitHub The other basic React Native component is the
Imagecomponent. LikeText, theImagecomponent simply renders an image.An
Imageis analogous to usingimgwhen building websites.The simplest way to render an image is to provide a source file to that image via the
sourceattribute.This example displays a checkbox
Imageon the device.import React from 'react'; import { AppRegistry, Image } from 'react-native'; const App = () => { diff --git a/releases/next/docs/basics-component-listview.html b/releases/next/docs/basics-component-listview.html index a27a9afbda1..3f4019796e5 100644 --- a/releases/next/docs/basics-component-listview.html +++ b/releases/next/docs/basics-component-listview.html @@ -1,4 +1,4 @@ -ListView – React Native | A framework for building native apps using React ListView #
Edit on GitHub On mobile devices, lists are a core element in many applications. The
ListViewcomponent is a special type ofViewthat displays a vertically scrolling list of changing, but similarly structured, data.ListViewworks best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.Unlike the more generic
ScrollView, theListViewonly renders elements that are currently showing on the screen, not all the elements at once.The
ListViewcomponent requires two properties,dataSourceandrenderRow.dataSourceis the actual source of information that will be part of the list.renderRowtakes the data and returns a renderable component to display.This example creates a simple
ListViewof hardcoded data. It first initializes thedatasourcethat will be used to populate theListView. Then it renders thatListViewwith that data.A
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.import React from 'react'; +ListView – React Native | A framework for building native apps using React ListView #
Edit on GitHub On mobile devices, lists are a core element in many applications. The
ListViewcomponent is a special type ofViewthat displays a vertically scrolling list of changing, but similarly structured, data.ListViewworks best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.Unlike the more generic
ScrollView, theListViewonly renders elements that are currently showing on the screen, not all the elements at once.The
ListViewcomponent requires two properties,dataSourceandrenderRow.dataSourceis the actual source of information that will be part of the list.renderRowtakes the data and returns a renderable component to display.This example creates a simple
ListViewof hardcoded data. It first initializes thedatasourcethat will be used to populate theListView. Then it renders thatListViewwith that data.A
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.import React from 'react'; import { AppRegistry, Text, View, ListView} from 'react-native'; var SimpleList = React.createClass({ diff --git a/releases/next/docs/basics-component-scrollview.html b/releases/next/docs/basics-component-scrollview.html index 7bcae6d8309..06b1c9a580f 100644 --- a/releases/next/docs/basics-component-scrollview.html +++ b/releases/next/docs/basics-component-scrollview.html @@ -1,4 +1,4 @@ -ScrollView – React Native | A framework for building native apps using React ScrollView #
Edit on GitHub Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The
ScrollViewis a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting thehorizontalproperty).ScrollViewworks best to present a list of short, static items of a known quantity. All the elements and views of aScrollVieware rendered a priori, even if they are not currently shown on the screen. Contrast this with aListView, which render only those views that are on the screen and remove views that go off-screen.TextViewandListVieware specialized scrollable containers.This contrived example creates a horizontal
ScrollViewwith a static amount of heterogenous elements (images and text).import React, { AppRegistry, ScrollView, Image, Text, View } from 'react-native' +ScrollView – React Native | A framework for building native apps using React ScrollView #
Edit on GitHub Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The
ScrollViewis a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting thehorizontalproperty).ScrollViewworks best to present a list of short, static items of a known quantity. All the elements and views of aScrollVieware rendered a priori, even if they are not currently shown on the screen. Contrast this with aListView, which render only those views that are on the screen and remove views that go off-screen.TextViewandListVieware specialized scrollable containers.This contrived example creates a horizontal
ScrollViewwith a static amount of heterogenous elements (images and text).import React, { AppRegistry, ScrollView, Image, Text, View } from 'react-native' var SimpleScrollView = React.createClass({ render(){ diff --git a/releases/next/docs/basics-component-text.html b/releases/next/docs/basics-component-text.html index 20c4e31d79f..4836eeafaf6 100644 --- a/releases/next/docs/basics-component-text.html +++ b/releases/next/docs/basics-component-text.html @@ -1,4 +1,4 @@ -Text – React Native | A framework for building native apps using React Text #
Edit on GitHub The most basic component in React Native is the
Textcomponent. TheTextcomponent simply renders text.This example displays the
string"Hello World!"on the device.import React from 'react'; +Text – React Native | A framework for building native apps using React Text #
Edit on GitHub The most basic component in React Native is the
Textcomponent. TheTextcomponent simply renders text.This example displays the
string"Hello World!"on the device.import React from 'react'; import { AppRegistry, Text } from 'react-native'; const App = () => { diff --git a/releases/next/docs/basics-component-textinput.html b/releases/next/docs/basics-component-textinput.html index 8215e29f517..43143efdeec 100644 --- a/releases/next/docs/basics-component-textinput.html +++ b/releases/next/docs/basics-component-textinput.html @@ -1,4 +1,4 @@ -TextInput – React Native | A framework for building native apps using React TextInput #
Edit on GitHub Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this.
TextInputis a basic component that allows the user to enter text.This example creates a simple
TextInputbox with thestringHelloas the placeholder when theTextInputis empty.import React from 'react'; +TextInput – React Native | A framework for building native apps using React TextInput #
Edit on GitHub Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this.
TextInputis a basic component that allows the user to enter text.This example creates a simple
TextInputbox with thestringHelloas the placeholder when theTextInputis empty.import React from 'react'; import { AppRegistry, TextInput, View } from 'react-native'; const App = () => { diff --git a/releases/next/docs/basics-component-view.html b/releases/next/docs/basics-component-view.html index 393d46b2f11..a40d8ae7e19 100644 --- a/releases/next/docs/basics-component-view.html +++ b/releases/next/docs/basics-component-view.html @@ -1,4 +1,4 @@ -View – React Native | A framework for building native apps using React View #
Edit on GitHub A
Viewis the most basic building block for a React Native application. TheViewis an abstraction on top of the target platform's native equivalent, such as iOS'sUIView.A
Viewis analogous to using adivfor building websites.While basic components such as
TextandImage, can be displayed without aView, this is not generally recommended since theViewgives you the control for styling and layout of those components.This example creates a
Viewthat aligns thestringHelloin the top center of the device, something which could not be done with aTextcomponent alone (i.e., aTextcomponent without aViewwould place thestringin a fixed location in the upper corner):import React from 'react'; +View – React Native | A framework for building native apps using React View #
Edit on GitHub A
Viewis the most basic building block for a React Native application. TheViewis an abstraction on top of the target platform's native equivalent, such as iOS'sUIView.A
Viewis analogous to using adivfor building websites.While basic components such as
TextandImage, can be displayed without aView, this is not generally recommended since theViewgives you the control for styling and layout of those components.This example creates a
Viewthat aligns thestringHelloin the top center of the device, something which could not be done with aTextcomponent alone (i.e., aTextcomponent without aViewwould place thestringin a fixed location in the upper corner):import React from 'react'; import { AppRegistry, Text, View } from 'react-native'; const App = () => { diff --git a/releases/next/docs/basics-components.html b/releases/next/docs/basics-components.html index 1a2605fda9a..fe9073bb0df 100644 --- a/releases/next/docs/basics-components.html +++ b/releases/next/docs/basics-components.html @@ -1,4 +1,4 @@ -Components – React Native | A framework for building native apps using React Components #
Edit on GitHub Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.
Core Components. #
React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.
Components #
Edit on GitHub Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.
Core Components. #
React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.
Integration With Existing Apps #
Edit on GitHub +Integration With Existing Apps – React Native | A framework for building native apps using React