diff --git a/.eslintignore b/.eslintignore index d59f8f384..698b5357d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,12 +4,7 @@ **/main.js Libraries/vendor/**/* Libraries/Renderer/* -website/node_modules pr-inactivity-bookmarklet.js question-bookmarklet.js flow/ -website/core/metadata.js -website/core/metadata-blog.js -website/src/react-native/docs/ -website/src/react-native/blog/ danger/ diff --git a/.flowconfig b/.flowconfig index 5b26fd101..ea1254de4 100644 --- a/.flowconfig +++ b/.flowconfig @@ -5,9 +5,6 @@ ; Ignore templates for 'react-native init' .*/local-cli/templates/.* -; Ignore the website subdir -/website/.* - ; Ignore the Dangerfile /danger/dangerfile.js diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a5d8f8dcd..45740eb85 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -9,10 +9,7 @@ React/Views/* @shergin React/Modules/* @shergin React/CxxBridge/* @mhorowitz ReactAndroid/src/main/java/com/facebook/react/animated/* @janicduplessis -website/* @hramos -website/showcase.json @hramos package.json @hramos -website/package.json @hramos local-cli/core/* @grabbou @kureev local-cli/link/* @grabbou @kureev local-cli/unlink/* @grabbou @kureev diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 541ea2ea9..809e63ecd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -106,11 +106,10 @@ All pull requests should be opened against the `master` branch. After opening yo #### Test plan -A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. +A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI. * If you've added code that should be tested, add tests! * If you've changed APIs, update the documentation. -* If you've updated the docs, verify the website locally and submit screenshots if applicable (see [website/README.md](https://github.com/facebook/react-native/blob/master/website/README.md)) See [What is a Test Plan?](https://medium.com/@martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9) to learn more. diff --git a/docs/Accessibility.md b/docs/Accessibility.md deleted file mode 100644 index 9321d2bc1..000000000 --- a/docs/Accessibility.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: accessibility -title: Accessibility -layout: docs -category: Guides -permalink: docs/accessibility.html -next: improvingux -previous: animations ---- - -## 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. - -In addition to this documentation, you might find [this blog post](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/) about React Native accessibility to be useful. - -## 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}’. - -```javascript - - text one - text two - -``` - -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: - -```javascript - - - Press me! - - -``` - -In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces. - -#### accessibilityTraits (iOS) - -Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`. - -To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings: - -* **none** Used when the element has no traits. -* **button** Used when the element should be treated as a button. -* **link** Used when the element should be treated as a link. -* **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar). -* **search** Used when the text field element should also be treated as a search field. -* **image** Used when the element should be treated as an image. Can be combined with button or link, for example. -* **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control. -* **plays** Used when the element plays its own sound when activated. -* **key** Used when the element acts as a keyboard key. -* **text** Used when the element should be treated as static text that cannot change. -* **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait. -* **disabled** Used when the control is not enabled and does not respond to user input. -* **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example. -* **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver. -* **adjustable** Used when an element can be "adjusted" (e.g. a slider). -* **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard). -* **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element. - -#### accessibilityViewIsModal (iOS) - -A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. - -For example, in a window that contains sibling views `A` and `B`, setting `accessibilityViewIsModal` to `true` on view `B` causes VoiceOver to ignore the elements in the view `A`. -On the other hand, if view `B` contains a child view `C` and you set `accessibilityViewIsModal` to `true` on view `C`, VoiceOver does not ignore the elements in view `A`. - -#### onAccessibilityTap (iOS) - -Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected. - -#### onMagicTap (iOS) - -Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an `onMagicTap` function, the system will traverse up the view hierarchy until it finds a view that does. - -#### accessibilityComponentType (Android) - -In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on. - -```javascript - - - Press me! - - -``` - -In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button. - -#### accessibilityLiveRegion (Android) - -When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’: - -* **none** Accessibility services should not announce changes to this view. -* **polite** Accessibility services should announce changes to this view. -* **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view. - -```javascript - - - Click me - - - - Clicked {this.state.count} times - -``` - -In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property. - -#### importantForAccessibility (Android) - -In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children). - -```javascript - - - First layout - - - Second layout - - -``` - -In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack. - -### Checking if a Screen Reader is Enabled - -The `AccessibilityInfo` API allows you to determine whether or not a screen reader is currently active. See the [AccessibilityInfo documentation](docs/accessibilityinfo.html) for details. - -### Sending Accessibility Events (Android) - -Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. - -```javascript -_onPress: function() { - this.state.radioButton = this.state.radioButton === “radiobutton_checked” ? - “radiobutton_unchecked” : “radiobutton_checked”; - if (this.state.radioButton === “radiobutton_checked”) { - RCTUIManager.sendAccessibilityEvent( - ReactNative.findNodeHandle(this), - RCTUIManager.AccessibilityEventTypes.typeViewClicked); - } -} - - -``` - -In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection. - - -## Testing VoiceOver Support (iOS) - -To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver. - -To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top. - -At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button. diff --git a/docs/Animations.md b/docs/Animations.md deleted file mode 100644 index 52b5e939e..000000000 --- a/docs/Animations.md +++ /dev/null @@ -1,512 +0,0 @@ ---- -id: animations -title: Animations -layout: docs -category: Guides -permalink: docs/animations.html -next: accessibility -previous: images ---- - -Animations are very important to create a great user experience. -Stationary objects must overcome inertia as they start moving. -Objects in motion have momentum and rarely come to a stop immediately. -Animations allow you to convey physically believable motion in your interface. - -React Native provides two complementary animation systems: -[`Animated`](docs/animations.html#animated-api) for granular and interactive control of specific values, and -[`LayoutAnimation`](docs/animations.html#layoutanimation) for animated global layout transactions. - -## `Animated` API - -The [`Animated`](docs/animated.html) API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. -`Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution. - -`Animated` exports four animatable component types: `View`, `Text`, `Image`, and `ScrollView`, but you can also create your own using `Animated.createAnimatedComponent()`. - -For example, a container view that fades in when it is mounted may look like this: - -```SnackPlayer -import React from 'react'; -import { Animated, Text, View } from 'react-native'; - -class FadeInView extends React.Component { - state = { - fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 - } - - componentDidMount() { - Animated.timing( // Animate over time - this.state.fadeAnim, // The animated value to drive - { - toValue: 1, // Animate to opacity: 1 (opaque) - duration: 10000, // Make it take a while - } - ).start(); // Starts the animation - } - - render() { - let { fadeAnim } = this.state; - - return ( - - {this.props.children} - - ); - } -} - -// You can then use your `FadeInView` in place of a `View` in your components: -export default class App extends React.Component { - render() { - return ( - - - Fading in - - - ) - } -} -``` - -Let's break down what's happening here. -In the `FadeInView` constructor, a new `Animated.Value` called `fadeAnim` is initialized as part of `state`. -The opacity property on the `View` is mapped to this animated value. -Behind the scenes, the numeric value is extracted and used to set opacity. - -When the component mounts, the opacity is set to 0. -Then, an easing animation is started on the `fadeAnim` animated value, -which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1. - -This is done in an optimized way that is faster than calling `setState` and re-rendering. -Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread. - -### Configuring animations - -Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. - -`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](docs/animated.html#timing). -It supports animating a value over time using one of various predefined easing functions, or you can use your own. -Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects. - -By default, `timing` will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. -You can specify a different easing function by passing a `easing` parameter. -Custom `duration` or even a `delay` before the animation starts is also supported. - -For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position: - -```javascript -Animated.timing( - this.state.xPosition, - { - toValue: 100, - easing: Easing.back(), - duration: 2000, - } -).start(); -``` - -Take a look at the [Configuring animations](docs/animated.html#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations. - -### Composing animations - -Animations can be combined and played in sequence or in parallel. -Sequential animations can play immediately after the previous animation has finished, -or they can start after a specified delay. -The `Animated` API provides several methods, such as `sequence()` and `delay()`, -each of which simply take an array of animations to execute and automatically calls `start()`/`stop()` as needed. - -For example, the following animation coasts to a stop, then it springs back while twirling in parallel: - -```javascript -Animated.sequence([ // decay, then spring to start and twirl - Animated.decay(position, { // coast to a stop - velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release - deceleration: 0.997, - }), - Animated.parallel([ // after decay, in parallel: - Animated.spring(position, { - toValue: {x: 0, y: 0} // return to start - }), - Animated.timing(twirl, { // and twirl - toValue: 360, - }), - ]), -]).start(); // start the sequence group -``` - -If one animation is stopped or interrupted, then all other animations in the group are also stopped. -`Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this. - -You can find a full list of composition methods in the [Composing animations](docs/animated.html#composing-animations) section of the `Animated` API reference. - -### Combining animated values - -You can [combine two animated values](docs/animated.html#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value. - -There are some cases where an animated value needs to invert another animated value for calculation. -An example is inverting a scale (2x --> 0.5x): - -```javascript -const a = new Animated.Value(1); -const b = Animated.divide(1, a); - -Animated.spring(a, { - toValue: 2, -}).start(); -``` - -### Interpolation - -Each property can be run through an interpolation first. -An interpolation maps input ranges to output ranges, -typically using a linear interpolation but also supports easing functions. -By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. - -A simple mapping to convert a 0-1 range to a 0-100 range would be: - -```javascript -value.interpolate({ - inputRange: [0, 1], - outputRange: [0, 100], -}); -``` - -For example, you may want to think about your `Animated.Value` as going from 0 to 1, -but animate the position from 150px to 0px and the opacity from 0 to 1. -This can easily be done by modifying `style` from the example above like so: - -```javascript - style={{ - opacity: this.state.fadeAnim, // Binds directly - transform: [{ - translateY: this.state.fadeAnim.interpolate({ - inputRange: [0, 1], - outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 - }), - }], - }} -``` - -[`interpolate()`](docs/animated.html#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. -For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do: - -```javascript -value.interpolate({ - inputRange: [-300, -100, 0, 100, 101], - outputRange: [300, 0, 1, 0, 0], -}); -``` - -Which would map like so: - -``` -Input | Output -------|------- - -400| 450 - -300| 300 - -200| 150 - -100| 0 - -50| 0.5 - 0| 1 - 50| 0.5 - 100| 0 - 101| 0 - 200| 0 -``` - -`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do: - -```javascript -value.interpolate({ - inputRange: [0, 360], - outputRange: ['0deg', '360deg'] -}) -``` - -`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the -[`Easing`](docs/easing.html) module. -`interpolate()` also has configurable behavior for extrapolating the `outputRange`. -You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. -The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`. - -### Tracking dynamic values - -Animated values can also track other values. -Just set the `toValue` of an animation to another animated value instead of a plain number. -For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. -They can also be composed with interpolations: - -```javascript -Animated.spring(follower, {toValue: leader}).start(); -Animated.timing(opacity, { - toValue: pan.x.interpolate({ - inputRange: [0, 300], - outputRange: [1, 0], - }), -}).start(); -``` - -The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. -`ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. -It is a simple wrapper that basically contains two `Animated.Value` instances and some helper functions that call through to them, -making `ValueXY` a drop-in replacement for `Value` in many cases. -It allows us to track both x and y values in the example above. - -### Tracking gestures - -Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](docs/animated.html#event). -This is done with a structured map syntax so that values can be extracted from complex event objects. -The first level is an array to allow mapping across multiple args, and that array contains nested objects. - -For example, when working with horizontal scrolling gestures, -you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`): - -```javascript - onScroll={Animated.event( - // scrollX = e.nativeEvent.contentOffset.x - [{ nativeEvent: { - contentOffset: { - x: scrollX - } - } - }] - )} -``` - -When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. -We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, -which is the `gestureState`. - -```javascript -onPanResponderMove={Animated.event( - [null, // ignore the native event - // extract dx and dy from gestureState - // like 'pan.x = gestureState.dx, pan.y = gestureState.dy' - {dx: pan.x, dy: pan.y} -])} -``` - -### Responding to the current animation value - -You may notice that there is no obvious way to read the current value while animating. -This is because the value may only be known in the native runtime due to optimizations. -If you need to run JavaScript in response to the current value, there are two approaches: - -- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions. -- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. - This is useful for triggering state changes, - for example snapping a bobble to a new option as the user drags it closer, - because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps. - -`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. -This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. -Check out `Animated.Value.addListener` as a way to work around some of these limitations, -but use it sparingly since it might have performance implications in the future. - -### Using the native driver - -The `Animated` API is designed to be serializable. -By using the [native driver](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html), -we send everything about the animation to native before starting the animation, -allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. -Once the animation has started, the JS thread can be blocked without affecting the animation. - -Using the native driver for normal animations is quite simple. -Just add `useNativeDriver: true` to the animation config when starting it. - -```javascript -Animated.timing(this.state.animatedValue, { - toValue: 1, - duration: 500, - useNativeDriver: true, // <-- Add this -}).start(); -``` - -Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, -make sure every animation on that value also uses the native driver. - -The native driver also works with `Animated.event`. -This is specially useful for animations that follow the scroll position as without the native driver, -the animation will always run a frame behind the gesture due to the async nature of React Native. - -```javascript - - {content} - -``` - -You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/master/RNTester/), -then loading the Native Animated Example. -You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) to learn how these examples were produced. - -#### Caveats - -Not everything you can do with `Animated` is currently supported by the native driver. -The main limitation is that you can only animate non-layout properties: -things like `transform` and `opacity` will work, but flexbox and position properties will not. -When using `Animated.event`, it will only work with direct events and not bubbling events. -This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`. - -When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue. - -### Bear in mind - -While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. -At this time some animations may not render on Android without it. Example below. - -```javascript - -``` - -### Additional examples - -The RNTester app has various examples of `Animated` in use: - -- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/RNTester/js/AnimatedGratuitousApp) -- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) - -## `LayoutAnimation` API - -`LayoutAnimation` allows you to globally configure `create` and `update` -animations that will be used for all views in the next render/layout cycle. -This is useful for doing flexbox layout updates without bothering to measure or -calculate specific properties in order to animate them directly, and is -especially useful when layout changes may affect ancestors, for example a "see -more" expansion that also increases the size of the parent and pushes down the -row below which would otherwise require explicit coordination between the -components in order to animate them all in sync. - -Note that although `LayoutAnimation` is very powerful and can be quite useful, -it provides much less control than `Animated` and other animation libraries, so -you may need to use another approach if you can't get `LayoutAnimation` to do -what you want. - -Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`: - -```javascript -UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -``` - -```SnackPlayer -import React from 'react'; -import { - NativeModules, - LayoutAnimation, - Text, - TouchableOpacity, - StyleSheet, - View, -} from 'react-native'; - -const { UIManager } = NativeModules; - -UIManager.setLayoutAnimationEnabledExperimental && - UIManager.setLayoutAnimationEnabledExperimental(true); - -export default class App extends React.Component { - state = { - w: 100, - h: 100, - }; - - _onPress = () => { - // Animate the update - LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}) - } - - render() { - return ( - - - - - Press me! - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - box: { - width: 200, - height: 200, - backgroundColor: 'red', - }, - button: { - backgroundColor: 'black', - paddingHorizontal: 20, - paddingVertical: 15, - marginTop: 15, - }, - buttonText: { - color: '#fff', - fontWeight: 'bold', - }, -}); -``` - -This example uses a preset value, you can customize the animations as -you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js) -for more information. - -## Additional notes - -### `requestAnimationFrame` - -`requestAnimationFrame` is a polyfill from the browser that you might be -familiar with. It accepts a function as its only argument and calls that -function before the next repaint. It is an essential building block for -animations that underlies all of the JavaScript-based animation APIs. In -general, you shouldn't need to call this yourself - the animation APIs will -manage frame updates for you. - -### `setNativeProps` - -As mentioned [in the Direct Manipulation section](docs/direct-manipulation.html), -`setNativeProps` allows us to modify properties of native-backed -components (components that are actually backed by native views, unlike -composite components) directly, without having to `setState` and -re-render the component hierarchy. - -We could use this in the Rebound example to update the scale - this -might be helpful if the component that we are updating is deeply nested -and hasn't been optimized with `shouldComponentUpdate`. - -If you find your animations with dropping frames (performing below 60 frames -per second), look into using `setNativeProps` or `shouldComponentUpdate` to -optimize them. Or you could run the animations on the UI thread rather than -the JavaScript thread [with the useNativeDriver -option](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html). -You may also want to defer any computationally intensive work until after -animations are complete, using the -[InteractionManager](docs/interactionmanager.html). You can monitor the -frame rate by using the In-App Developer Menu "FPS Monitor" tool. diff --git a/docs/Colors.md b/docs/Colors.md deleted file mode 100644 index 7a8177819..000000000 --- a/docs/Colors.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: colors -title: Color Reference -layout: docs -category: Guides -permalink: docs/colors.html -next: integration-with-existing-apps -previous: direct-manipulation ---- - -Components in React Native are [styled using JavaScript](docs/style.html). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). - -### Red-green-blue - -React Native supports `rgb()` and `rgba()` in both hexadecimal and functional notation: - -- `'#f0f'` (#rgb) -- `'#ff00ff'` (#rrggbb) - -- `'rgb(255, 0, 255)'` -- `'rgba(255, 255, 255, 1.0)'` - -- `'#f0ff'` (#rgba) -- `'#ff00ff00'` (#rrggbbaa) - -### Hue-saturation-lightness - -`hsl()` and `hsla()` is supported in functional notation: - -- `'hsl(360, 100%, 100%)'` -- `'hsla(360, 100%, 100%, 1.0)'` - -### `transparent` - -This is a shortcut for `rgba(0,0,0,0)`: - -- `'transparent'` - -### Named colors - -You can also use color names as values. React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color): - -- aliceblue (#f0f8ff) -- antiquewhite (#faebd7) -- aqua (#00ffff) -- aquamarine (#7fffd4) -- azure (#f0ffff) -- beige (#f5f5dc) -- bisque (#ffe4c4) -- black (#000000) -- blanchedalmond (#ffebcd) -- blue (#0000ff) -- blueviolet (#8a2be2) -- brown (#a52a2a) -- burlywood (#deb887) -- cadetblue (#5f9ea0) -- chartreuse (#7fff00) -- chocolate (#d2691e) -- coral (#ff7f50) -- cornflowerblue (#6495ed) -- cornsilk (#fff8dc) -- crimson (#dc143c) -- cyan (#00ffff) -- darkblue (#00008b) -- darkcyan (#008b8b) -- darkgoldenrod (#b8860b) -- darkgray (#a9a9a9) -- darkgreen (#006400) -- darkgrey (#a9a9a9) -- darkkhaki (#bdb76b) -- darkmagenta (#8b008b) -- darkolivegreen (#556b2f) -- darkorange (#ff8c00) -- darkorchid (#9932cc) -- darkred (#8b0000) -- darksalmon (#e9967a) -- darkseagreen (#8fbc8f) -- darkslateblue (#483d8b) -- darkslategrey (#2f4f4f) -- darkturquoise (#00ced1) -- darkviolet (#9400d3) -- deeppink (#ff1493) -- deepskyblue (#00bfff) -- dimgray (#696969) -- dimgrey (#696969) -- dodgerblue (#1e90ff) -- firebrick (#b22222) -- floralwhite (#fffaf0) -- forestgreen (#228b22) -- fuchsia (#ff00ff) -- gainsboro (#dcdcdc) -- ghostwhite (#f8f8ff) -- gold (#ffd700) -- goldenrod (#daa520) -- gray (#808080) -- green (#008000) -- greenyellow (#adff2f) -- grey (#808080) -- honeydew (#f0fff0) -- hotpink (#ff69b4) -- indianred (#cd5c5c) -- indigo (#4b0082) -- ivory (#fffff0) -- khaki (#f0e68c) -- lavender (#e6e6fa) -- lavenderblush (#fff0f5) -- lawngreen (#7cfc00) -- lemonchiffon (#fffacd) -- lightblue (#add8e6) -- lightcoral (#f08080) -- lightcyan (#e0ffff) -- lightgoldenrodyellow (#fafad2) -- lightgray (#d3d3d3) -- lightgreen (#90ee90) -- lightgrey (#d3d3d3) -- lightpink (#ffb6c1) -- lightsalmon (#ffa07a) -- lightseagreen (#20b2aa) -- lightskyblue (#87cefa) -- lightslategrey (#778899) -- lightsteelblue (#b0c4de) -- lightyellow (#ffffe0) -- lime (#00ff00) -- limegreen (#32cd32) -- linen (#faf0e6) -- magenta (#ff00ff) -- maroon (#800000) -- mediumaquamarine (#66cdaa) -- mediumblue (#0000cd) -- mediumorchid (#ba55d3) -- mediumpurple (#9370db) -- mediumseagreen (#3cb371) -- mediumslateblue (#7b68ee) -- mediumspringgreen (#00fa9a) -- mediumturquoise (#48d1cc) -- mediumvioletred (#c71585) -- midnightblue (#191970) -- mintcream (#f5fffa) -- mistyrose (#ffe4e1) -- moccasin (#ffe4b5) -- navajowhite (#ffdead) -- navy (#000080) -- oldlace (#fdf5e6) -- olive (#808000) -- olivedrab (#6b8e23) -- orange (#ffa500) -- orangered (#ff4500) -- orchid (#da70d6) -- palegoldenrod (#eee8aa) -- palegreen (#98fb98) -- paleturquoise (#afeeee) -- palevioletred (#db7093) -- papayawhip (#ffefd5) -- peachpuff (#ffdab9) -- peru (#cd853f) -- pink (#ffc0cb) -- plum (#dda0dd) -- powderblue (#b0e0e6) -- purple (#800080) -- rebeccapurple (#663399) -- red (#ff0000) -- rosybrown (#bc8f8f) -- royalblue (#4169e1) -- saddlebrown (#8b4513) -- salmon (#fa8072) -- sandybrown (#f4a460) -- seagreen (#2e8b57) -- seashell (#fff5ee) -- sienna (#a0522d) -- silver (#c0c0c0) -- skyblue (#87ceeb) -- slateblue (#6a5acd) -- slategray (#708090) -- snow (#fffafa) -- springgreen (#00ff7f) -- steelblue (#4682b4) -- tan (#d2b48c) -- teal (#008080) -- thistle (#d8bfd8) -- tomato (#ff6347) -- turquoise (#40e0d0) -- violet (#ee82ee) -- wheat (#f5deb3) -- white (#ffffff) -- whitesmoke (#f5f5f5) -- yellow (#ffff00) -- yellowgreen (#9acd32) diff --git a/docs/Contributing.md b/docs/Contributing.md deleted file mode 100644 index 0b369895c..000000000 --- a/docs/Contributing.md +++ /dev/null @@ -1,221 +0,0 @@ ---- -id: contributing -title: How to Contribute -layout: docs -category: Contributing -permalink: docs/contributing.html -next: maintainers -previous: native-modules-android ---- - -React Native is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody using Facebook's mobile apps. If you're interested in contributing to React Native, hopefully this document makes the process for contributing clear. - -## [Code of Conduct](https://code.facebook.com/codeofconduct) - -Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated. - -## Get involved - -There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started: - -* Simply start using React Native. Go through the [Getting Started](http://facebook.github.io/react-native/docs/getting-started.html) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues). -* Look through the [open issues](https://github.com/facebook/react-native/issues). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](http://facebook.github.io/react-native/docs/contributing.html#triaging-issues-and-pull-requests). -* If you find an issue you would like to fix, [open a pull request](http://facebook.github.io/react-native/docs/contributing.html#your-first-pull-request). Issues tagged as [_Good first issue_](https://github.com/facebook/react-native/labels/Good%20first%20issue) are a good place to get started. -* Read through the [React Native docs](http://facebook.github.io/react-native/docs). If you find anything that is confusing or can be improved, you can make edits by clicking "Improve this page" at the bottom of most docs. -* Browse [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native) and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation. -* Take a look at the [features requested](https://react-native.canny.io/feature-requests) by others in the community and consider opening a pull request if you see something you want to work on. - -Contributions are very welcome. If you think you need help planning your contribution, please hop into [#react-native](https://discord.gg/0ZcbPKXt5bZjGY5n) and let people know you're looking for a mentor. - -Core contributors to React Native meet monthly and post their meeting notes on the [React Native blog](https://facebook.github.io/react-native/blog). You can also find ad hoc discussions in the [React Native Core Contributors](https://www.facebook.com/groups/reactnativeoss/) Facebook group. - -### Triaging issues and pull requests - -One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in. - -* Ask for more information if the issue does not provide all the details required by the template. -* Suggest [labels](https://github.com/facebook/react-native/labels) that can help categorize issues. -* Flag issues that are stale or that should be closed. -* Ask for test plans and review code. - -You can learn more about handling issues in the [maintainer's guide](docs/maintainers.html#handling-issues). - -## Our development process - -Some of the core team will be working directly on [GitHub](https://github.com/facebook/react-native). These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in. - -When a change made on GitHub is approved, it will first be imported into Facebook's internal source control. The change will eventually sync back to GitHub as a single commit once it has passed all internal tests. - -### Branch organization - -We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to [communicate these changes](https://github.com/facebook/react-native/releases) and version appropriately so you can lock into a specific version if need be. - -To see what changes are coming and provide better feedback to React Native contributors, use the [latest release candidate](http://facebook.github.io/react-native/versions.html) when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks. - -## Bugs - -We use [GitHub Issues](https://github.com/facebook/react-native/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a [bug report](http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues). - -If you have questions about using React Native, the [Community page](http://facebook.github.io/react-native/support.html) list various resources that should help you get started. - -We also have a [place where you can request features or enhancements](https://react-native.canny.io/feature-requests). If you see anything you'd like to be implemented, vote it up and explain your use case. - -## Reporting new issues - -When [opening a new issue](https://github.com/facebook/react-native/issues/new), always make sure to fill out the [issue template](https://raw.githubusercontent.com/facebook/react-native/master/.github/ISSUE_TEMPLATE.md). **This step is very important!** Not doing so may result in your issue getting closed. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. - -* **One issue, one bug:** Please report a single bug per issue. -* **Provide a Snack:** The best way to get attention on your issue is to provide a reduced test case. You can use [Snack](https://snack.expo.io/) to demonstrate the issue. -* **Provide reproduction steps:** List all the steps necessary to reproduce the issue. Provide a Snack or upload a sample project to GitHub. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. -* **Try out the latest version:** Verify that the issue can be reproduced locally by updating your project to use [React Native from `master`](http://facebook.github.io/react-native/versions.html). The bug may have already been fixed! - -We're not able to provide support through GitHub Issues. If you're looking for help with your code, consider asking on [Stack Overflow](http://stackoverflow.com/questions/tagged/react-native) or reaching out to the community through [other channels](https://facebook.github.io/react-native/support.html). - -### Security bugs - -Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page. - -## Pull requests - -### Your first pull request - -So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at. - -Working on your first Pull Request? You can learn how from this free video series: - -[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) - -We have a list of [beginner friendly issues](https://github.com/facebook/react-native/labels/Good%20First%20Task) to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started. - -### Proposing a change - -If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, we have a [place to track feature requests](https://react-native.canny.io/feature-requests). - -If you intend to change the public API, or make any non-trivial changes to the implementation, we recommend [filing an issue](https://github.com/facebook/react-native/issues/new?title=%5BProposal%5D) that includes `[Proposal]` in the title. This lets us reach an agreement on your proposal before you put significant effort into it. These types of issues should be rare. If you have been contributing to the project long enough, you will probably already have access to the [React Native Core Contributors](https://www.facebook.com/groups/reactnativeoss/) Facebook Group, where this sort of discussion is usually held. - -If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend to file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue. - -### Sending a pull request - -Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. - -Please make sure the following is done when submitting a pull request: - -1. Fork [the repository](https://github.com/facebook/react-native) and create your branch from `master`. -2. Add the copyright notice to the top of any new files you've added. -3. Describe your [**test plan**](/react-native/docs/contributing.html#test-plan) in your pull request description. Make sure to [test your changes](/react-native/docs/testing.html)! -4. Make sure your code lints (`npm run lint`). -5. If you haven't already, [sign the CLA](https://code.facebook.com/cla). - -All pull requests should be opened against the `master` branch. After opening your pull request, ensure [**all tests pass**](/react-native/docs/contributing.html#contrinuous-integration-tests) on Circle CI. If a test fails and you believe it is unrelated to your change, leave a comment on the pull request explaining why. - -> **Note:** It is not necessary to keep clicking `Merge master to your branch` on the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR. - -#### Test plan - -A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. - -* If you've added code that should be tested, add tests! -* If you've changed APIs, update the documentation. -* If you've updated the docs, verify the website locally and submit screenshots if applicable (see [website/README.md](https://github.com/facebook/react-native/blob/master/website/README.md)) - -See [What is a Test Plan?](https://medium.com/@martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9) to learn more. - -#### Continuous integration tests - -Make sure all **tests pass** on [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](/react-native/docs/testing.html). - -[circle]: http://circleci.com/gh/facebook/react-native - -#### Breaking changes - -When adding a new breaking change, follow this template in your pull request: - -``` -### New breaking change here - -* **Who does this affect**: -* **How to migrate**: -* **Why make this breaking change**: -* **Severity (number of people affected x effort)**: -``` - -If your pull request is merged, a core contributor will update the [list of breaking changes](https://github.com/facebook/react-native/wiki/Breaking-Changes) which is then used to populate the release notes. - -#### Copyright Notice for files - -Copy and paste this to the top of your new file(s): - -```JS -/** - * Copyright (c) 2015-present, Facebook, Inc. - * 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. - */ -``` - -If you've added a new module, add a `@providesModule ` at the end of the comment. This will allow the haste package manager to find it. - -#### Contributor License Agreement (CLA) - -In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, the Facebook GitHub Bot will reply with a link to the CLA form. You may also [complete your CLA here](https://code.facebook.com/cla). - -### What happens next? - -The core team will be monitoring for pull requests. Read [what to expect from maintainers](/react-native/docs/maintainers.html#handling-pull-requests) to understand what may happen after you open a pull request. - -## Style Guide - -Our linter will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. - -However, there are still some styles that the linter cannot pick up. - -### Code Conventions - -#### General - -* **Most important: Look around.** Match the style you see used in the rest of the project. This includes formatting, naming things in code, naming things in documentation. -* Add trailing commas, -* 2 spaces for indentation (no tabs) -* "Attractive" - -#### JavaScript - -* Use semicolons; -* ES6 standards -* Prefer `'` over `"` -* Do not use the optional parameters of `setTimeout` and `setInterval` -* 80 character line length - -#### JSX - -* Prefer `"` over `'` for string literal props -* When wrapping opening tags over multiple lines, place one prop per line -* `{}` of props should hug their values (no spaces) -* Place the closing `>` of opening tags on the same line as the last prop -* Place the closing `/>` of self-closing tags on their own line and left-align them with the opening `<` - -#### Objective-C - -* Space after `@property` declarations -* Brackets on *every* `if`, on the *same* line -* `- method`, `@interface`, and `@implementation` brackets on the following line -* *Try* to keep it around 80 characters line length (sometimes it's just not possible...) -* `*` operator goes with the variable name (e.g. `NSObject *variableName;`) - -#### Java - -* If a method call spans multiple lines closing bracket is on the same line as the last argument. -* If a method header doesn't fit on one line each argument goes on a separate line. -* 100 character line length - -### Documentation - -* Do not wrap lines at 80 characters - configure your editor to soft-wrap when editing documentation. - -## License - -By contributing to React Native, you agree that your contributions will be licensed under its BSD license. diff --git a/docs/Debugging.md b/docs/Debugging.md deleted file mode 100644 index 3a5a5fe82..000000000 --- a/docs/Debugging.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: debugging -title: Debugging -layout: docs -category: Guides -permalink: docs/debugging.html -next: performance -previous: timers ---- - -## Enabling Keyboard Shortcuts - -React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked. - -## Accessing the In-App Developer Menu - -You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code). - -![](img/DeveloperMenu.png) - -> The Developer Menu is disabled in release (production) builds. - -## Reloading JavaScript - -Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press `⌘R` in the iOS Simulator, or tap `R` twice on Android emulators. - -### Automatic reloading - -You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu. - -You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling [Hot Reloading](https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html) from the Developer Menu. This will allow you to persist the app's state through reloads. - -> There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app. - -You will need to rebuild your app for changes to take effect in certain situations: - -* You have added new resources to your native app's bundle, such as an image in `Images.xcassets` on iOS or the `res/drawable` folder on Android. -* You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android). - -## In-app Errors and Warnings - -Errors and warnings are displayed inside your app in development builds. - -### Errors - -In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use `console.error()` to manually trigger one. - -### Warnings - -Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them. - -As with a RedBox, you can use `console.warn()` to trigger a YellowBox. - -YellowBoxes can be disabled during development by using `console.disableYellowBox = true;`. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: `console.ignoredYellowBox = ['Warning: ...'];`. - -In CI/Xcode, YellowBoxes can also be disabled by setting the `IS_TESTING` environment variable. - -> RedBoxes and YellowBoxes are automatically disabled in release (production) builds. - -## Chrome Developer Tools - -To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui). - -Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (`⌘⌥I` on macOS, `Ctrl` `Shift` `I` on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience. - -> Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](docs/debugging.html#react-developer-tools) to learn how. - -### Debugging using a custom JavaScript debugger - -To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging. - -The debugger will receive a list of all project roots, separated by a space. For example, if you set `REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"`, then the command `node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app` will be used to start your debugger. - -> Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output. - -## React Developer Tools - -You can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally: - -``` -npm install -g react-devtools -``` - -Now run `react-devtools` from the terminal to launch the standalone DevTools app: - -``` -react-devtools -``` - -![React DevTools](img/ReactDevTools.png) - -It should connect to your simulator within a few seconds. - -> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools. - -### Integration with React Native Inspector - -Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it: - -![React Native Inspector](img/Inspector.gif) - -However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools: - -![React DevTools Inspector Integration](img/ReactDevToolsInspector.gif) - -You can choose "Hide Inspector" in the same menu to exit this mode. - -### Inspecting Component Instances - -When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console. - -First, follow the instructions for debugging in Chrome to open the Chrome console. - -Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.** - -Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties. - -![React DevTools Chrome Console Integration](img/ReactDevToolsDollarR.gif) - -## Performance Monitor - -You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu. - -
- -# Debugging in Ejected Apps - - - -## Accessing console logs - -You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running: - -``` -$ react-native log-ios -$ react-native log-android -``` - -You may also access these through `Debug → Open System Log...` in the iOS Simulator or by running `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal while an Android app is running on a device or emulator. - -> If you're using Create React Native App, console logs already appear in the same terminal output as the packager. - -## Debugging on a device with Chrome Developer Tools - -> If you're using Create React Native App, this is configured for you already. - -On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu. - -On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer: - -`adb reverse tcp:8081 tcp:8081` - -Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer. - -> If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension. - -### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android - -Follow this guide to enable Stetho for Debug mode: - -1. In `android/app/build.gradle`, add these lines in the `dependencies` section: - - ```gradle - debugCompile 'com.facebook.stetho:stetho:1.5.0' - debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0' - ``` - -> The above will configure Stetho v1.5.0. You can check at http://facebook.github.io/stetho/ if a newer version is available. - -2. Create the following Java classes to wrap the Stetho call, one for release and one for debug: - - ```java - // android/app/src/release/java/com/{yourAppName}/StethoWrapper.java - - public class StethoWrapper { - - public static void initialize(Context context) { - // NO_OP - } - - public static void addInterceptor() { - // NO_OP - } - } - ``` - - ```java - // android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java - - public class StethoWrapper { - public static void initialize(Context context) { - Stetho.initializeWithDefaults(context); - } - - public static void addInterceptor() { - OkHttpClient client = OkHttpClientProvider.getOkHttpClient() - .newBuilder() - .addNetworkInterceptor(new StethoInterceptor()) - .build(); - - OkHttpClientProvider.replaceOkHttpClient(client); - } - } - ``` - -3. Open `android/app/src/main/java/com/{yourAppName}/MainApplication.java` and replace the original `onCreate` function: - -```java - public void onCreate() { - super.onCreate(); - - if (BuildConfig.DEBUG) { - StethoWrapper.initialize(this); - StethoWrapper.addInterceptor(); - } - - SoLoader.init(this, /* native exopackage */ false); - } -``` - -4. Open the project in Android Studio and resolve any dependency issues. The IDE should guide you through this steps after hovering your pointer over the red lines. - -5. Run `react-native run-android`. - -6. In a new Chrome tab, open: `chrome://inspect`, then click on the 'Inspect device' item next to "Powered by Stetho". - -## Debugging native code - -When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app. diff --git a/docs/Images.md b/docs/Images.md deleted file mode 100644 index 42576a50d..000000000 --- a/docs/Images.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -id: images -title: Images -layout: docs -category: Guides -permalink: docs/images.html -next: animations -previous: navigation ---- - -## Static Image Resources - -React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this: - -```javascript - -``` - -The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for `my-icon.png` in the same folder as the component that requires it. Also, if you have `my-icon.ios.png` and `my-icon.android.png`, the packager will pick the correct file for the platform. - -You can also use the `@2x` and `@3x` suffixes to provide images for different screen densities. If you have the following file structure: - -``` -. -├── button.js -└── img - ├── check@2x.png - └── check@3x.png -``` - -...and `button.js` code contains: - -```javascript - -``` - -...the packager will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while`check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected. - -On Windows, you might need to restart the packager if you add new images to your project. - -Here are some benefits that you get: - -1. Same system on iOS and Android. -2. Images live in the same folder as your JavaScript code. Components are self-contained. -3. No global namespace, i.e. you don't have to worry about name collisions. -4. Only the images that are actually used will be packaged into your app. -5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do. -6. The packager knows the image dimensions, no need to duplicate it in the code. -7. Images can be distributed via [npm](https://www.npmjs.com/) packages. - -In order for this to work, the image name in `require` has to be known statically. - -```javascript -// GOOD - - -// BAD -var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; - - -// GOOD -var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); - -``` - -Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set `{ width: undefined, height: undefined }` on the style attribute. - -## Static Non-Image Resources - -The `require` syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including `.mp3`, `.wav`, `.mp4`, `.mov`, `.html` and `.pdf`. See [packager defaults](https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L13-L18) for the full list. - -You can add support for other types by creating a packager config file (see the [packager config file](https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L34-L39) for the full list of configuration options). - -A caveat is that videos must use absolute positioning instead of `flexGrow`, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android. - -## Images From Hybrid App's Resources - -If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app. - -For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension: - -```javascript - -``` - -For images in the Android assets folder, use the `asset:/` scheme: - -```javascript - -``` - -These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually. - -## Network Images - -Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, *you will need to manually specify the dimensions of your image*. It's highly recommended that you use https as well in order to satisfy [App Transport Security](docs/running-on-device.html#app-transport-security) requirements on iOS. - -```javascript -// GOOD - - -// BAD - -``` - -### Network Requests for Images - - If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object: - - ```javascript - - ``` - -## Uri Data Images - -Sometimes, you might be getting encoded image data from a REST API call. You can use the `'data:'` uri scheme to use these images. Same as for network resources, *you will need to manually specify the dimensions of your image*. - -> This is recommended for very small and dynamic images only, like icons in a list from a DB. - -```javascript -// include at least width and height! - -``` - -### Cache Control (iOS Only) - -In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The `cache` source property gives you control over how the network layer interacts with the cache. - -* `default`: Use the native platforms default strategy. -* `reload`: The data for the URL will be loaded from the originating source. -No existing cache data should be used to satisfy a URL load request. -* `force-cache`: The existing cached data will be used to satisfy the request, -regardless of its age or expiration date. If there is no existing data in the cache -corresponding the request, the data is loaded from the originating source. -* `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of -its age or expiration date. If there is no existing data in the cache corresponding -to a URL load request, no attempt is made to load the data from the originating source, -and the load is considered to have failed. - -```javascript - -``` - -## Local Filesystem Images - -See [CameraRoll](docs/cameraroll.html) for an example of -using local resources that are outside of `Images.xcassets`. - -### Best Camera Roll Image - -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. - -## Why Not Automatically Size Everything? - -*In the browser* 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 aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the `require('./my-icon.png')` syntax *can be automatically sized* because their dimensions are available immediately at the time of mounting. - -For example, the result of `require('./my-icon.png')` might be: - -```javascript -{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573} -``` - -## Source as an object - -In React Native, one interesting decision is that the `src` attribute is named `source` and doesn't take a string but an object with a `uri` attribute. - -```javascript - -``` - -On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using `require('./my-icon.png')`, then we add information about its actual location and size (don't rely on this fact, it might 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. - -## Background Image via Nesting - -A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. - -You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. - -```javascript -return ( - - Inside - -); -``` - -## iOS Border Radius Styles - -Please note that the following corner specific, border radius style properties are currently ignored by iOS's image component: - -* `borderTopLeftRadius` -* `borderTopRightRadius` -* `borderBottomLeftRadius` -* `borderBottomRightRadius` - -## Off-thread Decoding - -Image decoding can take more than a frame-worth of time. This is one of the major sources 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. diff --git a/docs/Maintainers.md b/docs/Maintainers.md deleted file mode 100644 index 55847e896..000000000 --- a/docs/Maintainers.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: maintainers -title: What to Expect from Maintainers -layout: docs -category: Contributing -permalink: docs/maintainers.html -next: testing -previous: contributing ---- - -So you have read through the [contributor's guide](docs/contributing.html) and you're getting ready to send your first pull request. Perhaps you've found an issue in React Native and want to work with the maintainers to land a fix. Here's what you can expect to happen when you open an issue or send a pull request. - -> The following is adapted from the excellent [Open Source Guide](https://opensource.guide/) from GitHub and reflects how the maintainers of React Native are encouraged to handle your contributions. - -## Handling Issues - -We see dozens of new issues being created every day. In order to help maintainers focus on what is actionable, maintainers ask contributors to do a bit of work prior to opening a new issue: - -* New issues should follow the [Issue Template](https://github.com/facebook/react-native/blob/master/.github/ISSUE_TEMPLATE.md). -* Issues should provide clear, easy to follow steps alongside sample code to reproduce the issue. Ideally, provide a [Snack](http://snack.expo.io/). - -Issues that do not meet the above criteria can be closed immediately, with a link to the [contributor's guide](docs/contributing.html). - -### New issue runbook - -You have gathered all the information required to open a new issue, and you are confident it meets the [contributor guidelines](docs/contributing.html). Once you post an issue, this is what our maintainers will consider when deciding how to move forward: - -* **Is this issue a feature request?** - - Some features may not be a good fit for the core React Native library. This is usually the case for **new modules* that Facebook does not use in production. In this case, a maintainer will explain that this should be released to npm as a separate module, allowing users to easily pull in the module in their projects. - - Even if the feature does belong in the core library, adding it means maintaining it. A maintainer will encourage you to submit a pull request or otherwise post your request to [Canny](https://react-native.canny.io/feature-requests) by issuing the `@facebook-github-bot feature` command, closing the issue. - - An exception can be made for proposals and long-running discussions, though these should be rare. If you have been contributing to the project long enough, you will probably already have access to the [React Native Core Contributors](https://www.facebook.com/groups/reactnativeoss/) Facebook Group, where this sort of discussion is usually held. - -* **Is this issue a request for help?** - - Questions should absolutely be asked on Stack Overflow rather than GitHub. Maintainers may encourage you to ask on Stack Overflow by issuing the `@facebook-github-bot stack-overflow` command, closing the issue. - Feel free to also answer some [questions on Stack Overflow](stackoverflow.com/questions/tagged/react-native), you'll get rep! - -* **Was the [Issue Template](https://github.com/facebook/react-native/blob/master/.github/ISSUE_TEMPLATE.md) used to fill out the issue? Did the author answer Yes to both questions at the top?** - - If not, the maintainer will ask you to provide more information by issuing the `@facebook-github-bot no-template` command, closing the issue. - -* **Is the issue a duplicate of an existing, open issue?** - - A maintainer will use the `@facebook-github-bot duplicate #123` command to mark the issue as a duplicate of issue #123, closing it. - -* **Does the issue include a Snack or list of steps to reproduce the issue?** - - Issues should be relatively easy to reproduce. Sometimes the issue affects a particular app but a minimal repro is not provided, perhaps a crash is seen in the logs and the author is not sure where its coming from, maybe the issue is sporadic. - - As it happens, if a maintainer cannot easily reproduce the issue, one cannot reasonably expect them to be able to work on a fix. These issues can be closed by issuing the `@facebook-github-bot needs-repro` command. - - Exceptions can be made if multiple people appear to be affected by the issue, especially right after a new React Native release is cut. - -* **Is the issue for an old release of React Native?** - - If so, expect to be asked if the issue can be reproduced in the latest release candidate. - -* **Can the issue be reliably reproduced?** - - If not, a maintainer may issue the `@facebook-github-bot cannot-repro` command, closing the issue. - -* **Does the issue need more information?** - - Some issues need additional information in order to reproduce them. Maintainers should explain what additional information is needed, using the `@facebook-github-bot label Needs more information` command to label the issue as such. - - Issues with the 'Needs more information' label that have been open for more than a week without a response from the author can be closed using `@facebook-github-bot no-reply`. - -* **Has the issue been resolved already in the comments?** - - Sometimes another contributor has already provided a solution in the comments. Maintainers may issue the `@facebook-github-bot answered` command to close the issue. - -> **Reopening a closed issue:** Sometimes it's necessary to reopen an issue. For example, if an issue was closed waiting for the author, then the author replied and it turns out this is indeed a bug, you can comment `@facebook-github-bot reopen` to reopen it. - -Valid bug reports with good repro steps are some of the best issues! Maintainers should thank the author for finding the issue, then explain that React Native is a community project and **ask them if they would be up for sending a fix**. - -### Triaging issues - -If a issue is still open after going through all of the checks above, it will move on to the triage stage. A maintainer will then do the following: - -1. Add relevant labels. For example, if this is an issue that affects Android, use the `@facebook-github-bot label Android` command. -2. Leave a comment saying the issue has been triaged. -3. Tag the relevant people. - -You can generally figure out who may be relevant for a given issue by looking at the [CODEOWNERS](https://github.com/facebook/react-native/blob/master/.github/CODEOWNERS) file. - -#### What are all the available commands for the bot? - -You can find the full command reference in the [Facebook GitHub Bot](/docs/maintainers.html#facebook-github-bot) section below. - -### Stale issues - -Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that have have had no activity in the last two months may be closed periodically. If your issue gets closed in this manner, it's nothing personal. If you strongly believe that the issue should remain open, just let us know why. - -Simply commenting that the issue still exists is not very compelling (it's rare for critical, release blocking issues to have no activity for two months!). In order to make a good case for reopening the issue, you may need to do a bit of work: - -* Can the issue be reproduced on the latest release candidate? Post a comment with the version you tested. -* If so, is there any information missing from the bug report? Post a comment with all the information required by the [issue template](https://github.com/facebook/react-native/blob/master/.github/ISSUE_TEMPLATE.md). -* Is there a pull request that addressed this issue? Post a comment with the PR number so we can follow up. - -A couple of contributors making a good case may be all that is needed to reopen the issue. - -## Handling pull requests - -The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process. - -### How we prioritize pull requests - -We use the [Contributors Chrome extension](https://github.com/hzoo/contributors-on-github) to help us understand who is sending a pull request. Pull requests opened by contributors that have a history of having their PRs merged are more likely to be looked at first. Aside from that, we try to go through pull requests on a chronological order. - -### How we review pull requests - -Reviewing a PR can sometimes require more time from a maintainer than it took you to write the code. Maintainers need to consider all the ramifications of importing your patch into the codebase. Does it potentially introduce breaking changes? What are the performance considerations of adding a new dependency? Will the docs need to be updated as well? Does this belong in core, or would it be a better fit as a third party package? - -Once you open a pull request, this is how you can expect maintainers to review it: - -* **Is the pull request missing information?** - - A test plan is required! Add the labels 'Needs revision' and 'Needs response from author'. You can then follow up with a response like: - - > Hey @author, thanks for sending the pull request. - > Can you please add all the info specified in the [template](https://github.com/facebook/react-native/blob/master/.github/PULL_REQUEST_TEMPLATE.md)? This is necessary for people to be able to understand and review your pull request. - -* **Does the code style match the [Style guide](docs/contributing.html#style-guide)?** - - If not, link to the style guide and add the label 'Needs revision'. - -* **Does the pull request add a completely new feature we don't want to add to the core and maintain?** - - Ask the author to release it a separate npm module and close the pull request. - -* **Does the pull request do several unrelated things at the same time?** - - Ask the author to split it. - -* **Is the pull request old and need rebasing?** - - Ask the author "Can you rebase please?" and add the label 'Needs response from author'. - -* **Is a pull request waiting for a response from author?** - - Pull requests like these usually have the label 'Needs response from author'. If there has been no reply in the last 30 days, close it with a response like the following: - - > Thanks for making the pull request, but we are closing it due to inactivity. If you want to get your proposed changes merged, please rebase your branch with master and send a new pull request. - -* **Is the pull request old and waiting for review?** - - Review it or cc someone who might be able to review. Finding the right person to review a pull request can sometimes be tricky. A pull request may simultaneously touch iOS, Java, and JavaScript code. If a pull request has been waiting for review for a while, you can help out by looking at the blame history for the files you're touching. Is there anyone that appears to be knowledgeable in the part of the codebase the PR is touching? - -### Closing pull requests - -Sometimes a maintainer may decide that a pull request will not be accepted. Maybe the pull request is out of scope for the project, or the idea is good but the implementation is poor. Whatever the reason, when closing a pull request maintainers should keep the conversation friendly: - -* **Thank** them for their contribution. -* **Explain why** it doesn't fit into the scope of the project. -* **Link to relevant documentation**, if you have it. -* **Close** the request. - -## Defusing situations - -Sometimes when a maintainer says no to a pull request or close an issue, a contributor may get upset and criticize your decision. Maintainers will take steps to defuse the situation. - -If a contributor becomes hostile or disrespectful, they will be referred to the [Code of Conduct](https://code.facebook.com/codeofconduct). Negative users will be blocked, and inappropriate comments will be deleted. - -## Facebook GitHub Bot - -The Facebook GitHub Bot allows members of the community to perform administrative actions such as labeling and closing issues. -To have access to the bot, please add your GitHub username to the first line of [IssueCommands.txt](https://github.com/facebook/react-native/blob/master/bots/IssueCommands.txt), in alphabetical order, by submitting a Pull Request. - -### Using the Facebook GitHub Bot - -The bot can be triggered by adding any of the following commands as a standalone comment on an issue: - -
-
-

