AlertIOS manages native iOS alerts, option sheets, and share dialogs
All rights reserved.
This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.
@flow
AppRegistry is the JS entry point to running all React Native apps. App
+
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/docs/appstate.html b/docs/appstate.html
index fbd0477e6a0..d528699a25b 100644
--- a/docs/appstate.html
+++ b/docs/appstate.html
@@ -1,4 +1,6 @@
-
All rights reserved.
This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.
All rights reserved.
This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.
AsyncStorage is a simple, asynchronous, persistent, global, key-value storage +
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 diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 5dd0749e178..d7f70bc4cf6 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,6 @@ -
Saves the image with tag tag to the camera roll.
@param {string} tag - Can be any of the three kinds of tags we accept: +
All rights reserved.
This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.
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
diff --git a/docs/datepickerios.html b/docs/datepickerios.html
index 797da625a31..2f945cfa137 100644
--- a/docs/datepickerios.html
+++ b/docs/datepickerios.html
@@ -1,4 +1,4 @@
-
Use DatePickerIOS to render a date/time picker (selector) on iOS. This is
+
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
diff --git a/docs/getting-started.html b/docs/getting-started.html
index eb4e23d7076..a1e9e4b3093 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -1,4 +1,4 @@
-
Our first React Native implementation is ReactKit, targeting iOS. We are also
+
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
diff --git a/docs/image.html b/docs/image.html
index 4fa147e7f49..a0082cccb0a 100644
--- a/docs/image.html
+++ b/docs/image.html
@@ -1,4 +1,4 @@
-
A react component for displaying different types of images, +
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:
Example usage:
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 +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. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.
InteractionManager allows long-running work to be scheduled after any +
InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
Applications can schedule tasks to run after interactions with the following:
All rights reserved.
This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.
ListView - A core component designed for efficient display of vertically +
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
diff --git a/docs/mapview.html b/docs/mapview.html
index 21125e6f0de..07214968d18 100644
--- a/docs/mapview.html
+++ b/docs/mapview.html
@@ -1,4 +1,4 @@
-
Insets for the map's legal label, originally at bottom left of the map. +
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
@@ -12,7 +12,7 @@ that true north is situated at the top of the map view
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
+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.
Sometimes an app needs access to platform API, and React Native doesn't have a corresponding wrapper yet. Maybe you want to reuse some existing Objective-C or C++ code without having to reimplement it in JavaScript. Or write some high performance, multi-threaded code such as image processing, network stack, database or rendering.
We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.
This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C (Swift is not supported yet) and core libraries (Foundation, UIKit).
This guide will use iOS Calendar API example. Let's say we would like to be able to access iOS calendar from JavaScript.
Native module is just an Objectve-C class that implements RCTBridgeModule protocol. If you are wondering, RCT is a shorthand for ReaCT.
Sometimes an app needs access to platform API, and React Native doesn't have a corresponding wrapper yet. Maybe you want to reuse some existing Objective-C or C++ code without having to reimplement it in JavaScript. Or write some high performance, multi-threaded code such as image processing, network stack, database or rendering.
We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.
This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C (Swift is not supported yet) and core libraries (Foundation, UIKit).
This guide will use iOS Calendar API example. Let's say we would like to be able to access iOS calendar from JavaScript.
Native module is just an Objectve-C class that implements RCTBridgeModule protocol. If you are wondering, RCT is a shorthand for ReaCT.
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +
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:
React NativeresetTo(route) - Replaces the top it
initialRoute={...}
/>
),
-});NavigatorIOS uses "route" objects to identify child views, their props, +});
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. +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
NetInfo exposes info about online/offline status
== iOS Reachability
Asyncronously determine if the device is online and on a cellular network.
NetInfo exposes info about online/offline status
== iOS Reachability
Asyncronously determine if the device is online and on a cellular network.
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 since there is no concept of CORS.
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 since there is no concept of CORS.
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's +
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
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.
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 diff --git a/docs/pixels.html b/docs/pixels.html index 795d8d517d1..7133d41accb 100644 --- a/docs/pixels.html +++ b/docs/pixels.html @@ -1,4 +1,4 @@ -
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 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.
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 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 +
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 @@ -39,7 +39,7 @@ The default value is 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
+
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.
All rights reserved.
This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.
@flow
The way to declare styles in React Native is the following:
The way to declare styles in React Native is the following:
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
Use SwitchIOS to render a boolean input on iOS. This is
+
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
diff --git a/docs/tabbarios.html b/docs/tabbarios.html
index cb1fa546056..50db3b7054f 100644
--- a/docs/tabbarios.html
+++ b/docs/tabbarios.html
@@ -1,4 +1,4 @@
-
A react component for displaying text which supports nesting, +
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
@@ -27,7 +27,7 @@ each other on account of the literal newlines:
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
+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.
A foundational component for inputting text into the app via a +
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
@@ -23,7 +23,7 @@ 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 as its asynchronicity primitive.
One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. 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 is scheduled to start after any interactions/animations have completed.
Applications can schedule tasks to run after interactions with the following:
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 as its asynchronicity primitive.
One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. 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 is scheduled to start 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:
A wrapper for making views respond properly to touches. +
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 @@ -13,7 +13,7 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color </View> ); },
Determines what the opacity of the wrapped view should be when touch is -active.
The color of the underlay that will show through when the touch is +active.
The color of the underlay that will show through when the touch is active.
A wrapper for making views respond properly to touches. +
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:
Do not use unless you have a very good reason. All the elements that +
Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".