diff --git a/docs/Accessibility.md b/docs/Accessibility.md index a1807b108..276117694 100644 --- a/docs/Accessibility.md +++ b/docs/Accessibility.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/accessibility.html next: timers +previous: animations --- ## Native App Accessibility (iOS and Android) diff --git a/docs/AndroidBuildingFromSource.md b/docs/AndroidBuildingFromSource.md index 9c4cdb916..f583faaba 100644 --- a/docs/AndroidBuildingFromSource.md +++ b/docs/AndroidBuildingFromSource.md @@ -5,6 +5,7 @@ layout: docs category: Guides (Android) permalink: docs/android-building-from-source.html next: activityindicator +previous: android-ui-performance --- You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core. diff --git a/docs/AndroidUIPerformance.md b/docs/AndroidUIPerformance.md index 7c6f9ec69..159360247 100644 --- a/docs/AndroidUIPerformance.md +++ b/docs/AndroidUIPerformance.md @@ -5,6 +5,7 @@ layout: docs category: Guides (Android) permalink: docs/android-ui-performance.html next: android-building-from-source +previous: signed-apk-android --- We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!). diff --git a/docs/Animations.md b/docs/Animations.md index 19629b6cb..546e8b978 100644 --- a/docs/Animations.md +++ b/docs/Animations.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/animations.html next: accessibility +previous: handling-touches --- Fluid, meaningful animations are essential to the mobile user experience. Like @@ -282,7 +283,7 @@ class App extends React.Component { this.state = { w: 100, h: 100 }; this._onPress = this._onPress.bind(this); } - + componentWillMount() { // Animate creation LayoutAnimation.spring(); diff --git a/docs/Colors.md b/docs/Colors.md index 9d863adfa..d7831eef1 100644 --- a/docs/Colors.md +++ b/docs/Colors.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/colors.html next: images +previous: integration-with-existing-apps --- The following formats are supported: diff --git a/docs/CommunicationIOS.md b/docs/CommunicationIOS.md index 48cc5d978..c34eece8d 100644 --- a/docs/CommunicationIOS.md +++ b/docs/CommunicationIOS.md @@ -5,6 +5,7 @@ layout: docs category: Guides (iOS) permalink: docs/communication-ios.html next: native-modules-android +previous: running-on-simulator-ios --- In [Integrating with Existing Apps guide](docs/embedded-app-ios.html) and [Native UI Components guide](docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. diff --git a/docs/Debugging.md b/docs/Debugging.md index 55a940f0d..4426c815a 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/debugging.html next: testing +previous: direct-manipulation --- ## Accessing the In-App Developer Menu diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index 1d4f6f041..bae7ed785 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/direct-manipulation.html next: debugging +previous: timers --- It is sometimes necessary to make changes directly to a component diff --git a/docs/GestureResponderSystem.md b/docs/GestureResponderSystem.md index 7a6192953..08bf4b270 100644 --- a/docs/GestureResponderSystem.md +++ b/docs/GestureResponderSystem.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/gesture-responder-system.html next: native-modules-ios +previous: platform-specific-code --- Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches. diff --git a/docs/HandlingTextInput.md b/docs/HandlingTextInput.md index 76ad648c5..09d428ece 100644 --- a/docs/HandlingTextInput.md +++ b/docs/HandlingTextInput.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/handling-text-input.html next: using-a-scrollview +previous: flexbox --- [`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes diff --git a/docs/HandlingTouches.md b/docs/HandlingTouches.md index fe54377df..0f6b09e14 100644 --- a/docs/HandlingTouches.md +++ b/docs/HandlingTouches.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/handling-touches.html next: animations +previous: images --- Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. diff --git a/docs/HeightAndWidth.md b/docs/HeightAndWidth.md index 228b686c3..0764c4a0c 100644 --- a/docs/HeightAndWidth.md +++ b/docs/HeightAndWidth.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/height-and-width.html next: flexbox +previous: style --- A component's height and width determine its size on the screen. diff --git a/docs/Images.md b/docs/Images.md index afdc8854c..5154174e2 100644 --- a/docs/Images.md +++ b/docs/Images.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/images.html next: handling-touches +previous: colors --- ## Static Image Resources diff --git a/docs/IntegrationWithExistingApps.md b/docs/IntegrationWithExistingApps.md index 256d66062..166b8327c 100644 --- a/docs/IntegrationWithExistingApps.md +++ b/docs/IntegrationWithExistingApps.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/integration-with-existing-apps.html next: colors +previous: more-resources ---
diff --git a/docs/JavaScriptEnvironment.md b/docs/JavaScriptEnvironment.md index 857a3fd71..e9bce9e89 100644 --- a/docs/JavaScriptEnvironment.md +++ b/docs/JavaScriptEnvironment.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/javascript-environment.html next: navigation +previous: testing --- ## JavaScript Runtime diff --git a/docs/LayoutWithFlexbox.md b/docs/LayoutWithFlexbox.md index 762084ac3..d484d7808 100644 --- a/docs/LayoutWithFlexbox.md +++ b/docs/LayoutWithFlexbox.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/flexbox.html next: handling-text-input +previous: height-and-width --- A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. diff --git a/docs/LinkingLibraries.md b/docs/LinkingLibraries.md index b32c9bbc8..8b86331d0 100644 --- a/docs/LinkingLibraries.md +++ b/docs/LinkingLibraries.md @@ -5,6 +5,7 @@ layout: docs category: Guides (iOS) permalink: docs/linking-libraries-ios.html next: running-on-device-ios +previous: native-components-ios --- Not every app uses all the native capabilities, and including the code to support diff --git a/docs/MoreResources.md b/docs/MoreResources.md index 453ea062e..700e29f24 100644 --- a/docs/MoreResources.md +++ b/docs/MoreResources.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/more-resources.html next: integration-with-existing-apps +previous: using-navigators --- If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out. diff --git a/docs/NativeComponentsAndroid.md b/docs/NativeComponentsAndroid.md index 147121824..03d1cb66f 100644 --- a/docs/NativeComponentsAndroid.md +++ b/docs/NativeComponentsAndroid.md @@ -5,6 +5,7 @@ layout: docs category: Guides (Android) permalink: docs/native-components-android.html next: running-on-device-android +previous: native-modules-android --- There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application. diff --git a/docs/NativeComponentsIOS.md b/docs/NativeComponentsIOS.md index 49ef64e40..afd2febf3 100644 --- a/docs/NativeComponentsIOS.md +++ b/docs/NativeComponentsIOS.md @@ -5,6 +5,7 @@ layout: docs category: Guides (iOS) permalink: docs/native-components-ios.html next: linking-libraries-ios +previous: native-modules-ios --- There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application. diff --git a/docs/NativeModulesAndroid.md b/docs/NativeModulesAndroid.md index 1afde0467..dc2f8d912 100644 --- a/docs/NativeModulesAndroid.md +++ b/docs/NativeModulesAndroid.md @@ -5,6 +5,7 @@ layout: docs category: Guides (Android) permalink: docs/native-modules-android.html next: native-components-android +previous: communication-ios --- Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions. diff --git a/docs/NativeModulesIOS.md b/docs/NativeModulesIOS.md index a6739549d..b769cfd4e 100644 --- a/docs/NativeModulesIOS.md +++ b/docs/NativeModulesIOS.md @@ -5,6 +5,7 @@ layout: docs category: Guides (iOS) permalink: docs/native-modules-ios.html next: native-components-ios +previous: gesture-responder-system --- Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions. diff --git a/docs/Navigation.md b/docs/Navigation.md index 70d89ac42..cfe91994f 100644 --- a/docs/Navigation.md +++ b/docs/Navigation.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/navigation.html next: performance +previous: javascript-environment --- 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 `Navigator`. If you are only targeting iOS and would like to stick to the native look and feel, check out `NavigatorIOS`. If you are looking for greater control over your navigation stack, you can't go wrong with `NavigationExperimental`. diff --git a/docs/Networking.md b/docs/Networking.md index baffa2c44..13cbd6458 100644 --- a/docs/Networking.md +++ b/docs/Networking.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/network.html next: using-navigators +previous: using-a-listview --- Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server. diff --git a/docs/Performance.md b/docs/Performance.md index cc6a9788b..f22f24052 100644 --- a/docs/Performance.md +++ b/docs/Performance.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/performance.html next: upgrading +previous: navigation --- A compelling reason for using React Native instead of WebView-based @@ -81,7 +82,7 @@ but their receipt is not necessary for the scroll to occur). ### Common sources of performance problems -#### Console.log statements +#### Console.log statements When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as [redux-logger](https://github.com/evgenyrodionov/redux-logger), so make sure to remove them before bundling. diff --git a/docs/PlatformSpecificInformation.md b/docs/PlatformSpecificInformation.md index 0c9c5f3a6..8dddb77d3 100644 --- a/docs/PlatformSpecificInformation.md +++ b/docs/PlatformSpecificInformation.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/platform-specific-code.html next: gesture-responder-system +previous: upgrading --- When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android. diff --git a/docs/Props.md b/docs/Props.md index 7e5833d2b..3145fc0c5 100644 --- a/docs/Props.md +++ b/docs/Props.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/props.html next: state +previous: tutorial --- Most components can be customized when they are created, with different parameters. These creation parameters are called `props`. diff --git a/docs/RunningOnDeviceAndroid.md b/docs/RunningOnDeviceAndroid.md index 0f3b89b07..f41b6d859 100644 --- a/docs/RunningOnDeviceAndroid.md +++ b/docs/RunningOnDeviceAndroid.md @@ -5,6 +5,7 @@ layout: docs category: Guides (Android) permalink: docs/running-on-device-android.html next: signed-apk-android +props: native-components-android --- ## Prerequisite: USB Debugging diff --git a/docs/RunningOnDeviceIOS.md b/docs/RunningOnDeviceIOS.md index 120690d68..ee91cb3f4 100644 --- a/docs/RunningOnDeviceIOS.md +++ b/docs/RunningOnDeviceIOS.md @@ -5,6 +5,7 @@ layout: docs category: Guides (iOS) permalink: docs/running-on-device-ios.html next: running-on-simulator-ios +previous: linking-libraries-ios --- Running an iOS app on a device requires an [Apple Developer account](https://developer.apple.com/) and provisioning your iPhone. This guide covers only React Native specific topics. diff --git a/docs/RunningOnSimulatorIOS.md b/docs/RunningOnSimulatorIOS.md index 3746ddb5c..8d97d2177 100644 --- a/docs/RunningOnSimulatorIOS.md +++ b/docs/RunningOnSimulatorIOS.md @@ -5,6 +5,7 @@ layout: docs category: Guides (iOS) permalink: docs/running-on-simulator-ios.html next: communication-ios +previous: running-on-device-ios --- ## Starting the simulator diff --git a/docs/SignedAPKAndroid.md b/docs/SignedAPKAndroid.md index c271d4e7c..6b17537c3 100644 --- a/docs/SignedAPKAndroid.md +++ b/docs/SignedAPKAndroid.md @@ -5,6 +5,7 @@ layout: docs category: Guides (Android) permalink: docs/signed-apk-android.html next: android-ui-performance +previous: running-on-device-android --- Android requires that all apps be digitally signed with a certificate before they can be installed, so to distribute your Android application via [Google Play store](https://play.google.com/store), you'll need to generate a signed release APK. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to packaging the JavaScript bundle. diff --git a/docs/State.md b/docs/State.md index c162ed585..98459fce3 100644 --- a/docs/State.md +++ b/docs/State.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/state.html next: style +previous: props --- There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`. diff --git a/docs/Style.md b/docs/Style.md index 94ac2a8db..5b14aeae8 100644 --- a/docs/Style.md +++ b/docs/Style.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/style.html next: height-and-width +previous: state --- With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and values usually match how CSS works on the web, except names are written like `backgroundColor` instead of like `background-color`. diff --git a/docs/Testing.md b/docs/Testing.md index 30a5ff6e4..a4c4ddf26 100644 --- a/docs/Testing.md +++ b/docs/Testing.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/testing.html next: javascript-environment +previous: debugging --- ## Running Tests and Contributing diff --git a/docs/Timers.md b/docs/Timers.md index ad0fe0e06..4aae9d952 100644 --- a/docs/Timers.md +++ b/docs/Timers.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/timers.html next: direct-manipulation +previous: accessibility --- Timers are an important part of an application and React Native implements the [browser timers](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers). diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 5007fec87..0a1647f58 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/tutorial.html next: props +previous: getting-started --- React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This diff --git a/docs/Upgrading.md b/docs/Upgrading.md index 52865b001..c5caf4282 100644 --- a/docs/Upgrading.md +++ b/docs/Upgrading.md @@ -5,6 +5,7 @@ layout: docs category: Guides permalink: docs/upgrading.html next: platform-specific-code +previous: performance --- Upgrading to new versions of React Native will give you access to more APIs, views, developer tools diff --git a/docs/UsingAListView.md b/docs/UsingAListView.md index 4db766ab4..b2c3541f9 100644 --- a/docs/UsingAListView.md +++ b/docs/UsingAListView.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/using-a-listview.html next: network +previous: using-a-scrollview --- The `ListView` component displays a vertically scrolling list of changing, but similarly structured, data. diff --git a/docs/UsingAScrollView.md b/docs/UsingAScrollView.md index 8c038e9a1..48e8b0398 100644 --- a/docs/UsingAScrollView.md +++ b/docs/UsingAScrollView.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/using-a-scrollview.html next: using-a-listview +previous: handling-text-input --- The [`ScrollView`](/react-native/docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property). diff --git a/docs/UsingNavigators.md b/docs/UsingNavigators.md index ad8da54cc..16ef78f78 100644 --- a/docs/UsingNavigators.md +++ b/docs/UsingNavigators.md @@ -5,6 +5,7 @@ layout: docs category: The Basics permalink: docs/using-navigators.html next: more-resources +previous: networking --- Mobile apps rarely consist of just one screen. As soon as you add a second screen to your app, you will have to take into consideration how the user will navigate from one screen to the other. diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js index bd2be2942..dd3517e65 100644 --- a/website/server/extractDocs.js +++ b/website/server/extractDocs.js @@ -165,6 +165,19 @@ function getNextComponent(idx) { return null; } +function getPreviousComponent(idx) { + if (all[idx - 1]) { + const previousComponentName = getNameFromPath(all[idx - 1]); + + if (shouldDisplayInSidebar(previousComponentName)) { + return slugify(previousComponentName); + } else { + return getPreviousComponent(idx - 1); + } + } + return null; +} + function componentsToMarkdown(type, json, filepath, idx, styles) { const componentName = getNameFromPath(filepath); const componentPlatform = getPlatformFromPath(filepath); @@ -189,6 +202,7 @@ function componentsToMarkdown(type, json, filepath, idx, styles) { // Put styles (e.g. Flexbox) into the API category const category = (type === 'style' ? 'apis' : type + 's'); const next = getNextComponent(idx); + const previous = getPreviousComponent(idx); const res = [ '---', @@ -199,6 +213,7 @@ function componentsToMarkdown(type, json, filepath, idx, styles) { 'permalink: docs/' + slugify(componentName) + '.html', 'platform: ' + componentPlatform, 'next: ' + next, + 'previous: ' + previous, 'sidebar: ' + shouldDisplayInSidebar(componentName), 'runnable:' + isRunnable(componentName, componentPlatform), 'path:' + json.filepath,