- @facebook-github-bot no-template -

-

- Use this when more information is needed, especially if the issue does not adhere to the issue template. The bot will close the issue after adding the "Needs more information" label. -

-
-
-

- @facebook-github-bot stack-overflow -

-

- Mark issues that do not belong in the bug tracker, and redirect to Stack Overflow. The bot will close the issue after adding the "For Stack Overflow" label. -

-
-
-

- @facebook-github-bot needs-repro -

-

- Prompts the author to provide a reproducible example or Snack. The bot will apply the "Needs more information" label. -

-
-
-

- @facebook-github-bot cannot-repro -

-

- Use this when the issue cannot be reproduced, either because it affects a particular app but no minimal repro was provided, or the issue describes something sporadic that is unlikely to be reproduced by a community member. The bot will close the issue. -

-
-
-

- @facebook-github-bot duplicate (#[0-9]+) -

-

- Marks an issue as a duplicate. Requires a issue number to be provided. The bot will close the issue. -

-

- Example: @facebook-github-bot duplicate #42 -

-
-
-

- @facebook-github-bot label (.*) -

-

- Use this command to add a label, such as "iOS" or "Android", to an issue. -

- Example: @facebook-github-bot label Android -

-
-
-

- @facebook-github-bot feature -

-

- Use this when an issue describes a feature request, as opposed to a reproducible bug. The bot will point the author to the feature request tracker, add the "Feature Request" label, then close the issue. -

-
-
-

- @facebook-github-bot expected -

-

- Use this when an issue describes a type of expected behavior. The bot will close the issue. -

-
-
-

- @facebook-github-bot answered -

-

- Use this when an issue appears to be a question that has already been answered by someone on the thread. The bot will close the issue. -

-
-
-

- @facebook-github-bot close -

-

- Closes an issue without providing a particular explanation. -

-
-
-

- @facebook-github-bot reopen -

-

- Re-opens a previously closed issue. -

-
-
-

- @facebook-github-bot bugfix -

-

- Mark issues that describe a reproducible bug and encourage the author to send a pull request. The bot will add the "Help Wanted" label. -

-
-
-

- @facebook-github-bot no-reply -

-

- Use this when an issue requires more information from the author but they have not added a comment in a while. The bot will close the issue. -

-
-
-

- @facebook-github-bot icebox -

-

- Use this when an issue has been open for over 30 days with no activity and no community member has volunteered to work on a fix. The bot will close the issue after adding the "Icebox" label. -

-
-
- -Additionally, the following commands can be used on a pull request: - -
-
-

- @facebook-github-bot cla -

-

- Remind the author that the CLA needs to be signed. -

-
-
-

- @facebook-github-bot shipit -

-

- Flag the PR for merging. If used by a core contributor, the bot will attempt to import the pull request. In general, core contributors are those who have consistently submitted high quality contributions to the project. Access control for this command is configured internally in Facebook, outside of the IssueCommands.txt file mentioned above. -

-
-
-

- @facebook-github-bot large-pr -

-

- Flag PRs that change too many files at once. These PRs are extremely unlikely to be reviewed. The bot will leave a helpful message indicating next steps such as splitting the PR. The bot will close the PR after adding the "Large PR" label. -

-
-
diff --git a/docs/MoviesExample.json b/docs/MoviesExample.json deleted file mode 100644 index da7c33342..000000000 --- a/docs/MoviesExample.json +++ /dev/null @@ -1 +0,0 @@ -{"total":24,"movies":[{"id":"11494","title":"Chain Reaction","year":1996,"mpaa_rating":"PG-13","runtime":106,"release_dates":{"theater":"1996-08-02","dvd":"2001-05-22"},"ratings":{"critics_rating":"Rotten","critics_score":16,"audience_rating":"Spilled","audience_score":27},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg","profile":"http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg","detailed":"http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg","original":"http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg"},"abridged_cast":[{"name":"Keanu Reeves","id":"162654049","characters":["Eddie Kasalivich"]},{"name":"Morgan Freeman","id":"162652224","characters":["Paul Shannon"]},{"name":"Rachel Weisz","id":"162653682","characters":["Dr. Lily Sinclair"]},{"name":"Fred Ward","id":"162667867","characters":["Agt. Leon Ford"]},{"name":"Kevin Dunn","id":"162664658","characters":["Agt. Doyle"]}],"alternate_ids":{"imdb":"0115857"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/11494.json","alternate":"http://www.rottentomatoes.com/m/1072457-chain_reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/11494/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/11494/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/11494/similar.json"}},{"id":"770920361","title":"React! A Woman's Guide to Safety and Basic Self-Defense","year":1996,"mpaa_rating":"Unrated","runtime":"","release_dates":{"dvd":"1996-07-29"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/m7G-weBZPYfnoqSiF59LIPPYOuM=/44x81/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/47/10974721_ori.jpg","profile":"http://resizing.flixster.com/m7G-weBZPYfnoqSiF59LIPPYOuM=/44x81/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/47/10974721_ori.jpg","detailed":"http://resizing.flixster.com/m7G-weBZPYfnoqSiF59LIPPYOuM=/44x81/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/47/10974721_ori.jpg","original":"http://resizing.flixster.com/m7G-weBZPYfnoqSiF59LIPPYOuM=/44x81/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/47/10974721_ori.jpg"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770920361.json","alternate":"http://www.rottentomatoes.com/m/react_a_womans_guide_to_safety_and_basic_selfdefense/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770920361/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770920361/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770920361/similar.json"}},{"id":"770819043","title":"Reaction","year":"","mpaa_rating":"Unrated","runtime":13,"release_dates":{},"ratings":{"critics_score":-1,"audience_score":100},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770819043.json","alternate":"http://www.rottentomatoes.com/m/reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770819043/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770819043/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770819043/similar.json"}},{"id":"771364188","title":"Reactor","year":2013,"mpaa_rating":"Unrated","runtime":34,"release_dates":{},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[],"alternate_ids":{"imdb":"2828874"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/771364188.json","alternate":"http://www.rottentomatoes.com/m/reactor_2013/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/771364188/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/771364188/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/771364188/similar.json"}},{"id":"391535485","title":"Chain Reaction (House of Blood)","year":2006,"mpaa_rating":"NC-17","runtime":105,"release_dates":{"dvd":"2006-10-03"},"ratings":{"critics_score":-1,"audience_rating":"Spilled","audience_score":22},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/Q8IBqX3b-nhEAEYokJ_aH6jO6lE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941373_ori.jpg","profile":"http://resizing.flixster.com/Q8IBqX3b-nhEAEYokJ_aH6jO6lE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941373_ori.jpg","detailed":"http://resizing.flixster.com/Q8IBqX3b-nhEAEYokJ_aH6jO6lE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941373_ori.jpg","original":"http://resizing.flixster.com/Q8IBqX3b-nhEAEYokJ_aH6jO6lE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941373_ori.jpg"},"abridged_cast":[{"name":"Christopher Kriesa","id":"391535486"},{"name":"Jurgen Prochnow","id":"162693957"},{"name":"Dan van Husen","id":"391535498"},{"name":"Mehmet Yilmaz","id":"391535499"},{"name":"Lisa Sachsenweger","id":"770770690"}],"alternate_ids":{"imdb":"0460742"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/391535485.json","alternate":"http://www.rottentomatoes.com/m/house_of_blood/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/391535485/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/391535485/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/391535485/similar.json"}},{"id":"17962","title":"The Chain Reaction","year":1995,"mpaa_rating":"Unrated","runtime":72,"release_dates":{"dvd":"1999-12-14"},"ratings":{"critics_score":-1,"audience_rating":"Spilled","audience_score":33},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/e3AKmyWuh1Wr4qMAM_vQ0vtN9AA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941368_ori.jpg","profile":"http://resizing.flixster.com/e3AKmyWuh1Wr4qMAM_vQ0vtN9AA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941368_ori.jpg","detailed":"http://resizing.flixster.com/e3AKmyWuh1Wr4qMAM_vQ0vtN9AA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941368_ori.jpg","original":"http://resizing.flixster.com/e3AKmyWuh1Wr4qMAM_vQ0vtN9AA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/10/94/13/10941368_ori.jpg"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/17962.json","alternate":"http://www.rottentomatoes.com/m/the-chain-reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/17962/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/17962/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/17962/similar.json"}},{"id":"23108","title":"The Fifth Reaction","year":2003,"mpaa_rating":"Unrated","runtime":106,"release_dates":{"theater":"2003-01-01","dvd":"2005-11-22"},"ratings":{"critics_score":-1,"audience_rating":"Upright","audience_score":92},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/1FxtmlxCqRb0EPdHFrFDGpZ45CE=/54x75/dkpu1ddg7pbsk.cloudfront.net/movie/31/16/311623_ori.jpg","profile":"http://resizing.flixster.com/1FxtmlxCqRb0EPdHFrFDGpZ45CE=/54x75/dkpu1ddg7pbsk.cloudfront.net/movie/31/16/311623_ori.jpg","detailed":"http://resizing.flixster.com/1FxtmlxCqRb0EPdHFrFDGpZ45CE=/54x75/dkpu1ddg7pbsk.cloudfront.net/movie/31/16/311623_ori.jpg","original":"http://resizing.flixster.com/1FxtmlxCqRb0EPdHFrFDGpZ45CE=/54x75/dkpu1ddg7pbsk.cloudfront.net/movie/31/16/311623_ori.jpg"},"abridged_cast":[{"name":"Niki Karimi","id":"405588976"},{"name":"Jamshid Hashempour","id":"771029092"},{"name":"Merila Zareie","id":"770833361"},{"name":"Shahab Hosseini","id":"770830873"},{"name":"Soghra Abisi","id":"771029093"}],"alternate_ids":{"imdb":"0386843"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/23108.json","alternate":"http://www.rottentomatoes.com/m/the-fifth-reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/23108/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/23108/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/23108/similar.json"}},{"id":"770924192","title":"Chain Reaction","year":1995,"mpaa_rating":"Unrated","runtime":72,"release_dates":{},"ratings":{"critics_score":-1,"audience_score":100},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/yFgYWViboAAdHG99EoF3VULEblc=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/67/10976773_ori.jpg","profile":"http://resizing.flixster.com/yFgYWViboAAdHG99EoF3VULEblc=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/67/10976773_ori.jpg","detailed":"http://resizing.flixster.com/yFgYWViboAAdHG99EoF3VULEblc=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/67/10976773_ori.jpg","original":"http://resizing.flixster.com/yFgYWViboAAdHG99EoF3VULEblc=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/10/97/67/10976773_ori.jpg"},"abridged_cast":[{"name":"Johan Paulik","id":"364601611"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770924192.json","alternate":"http://www.rottentomatoes.com/m/chain_reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770924192/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770924192/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770924192/similar.json"}},{"id":"770795709","title":"The Chain Reaction (Nuclear Run)","year":1980,"mpaa_rating":"R","runtime":87,"release_dates":{"theater":"1980-09-25"},"ratings":{"critics_score":-1,"audience_rating":"Spilled","audience_score":29},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[{"name":"Ross Thompson","id":"770816985","characters":["Heinrich"]},{"name":"Steve Bisley","id":"391393048","characters":["Larry"]},{"name":"David Bracks","id":"770932042","characters":["Spray painter"]},{"name":"Tim Burns","id":"391393049","characters":["Survey driver"]},{"name":"Ralph Cotterill","id":"770686983","characters":["Gray"]}],"alternate_ids":{"imdb":"0080513"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770795709.json","alternate":"http://www.rottentomatoes.com/m/1003826-chain_reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770795709/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770795709/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770795709/similar.json"}},{"id":"770815970","title":"A Chemical Reaction","year":2009,"mpaa_rating":"Unrated","runtime":79,"release_dates":{"theater":"2009-01-01"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/d7ZWFBXpcaqXbOJ-W57_b8B2TR0=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/10/92/85/10928519_ori.jpg","profile":"http://resizing.flixster.com/d7ZWFBXpcaqXbOJ-W57_b8B2TR0=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/10/92/85/10928519_ori.jpg","detailed":"http://resizing.flixster.com/d7ZWFBXpcaqXbOJ-W57_b8B2TR0=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/10/92/85/10928519_ori.jpg","original":"http://resizing.flixster.com/d7ZWFBXpcaqXbOJ-W57_b8B2TR0=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/10/92/85/10928519_ori.jpg"},"abridged_cast":[{"name":"Paul Tukey","id":"770801638"}],"alternate_ids":{"imdb":"1469852"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770815970.json","alternate":"http://www.rottentomatoes.com/m/a-chemical-reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770815970/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770815970/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770815970/similar.json"}},{"id":"770827338","title":"Juno Reactor: Live in Tokyo","year":2002,"mpaa_rating":"Unrated","runtime":"","release_dates":{"theater":"2002-12-31","dvd":"2005-06-21"},"ratings":{"critics_score":-1,"audience_rating":"Spilled","audience_score":40},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[{"name":"Juno Reactor","id":"770751447"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770827338.json","alternate":"http://www.rottentomatoes.com/m/juno-reactor-live-in-tokyo/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770827338/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770827338/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770827338/similar.json"}},{"id":"771004226","title":"Historic WWII Shell Shock Film: Military Psychology & War Combat Stress Reaction for Soldiers","year":2007,"mpaa_rating":"Unrated","runtime":33,"release_dates":{"dvd":"2007-02-01"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/771004226.json","alternate":"http://www.rottentomatoes.com/m/historic_wwii_shell_shock_film_military_psychology_and_war_combat_stress_reaction_for_soldiers/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/771004226/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/771004226/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/771004226/similar.json"}},{"id":"770978318","title":"Fifth Reaction","year":2003,"mpaa_rating":"Unrated","runtime":107,"release_dates":{"dvd":"2005-11-22"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/kTMk0zw4RXlpYGytEtnYgNQv-Uc=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/02/55/11025581_ori.jpg","profile":"http://resizing.flixster.com/kTMk0zw4RXlpYGytEtnYgNQv-Uc=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/02/55/11025581_ori.jpg","detailed":"http://resizing.flixster.com/kTMk0zw4RXlpYGytEtnYgNQv-Uc=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/02/55/11025581_ori.jpg","original":"http://resizing.flixster.com/kTMk0zw4RXlpYGytEtnYgNQv-Uc=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/02/55/11025581_ori.jpg"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770978318.json","alternate":"http://www.rottentomatoes.com/m/fifth_reaction/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770978318/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770978318/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770978318/similar.json"}},{"id":"771006274","title":"Chain Reaction","year":2008,"mpaa_rating":"Unrated","runtime":90,"release_dates":{"dvd":"2008-01-22"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/2sFwWwxvTzwM5bT9qGm78oZjpBA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/05/21/11052126_ori.jpg","profile":"http://resizing.flixster.com/2sFwWwxvTzwM5bT9qGm78oZjpBA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/05/21/11052126_ori.jpg","detailed":"http://resizing.flixster.com/2sFwWwxvTzwM5bT9qGm78oZjpBA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/05/21/11052126_ori.jpg","original":"http://resizing.flixster.com/2sFwWwxvTzwM5bT9qGm78oZjpBA=/54x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/05/21/11052126_ori.jpg"},"abridged_cast":[{"name":"Rick Ross","id":"770761752","characters":["Pac Man"]},{"name":"Mr. Bones","id":"771060841","characters":["Chase"]},{"name":"Total Kaos","id":"771060844","characters":["Paul"]},{"name":"M Beezy","id":"771060843","characters":["Reno"]},{"name":"Sho nuff","id":"771060842","characters":["Tee"]}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/771006274.json","alternate":"http://www.rottentomatoes.com/m/chain_reaction-2008/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/771006274/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/771006274/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/771006274/similar.json"}},{"id":"770879444","title":"Deadly Reactor","year":1989,"mpaa_rating":"Unrated","runtime":88,"release_dates":{},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[{"name":"David Heavener","id":"162767691","characters":["Cody"]},{"name":"Stuart Whitman","id":"162656122","characters":["Duke"]},{"name":"Darwyn Swalve","id":"770883640","characters":["Hog"]},{"name":"Allyson Davis","id":"770880183"},{"name":"Barbara Kerek","id":"770935570"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770879444.json","alternate":"http://www.rottentomatoes.com/m/deadly_reactor/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770879444/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770879444/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770879444/similar.json"}},{"id":"770953999","title":"Juno Reactor - Live in Tokyo","year":2002,"mpaa_rating":"Unrated","runtime":"","release_dates":{"dvd":"2002-10-22"},"ratings":{"critics_score":-1,"audience_rating":"Upright","audience_score":100},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/Yttvb_8gXph4S7iJCiLQFbZ2s7Q=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/11/00/22/11002233_ori.jpg","profile":"http://resizing.flixster.com/Yttvb_8gXph4S7iJCiLQFbZ2s7Q=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/11/00/22/11002233_ori.jpg","detailed":"http://resizing.flixster.com/Yttvb_8gXph4S7iJCiLQFbZ2s7Q=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/11/00/22/11002233_ori.jpg","original":"http://resizing.flixster.com/Yttvb_8gXph4S7iJCiLQFbZ2s7Q=/54x74/dkpu1ddg7pbsk.cloudfront.net/movie/11/00/22/11002233_ori.jpg"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770953999.json","alternate":"http://www.rottentomatoes.com/m/juno_reactor_live_in_tokyo/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770953999/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770953999/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770953999/similar.json"}},{"id":"770959249","title":"Neil Young & Crazy Horse - Re-Ac-Tor","year":1981,"mpaa_rating":"Unrated","runtime":"","release_dates":{"dvd":"2003-09-23"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770959249.json","alternate":"http://www.rottentomatoes.com/m/neil_young_and_crazy_horse_reactor/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770959249/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770959249/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770959249/similar.json"}},{"id":"770988328","title":"Standard Deviants - Organic Chemistry Module 14: Electrophilic Reactions III","year":2004,"mpaa_rating":"Unrated","runtime":26,"release_dates":{"dvd":"2004-12-21"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/cQUqzav2aBRwjf6dSJTkUKGIEZ4=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034874_ori.jpg","profile":"http://resizing.flixster.com/cQUqzav2aBRwjf6dSJTkUKGIEZ4=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034874_ori.jpg","detailed":"http://resizing.flixster.com/cQUqzav2aBRwjf6dSJTkUKGIEZ4=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034874_ori.jpg","original":"http://resizing.flixster.com/cQUqzav2aBRwjf6dSJTkUKGIEZ4=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034874_ori.jpg"},"abridged_cast":[{"name":"Standard Deviants","id":"770893547"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988328.json","alternate":"http://www.rottentomatoes.com/m/standard_deviants_organic_chemistry_module_14_electrophilic_reactions_iii/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988328/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988328/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988328/similar.json"}},{"id":"770988330","title":"Standard Deviants - Organic Chemistry Module 13: Electrophilic Reactions II","year":2004,"mpaa_rating":"Unrated","runtime":26,"release_dates":{"dvd":"2004-12-21"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/6R33pXKxhjyiO-hjSHvYZ1r_EGk=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034876_ori.jpg","profile":"http://resizing.flixster.com/6R33pXKxhjyiO-hjSHvYZ1r_EGk=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034876_ori.jpg","detailed":"http://resizing.flixster.com/6R33pXKxhjyiO-hjSHvYZ1r_EGk=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034876_ori.jpg","original":"http://resizing.flixster.com/6R33pXKxhjyiO-hjSHvYZ1r_EGk=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034876_ori.jpg"},"abridged_cast":[{"name":"Standard Deviants","id":"770893547"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988330.json","alternate":"http://www.rottentomatoes.com/m/standard_deviants_organic_chemistry_module_13_electrophilic_reactions_ii/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988330/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988330/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988330/similar.json"}},{"id":"770988332","title":"Standard Deviants - Organic Chemistry Module 11: Electrophilic Reactions I","year":2004,"mpaa_rating":"Unrated","runtime":26,"release_dates":{"dvd":"2004-12-21"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/z770YngyfBvk2oid95j5ppFpaNE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034878_ori.jpg","profile":"http://resizing.flixster.com/z770YngyfBvk2oid95j5ppFpaNE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034878_ori.jpg","detailed":"http://resizing.flixster.com/z770YngyfBvk2oid95j5ppFpaNE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034878_ori.jpg","original":"http://resizing.flixster.com/z770YngyfBvk2oid95j5ppFpaNE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034878_ori.jpg"},"abridged_cast":[{"name":"Standard Deviants","id":"770893547"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988332.json","alternate":"http://www.rottentomatoes.com/m/standard_deviants_organic_chemistry_module_11_electrophilic_reactions_i/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988332/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988332/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988332/similar.json"}},{"id":"770988334","title":"Standard Deviants - Organic Chemistry Module 9: Reaction Energy Diagrams","year":2004,"mpaa_rating":"Unrated","runtime":26,"release_dates":{"dvd":"2004-12-21"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/FtChYDmsGfsjWUVm-ThAwPv10nE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034880_ori.jpg","profile":"http://resizing.flixster.com/FtChYDmsGfsjWUVm-ThAwPv10nE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034880_ori.jpg","detailed":"http://resizing.flixster.com/FtChYDmsGfsjWUVm-ThAwPv10nE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034880_ori.jpg","original":"http://resizing.flixster.com/FtChYDmsGfsjWUVm-ThAwPv10nE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034880_ori.jpg"},"abridged_cast":[{"name":"Standard Deviants","id":"770893547"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988334.json","alternate":"http://www.rottentomatoes.com/m/standard_deviants_organic_chemistry_module_9_reaction_energy_diagrams/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988334/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988334/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988334/similar.json"}},{"id":"770988338","title":"Standard Deviants - Organic Chemistry Module 7: Addition Reactions","year":2004,"mpaa_rating":"Unrated","runtime":26,"release_dates":{"dvd":"2004-12-21"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://resizing.flixster.com/noxh6ykIwPcnBfhtSZY3d3yADjE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034884_ori.jpg","profile":"http://resizing.flixster.com/noxh6ykIwPcnBfhtSZY3d3yADjE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034884_ori.jpg","detailed":"http://resizing.flixster.com/noxh6ykIwPcnBfhtSZY3d3yADjE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034884_ori.jpg","original":"http://resizing.flixster.com/noxh6ykIwPcnBfhtSZY3d3yADjE=/54x78/dkpu1ddg7pbsk.cloudfront.net/movie/11/03/48/11034884_ori.jpg"},"abridged_cast":[{"name":"Standard Deviants","id":"770893547"}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988338.json","alternate":"http://www.rottentomatoes.com/m/standard_deviants_organic_chemistry_module_7_addition_reactions/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988338/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988338/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770988338/similar.json"}},{"id":"771013389","title":"Burn: Bosu Ultimate Reactive Neuromuscular Training","year":2008,"mpaa_rating":"Unrated","runtime":"","release_dates":{"dvd":"2008-07-22"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/771013389.json","alternate":"http://www.rottentomatoes.com/m/burn_bosu_ultimate_reactive_neuromuscular_training/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/771013389/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/771013389/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/771013389/similar.json"}},{"id":"771041962","title":"Bill Nye the Science Guy: Chemical Reactions","year":1994,"mpaa_rating":"Unrated","runtime":"","release_dates":{"dvd":"2009-07-07"},"ratings":{"critics_score":-1,"audience_score":0},"synopsis":"","posters":{"thumbnail":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","profile":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","detailed":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif","original":"http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif"},"abridged_cast":[],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/771041962.json","alternate":"http://www.rottentomatoes.com/m/bill_nye_the_science_guy_chemical_reactions/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/771041962/cast.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/771041962/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/771041962/similar.json"}}],"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies.json?q=react&page_limit=30&page=1"},"link_template":"http://api.rottentomatoes.com/api/public/v1.0/movies.json?q={search-term}&page_limit={results-per-page}&page={page-number}"} diff --git a/docs/Navigation.md b/docs/Navigation.md deleted file mode 100644 index 36c2c08b2..000000000 --- a/docs/Navigation.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: navigation -title: Navigating Between Screens -layout: docs -category: Guides -permalink: docs/navigation.html -next: images -previous: platform-specific-code ---- - -Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. - -This guide covers the various navigation components available in React Native. -If you are just getting started with navigation, you will probably want to use [React Navigation](docs/navigation.html#react-navigation). React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as [redux](https://reactnavigation.org/docs/guides/redux). - -If you're only targeting iOS, you may want to also check out [NavigatorIOS](docs/navigation.html#navigatorios) as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native `UINavigationController` class. This component will not work on Android, however. - -If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: [native-navigation](http://airbnb.io/native-navigation/), [react-native-navigation](https://github.com/wix/react-native-navigation). - -## React Navigation - -The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code. - -The first step is to install in your project: - -``` -npm install --save react-navigation -``` - -Then you can quickly create an app with a home screen and a profile screen: - -``` -import { - StackNavigator, -} from 'react-navigation'; - -const App = StackNavigator({ - Home: { screen: HomeScreen }, - Profile: { screen: ProfileScreen }, -}); -``` - -Each screen component can set navigation options such as the header title. It can use action creators on the `navigation` prop to link to other screens: - -``` -class HomeScreen extends React.Component { - static navigationOptions = { - title: 'Welcome', - }; - render() { - const { navigate } = this.props.navigation; - return ( -