From aa79a51873b1b3ac195f4042a417c63c0ce59420 Mon Sep 17 00:00:00 2001 From: Sunny Luo Date: Tue, 13 Nov 2018 14:37:48 +0800 Subject: [PATCH] 181113 sync 0.57 (#31) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add Salesforce App to the showcase (#594) * Fix 'Expo getting started' link (#598) * Fix 'Expo getting started' link * Update getting-started.md * Update getting-started.md * add default value to TextInput clearButtonMode description (#558) * add default value to TextInput clearButtonMode description Small documentation tweak - added information about default value of `clearButtonMode` property to `TextInput` component. * Update textinput.md * typo in 'specially' (#636) * typo * Update animations.md * Add possible Buttons to rationale (#580) * Missing code for passing result to ReactInstanceManager (#559) > This is for projects which integrate react-native in existing android applications. Any Native Module which uses `startActivityForResult()` and expects to catch the result in its `onActivityResult()` would fail if we do not override the `onActivityResult()` in our React Activity and pass it on to the `ReactInstanceManager` instance created. * Update TouchableWithoutFeedback and Building For TV Devices (#565) * Add onBlur and onFocus description * Update TV Code changes * Update touchablewithoutfeedback.md * Update touchablewithoutfeedback.md * Update building-for-apple-tv.md * [DOCS] autoCapitalize caveat for name-phone-pad (#633) * [DOCS] autoCapitalize caveat for name-phone-pad https://developer.apple.com/documentation/uikit/uikeyboardtype/namephonepad > UIKeyboardType.namePhonePad specifies a keypad designed for entering a person’s name or phone number. This keyboard type does not support auto-capitalization. * Update textinput.md * Added allowFileAccess Android WebView property (#586) * remove methods from the KeyboardAvoidingView docs (#587) * remove methods from the KeyboardAvoidingView docs * Revert change to bullet points * Update keyboardavoidingview.md * Update keyboardavoidingview.md * fix typo easing (#615) * fix typo easing static in easing; to static in(easing) * Update easing.md * Update easing.md * Update easing.md * Update easing.md * Update easing.md * Update easing.md * Text component behaviour inside another Text component (#589) * Fix: element behaviour inside * Update text.md * Update text.md * Typo (#638) Change 'indiciating' to 'indicating' * Document buttonPositive, buttonNegative, buttonNeutral (#650) * Invalid anchors (#647) * Invalid anchors On [web version](https://facebook.github.io/react-native/docs/switch) camelcase anchors not supported * Update switch.md * Update switch.md * Fix broken link in understanding-cli.md (#648) * Fix broken link in understanding-cli.md * Change link to metro config in understanding-cli.md * Update guides with latest content across all versions (#656) * Automatically correct unversioned guides. * Collapse updates to unversioned docs back into Version 0.5 * Update navigation.md (#658) added missing space * Remove html extensions from links on index page (#637) * Fix path of generated APK (#639) In React Native v0.57.4, the generated APK can be found under `android/app/build/outputs/apk/release/app-release.apk`. * Recommend installing SDK 27 in Getting Started I have got an error saying it requires android sdk 27 while trying to run "react-native run-android" command in my pc.... * Update doc unversioning script to use latest data from docs/ * Run unversion script * Prettier * Prettier * Match font-size in lists to font-size in p * Sync with latest changes * Update Getting Started * Add yarn command for fixing Guides * Blog Post: Open Source Roadmap (#657) * Blog Post: Open Source Roadmap * Link to discussions repo * Add thumbColor changes to Switch on versioned 0.57 (#620) * Removed performance section from stylesheet as no longer true (#629) See https://github.com/facebook/react-native/commit/a8e3c7f5780516eb0297830632862484ad032c10 `StyleSheet.create` is now an identity function, the `ReactNativePropRegistry` (`StyleSheetRegistry`) was removed. * Update Out-of-Tree Platform docs to reflect new module patterns (#604) * .big-button nicer hover effect (#603) * Lighter big button color change on hover (#600) * Adds a basic example to Share API (#539) * Adds a basic example to Share.md This commit adds a basic example to the Share API. The example highlights use of the Share.sharedAction, Share.dismissedAction, and Share.share methods as well as how they are intended to be used together. * Add missing 's' in accessibilityStates prop mentions (#659) * Correct whitespace in AsyncStorage "Fetching data" (#661) * fix incomplete sentence in DatePickerAndroid docs (#654) * Update native-components-ios.md (#625) * Update native-components-ios.md `RCTBubblingEventBlock` must be prefixed with `on` but this does not mentioned in the documentation. I find it in this [link](https://stackoverflow.com/a/46430329/3127015) and I really waste my time to figure out why my callback does not call. I then think it can be helpful to others to know it as well. * Update native-components-ios.md * Add missing properties doc to LayoutAnimation (#623) * Fixes to the Layout Props page (#595) - Fixed grammar in the `aspectRatio` segment - Changed the supported types of many props from `number, , string` to the more fitting `number, string` * Added info on how to debug using Safari (#588) * Added info on how to debug using Safari * Update debugging.md * Add docs for ImageBackground (#597) * Backport ImageBackground docs all the way back to 0.46 * Small grammar fix (#643) "Notice that {pic} is surrounded by braces, to embed the variable pic into JSX. " is not a grammatically correct sentence. It can be quickly fixed by removing the comma, but the sentence can be made more concise and clear. My proposed fix: "Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX." This changes the focus of the sentence to braces and explains more concisely what function they are performing. * Clarifying exactly what properties absoluteFill includes (#644) * Update to new way of referencing dependencies (#642) also made Ndk version consistent with links * Clarifying opacity is between 0 and 1, adding default (#634) * tweak the wording to stick to jdk 8 (#640) * Introduce apply git patch file after running `react-native-git-upgrade` command (#632) The troubles I met in the react-native upgrading process motivated me to add more details about applying git patch file generated by command `react-native-git-upgrade`. Conflicts will only be marked up for resolving after applying the patch. * Fixed prop descriptions of 'color' and 'value' props in picker-item.md (#627) * Fix small bug in ReadMe doc and add consistent periods. (#622) * Refactor State doc to return proper elemnt and keep consistent function format (#621) * Update height-and-width.md (#616) Correcting grammar for clarity. * Reorder props alphabetically (#609) * tintColor is deprecated, updated docs to reflect this change (#605) * Add deprecation notice for tintColor to 0.57 docs * Add reference to shadow props in View style docs (#599) * File structure should include the 1x version too. (#581) Its unclear in the docs that the 1x version should be included too. I believe that you do need it, correct me if I'm wrong? * move styles declaration to the top for emphasis (#200) * move styles declaration to the top for emphasis * Update style.md * Update gradle documentation (#199) * Update gradle documentation `compile` is now deprecated in favor of `implementation`. https://stackoverflow.com/questions/44493378/whats-the-difference-between-implementation-and-compile-in-gradle * Update integration-with-existing-apps.md * Update guide sync script to ensure v0.5 is always up to date Switch to Pretty Quick * Switch from lint-staged to husky + pretty-quick * Update copyright headers to yearless format * Remove outdated images in Android GS * add crash reporting services for react native (#666) * Added testId in doc for TouchableWithoutFeedback (#667) Thos prop was missing from the documentation, but people are still using it extensively. --- .prettierrc | 16 +- LICENSE | 4 +- README.md | 34 +- docs/accessibility.md | 4 +- docs/accessibilityinfo.md | 4 +- docs/alertios.md | 6 +- docs/animated.md | 4 +- docs/animatedvaluexy.md | 2 +- docs/animations.md | 4 +- docs/asyncstorage.md | 6 +- docs/building-for-apple-tv.md | 16 +- docs/building-from-source.md | 10 +- docs/custom-webview-android.md | 4 +- docs/custom-webview-ios.md | 4 +- docs/datepickerandroid.md | 2 +- docs/debugging.md | 13 + docs/getting-started.md | 67 +- docs/height-and-width.md | 2 +- docs/imagebackground.md | 53 ++ docs/images.md | 3 +- docs/integration-with-existing-apps.md | 7 +- docs/keyboardavoidingview.md | 30 - docs/layout-props.md | 184 ++--- docs/layoutanimation.md | 46 ++ docs/more-resources.md | 2 + docs/native-components-ios.md | 4 +- docs/native-modules-android.md | 4 +- docs/native-modules-ios.md | 4 +- docs/navigation.md | 2 +- docs/network.md | 2 +- docs/out-of-tree-platforms.md | 10 +- docs/permissionsandroid.md | 23 +- docs/picker-item.md | 4 +- docs/props.md | 2 +- docs/share.md | 40 +- docs/signed-apk-android.md | 2 +- docs/state.md | 19 +- docs/style.md | 22 +- docs/stylesheet.md | 7 +- docs/switch.md | 24 +- docs/text.md | 11 +- docs/textinput.md | 4 +- docs/toastandroid.md | 41 +- docs/touchablehighlight.md | 6 +- docs/touchablewithoutfeedback.md | 53 +- docs/understanding-cli.md | 2 +- docs/upgrading.md | 8 + docs/view-style-props.md | 3 + docs/webview.md | 11 + website/blacklist-check.js | 72 -- ...t-to-left-support-for-react-native-apps.md | 2 +- website/blog/2018-11-01-oss-roadmap.md | 64 ++ website/blog/assets/oss-roadmap-hero.jpg | Bin 0 -> 331049 bytes website/core/Footer.js | 2 +- website/i18n/en.json | 7 +- website/image-check.js | 25 +- website/package.json | 24 +- website/pages/en/help.js | 80 +- website/pages/en/index.js | 30 +- website/pages/en/showcase.js | 22 +- website/pages/en/versions.js | 66 +- website/showcase.json | 11 + website/sidebars.json | 1 + website/siteConfig.js | 74 +- website/static/css/react-native.css | 9 +- website/static/img/showcase/salesforce.png | Bin 0 -> 12513 bytes website/sync-guides.js | 115 +++ .../versioned_docs/version-0.12/animated.md | 4 +- .../versioned_docs/version-0.16/animated.md | 4 +- .../versioned_docs/version-0.18/animated.md | 4 +- .../versioned_docs/version-0.19/animated.md | 4 +- .../versioned_docs/version-0.22/animated.md | 4 +- .../versioned_docs/version-0.23/animated.md | 4 +- .../versioned_docs/version-0.34/animated.md | 4 +- .../version-0.35/toastandroid.md | 2 +- .../versioned_docs/version-0.36/animated.md | 4 +- .../versioned_docs/version-0.37/alertios.md | 6 +- .../versioned_docs/version-0.39/animated.md | 4 +- .../versioned_docs/version-0.42/alertios.md | 6 +- .../versioned_docs/version-0.42/animated.md | 4 +- .../version-0.43/accessibilityinfo.md | 4 +- .../versioned_docs/version-0.43/animated.md | 4 +- .../versioned_docs/version-0.44/alertios.md | 6 +- .../versioned_docs/version-0.44/animated.md | 4 +- .../version-0.46/accessibilityinfo.md | 4 +- .../versioned_docs/version-0.46/animated.md | 4 +- .../version-0.46/imagebackground.md | 54 ++ .../versioned_docs/version-0.48/animated.md | 4 +- .../versioned_docs/version-0.49/alertios.md | 6 +- .../versioned_docs/version-0.49/animated.md | 2 +- .../version-0.49/toastandroid.md | 4 +- .../version-0.5/accessibility.md | 65 +- .../version-0.5/accessibilityinfo.md | 4 +- .../versioned_docs/version-0.5/alertios.md | 8 +- .../versioned_docs/version-0.5/animated.md | 4 +- .../version-0.5/animatedvaluexy.md | 2 +- .../versioned_docs/version-0.5/animations.md | 6 +- .../version-0.5/building-for-apple-tv.md | 20 +- .../version-0.5/building-from-source.md | 20 +- .../version-0.5/custom-webview-android.md | 4 +- .../version-0.5/custom-webview-ios.md | 4 +- .../versioned_docs/version-0.5/debugging.md | 23 +- .../version-0.5/direct-manipulation.md | 2 +- website/versioned_docs/version-0.5/flexbox.md | 6 +- .../version-0.5/getting-started.md | 72 +- .../version-0.5/handling-touches.md | 4 +- .../version-0.5/headless-js-android.md | 2 +- .../version-0.5/height-and-width.md | 2 +- website/versioned_docs/version-0.5/images.md | 7 +- .../integration-with-existing-apps.md | 7 +- .../versioned_docs/version-0.5/maintainers.md | 2 +- .../version-0.5/more-resources.md | 18 +- .../version-0.5/native-components-android.md | 32 +- .../version-0.5/native-components-ios.md | 4 +- .../version-0.5/native-modules-android.md | 10 +- .../version-0.5/native-modules-ios.md | 6 +- .../versioned_docs/version-0.5/navigation.md | 6 +- website/versioned_docs/version-0.5/network.md | 4 +- .../versioned_docs/version-0.5/performance.md | 136 +--- .../version-0.5/permissionsandroid.md | 2 +- .../version-0.5/platform-specific-code.md | 2 + website/versioned_docs/version-0.5/props.md | 6 +- .../version-0.5/running-on-device.md | 10 +- .../version-0.5/signed-apk-android.md | 33 +- website/versioned_docs/version-0.5/state.md | 19 +- website/versioned_docs/version-0.5/style.md | 22 +- website/versioned_docs/version-0.5/testing.md | 4 +- .../version-0.5/toastandroid.md | 6 +- .../version-0.5/understanding-cli.md | 49 ++ .../versioned_docs/version-0.5/upgrading.md | 18 +- .../versioned_docs/version-0.50/alertios.md | 6 +- .../versioned_docs/version-0.50/animated.md | 4 +- .../version-0.50/toastandroid.md | 4 +- .../versioned_docs/version-0.51/animated.md | 4 +- .../versioned_docs/version-0.52/animated.md | 4 +- .../versioned_docs/version-0.55/animated.md | 4 +- .../versioned_docs/version-0.56/animated.md | 4 +- .../version-0.57/accessibility.md | 248 ------ .../version-0.57/accessibilityinfo.md | 4 +- .../versioned_docs/version-0.57/animated.md | 4 +- .../version-0.57/building-for-apple-tv.md | 315 -------- .../version-0.57/building-from-source.md | 161 ---- .../versioned_docs/version-0.57/debugging.md | 242 ------ .../version-0.57/direct-manipulation.md | 203 ----- .../versioned_docs/version-0.57/flexbox.md | 106 --- .../version-0.57/getting-started.md | 757 ------------------ .../version-0.57/handling-touches.md | 180 ----- .../version-0.57/headless-js-android.md | 146 ---- website/versioned_docs/version-0.57/images.md | 222 ----- .../version-0.57/keyboardavoidingview.md | 30 - .../version-0.57/more-resources.md | 42 - .../version-0.57/native-components-android.md | 184 ----- .../version-0.57/native-modules-android.md | 470 ----------- .../versioned_docs/version-0.57/navigation.md | 143 ---- .../versioned_docs/version-0.57/network.md | 186 ----- .../version-0.57/performance.md | 472 ----------- .../version-0.57/running-on-device.md | 518 ------------ .../version-0.57/signed-apk-android.md | 143 ---- website/versioned_docs/version-0.57/switch.md | 12 +- .../versioned_docs/version-0.57/testing.md | 131 --- .../versioned_docs/version-0.57/textinput.md | 4 +- .../version-0.57/touchablewithoutfeedback.md | 22 + .../version-0.57/understanding-cli.md | 76 -- .../version-0.46-sidebars.json | 147 ++++ .../version-0.48-sidebars.json | 1 + .../version-0.50-sidebars.json | 1 + .../version-0.52-sidebars.json | 1 + .../version-0.53-sidebars.json | 1 + .../version-0.54-sidebars.json | 1 + .../version-0.55-sidebars.json | 1 + .../version-0.56-sidebars.json | 1 + .../version-0.57-sidebars.json | 1 + website/yarn.lock | 522 ++++-------- 173 files changed, 1669 insertions(+), 6299 deletions(-) create mode 100644 docs/imagebackground.md delete mode 100644 website/blacklist-check.js create mode 100644 website/blog/2018-11-01-oss-roadmap.md create mode 100644 website/blog/assets/oss-roadmap-hero.jpg create mode 100644 website/static/img/showcase/salesforce.png create mode 100644 website/sync-guides.js create mode 100644 website/versioned_docs/version-0.46/imagebackground.md delete mode 100644 website/versioned_docs/version-0.57/accessibility.md delete mode 100644 website/versioned_docs/version-0.57/building-for-apple-tv.md delete mode 100644 website/versioned_docs/version-0.57/building-from-source.md delete mode 100644 website/versioned_docs/version-0.57/debugging.md delete mode 100644 website/versioned_docs/version-0.57/direct-manipulation.md delete mode 100644 website/versioned_docs/version-0.57/flexbox.md delete mode 100644 website/versioned_docs/version-0.57/getting-started.md delete mode 100644 website/versioned_docs/version-0.57/handling-touches.md delete mode 100644 website/versioned_docs/version-0.57/headless-js-android.md delete mode 100644 website/versioned_docs/version-0.57/images.md delete mode 100644 website/versioned_docs/version-0.57/more-resources.md delete mode 100644 website/versioned_docs/version-0.57/native-components-android.md delete mode 100644 website/versioned_docs/version-0.57/native-modules-android.md delete mode 100644 website/versioned_docs/version-0.57/navigation.md delete mode 100644 website/versioned_docs/version-0.57/network.md delete mode 100644 website/versioned_docs/version-0.57/performance.md delete mode 100644 website/versioned_docs/version-0.57/running-on-device.md delete mode 100644 website/versioned_docs/version-0.57/signed-apk-android.md delete mode 100644 website/versioned_docs/version-0.57/testing.md delete mode 100644 website/versioned_docs/version-0.57/understanding-cli.md create mode 100644 website/versioned_sidebars/version-0.46-sidebars.json diff --git a/.prettierrc b/.prettierrc index 61375845b97..51d0a9c8df5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,13 +1,7 @@ { "overrides": [ { - "files": ".prettierrc", - "options": { - "parser": "json" - } - }, - { - "files": ["website/core/**/*.js", "website/static/js/**/*.js"], + "files": "*.js", "options": { "arrowParens": "avoid", "bracketSpacing": false, @@ -18,11 +12,7 @@ } }, { - "files": [ - "docs/**/*.md", - "website/versioned_docs/**/*.md", - "website/blog/**/*.md" - ], + "files": "*.md", "options": { "arrowParens": "always", "bracketSpacing": false, @@ -30,7 +20,7 @@ "printWidth": 80, "proseWrap": "never", "singleQuote": true, - "trailingComma": "es5" + "trailingComma": "all" } } ] diff --git a/LICENSE b/LICENSE index d9021534ac8..b96dcb0480a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2015-present, Facebook, Inc. +Copyright (c) Facebook, Inc. and its affiliates. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index ad818568f01..d95641d8796 100644 --- a/README.md +++ b/README.md @@ -19,24 +19,24 @@ This repo contains the website configuration and documentation powering the 1. Git 1. Node: install version 6.2.2 or greater. Node v8 would be ideal. 1. Yarn: See - [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) -1. A fork of the repo (for any contributions) + [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/). +1. A fork of the repo (for any contributions). 1. A clone of the `react-native-website` repo. 1. Docusaurus: Run `yarn global add docusaurus-init` or `npm install --global docusaurus-init` 1. Prettier: See - [Prettier website for installation instructions](https://prettier.io/docs/en/install.html) + [Prettier website for installation instructions](https://prettier.io/docs/en/install.html). ### Installation -1. `cd react-native-website` to go into the project root -1. `cd website` to go into the website portion of the project +1. `cd react-native-website` to go into the project root. +1. `cd website` to go into the website portion of the project. 1. `yarn` to install the website's npm dependencies (or `npm install`, if not - using Yarn) + using Yarn). ### Running locally -1. `yarn start` to start the development server (powered by Docusaurus) (or `npm start`, if not using Yarn) -1. `open http://localhost:3000/` to open the site in your favorite browser +1. `yarn start` to start the development server (powered by Docusaurus) (or `npm start`, if not using Yarn). +1. `open http://localhost:3000/` to open the site in your favorite browser. # Overview @@ -115,9 +115,9 @@ be in reverse chronological order. #### Cutting a new version -1. `cd react-native-website` to go into the project root -1. `cd website` to go into the website portion of the project -1. Run `yarn version ` where '' is the new version being +1. `cd react-native-website` to go into the project root. +1. `cd website` to go into the website portion of the project. +1. Run `yarn version ` where `` is the new version being released. ## Website configuration @@ -138,14 +138,14 @@ React Native showcase. ### Create a branch 1. `git checkout master` from any folder in your local `react-native-website` - repository -1. `git pull origin master` to ensure you have the latest main code + repository. +1. `git pull origin master` to ensure you have the latest main code. 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` - with a suitable name) to create a branch + with a suitable name) to create a branch. ### Make the change -1. Follow the "Running locally" instructions +1. Follow the "Running locally" instructions. 1. Save the files and check in the browser. Some changes may require a server restart. 1. Changes to /docs will only be visible in the latest version of the documentation (master). @@ -159,10 +159,10 @@ React Native showcase. ### Push it 1. Run `yarn prettier` to ensure your changes are consistent with other files in - the repo + the repo. 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit - your changes + your changes. 1. `git push my-fork-name the-name-of-my-branch` 1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) diff --git a/docs/accessibility.md b/docs/accessibility.md index 32ee4d56c2d..d37d343e73e 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -91,7 +91,7 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A * **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar). * **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. -#### accessibilityState (iOS, Android) +#### accessibilityStates (iOS, Android) > **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. @@ -100,7 +100,7 @@ Accessibility State tells a person using either VoiceOver on iOS or TalkBack on * **selected** Used when the element is in a selected state. For example, a button is selected. * **disabled** Used when the element is disabled and cannot be interacted with. -To use, set the `accessibilityState` to an array containing either `selected`, `disabled`, or both. +To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both. #### accessibilityTraits (iOS) diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index 8e382d5557d..2b2fd31fee5 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -16,7 +16,7 @@ class ScreenReaderStatusExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); AccessibilityInfo.fetch().then((isEnabled) => { this.setState({ @@ -28,7 +28,7 @@ class ScreenReaderStatusExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } diff --git a/docs/alertios.md b/docs/alertios.md index 1133a8f1227..65a8ea7024c 100644 --- a/docs/alertios.md +++ b/docs/alertios.md @@ -76,7 +76,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -118,7 +118,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -132,7 +132,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/docs/animated.md b/docs/animated.md index a10622b77ac..3e0f003a979 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -13,7 +13,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -212,7 +212,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/docs/animatedvaluexy.md b/docs/animatedvaluexy.md index 8062dbe716d..32380806489 100644 --- a/docs/animatedvaluexy.md +++ b/docs/animatedvaluexy.md @@ -28,7 +28,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/docs/animations.md b/docs/animations.md index f0c57925484..b269a2be8e1 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -271,7 +271,7 @@ Animated.timing(this.state.animatedValue, { 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. +The native driver also works with `Animated.event`. This is especially 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} diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md index d1f46d302b1..ca3e3f41ea4 100644 --- a/docs/asyncstorage.md +++ b/docs/asyncstorage.md @@ -39,9 +39,9 @@ _retrieveData = async () => { // We have data!! console.log(value); } - } catch (error) { - // Error retrieving data - } + } catch (error) { + // Error retrieving data + } } ``` diff --git a/docs/building-for-apple-tv.md b/docs/building-for-apple-tv.md index ff21f7df9de..d717a50f686 100644 --- a/docs/building-for-apple-tv.md +++ b/docs/building-for-apple-tv.md @@ -139,19 +139,19 @@ var running_on_android_tv = Platform.isTV; * _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS. -* _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight` and `TouchableOpacity` will "just work". In particular: +* _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will "just work". In particular: - * `touchableHandleActivePressIn` will be executed when the touchable view goes into focus - * `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus - * `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + * `onFocus` will be executed when the touchable view goes into focus + * `onBlur` will be executed when the touchable view goes out of focus + * `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. -* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will "just work". In particular: +* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will "just work". In particular: - * `touchableHandleActivePressIn` will be executed when the touchable view goes into focus - * `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus - * `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + * `onFocus` will be executed when the touchable view goes into focus + * `onBlur` will be executed when the touchable view goes out of focus + * `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. diff --git a/docs/building-from-source.md b/docs/building-from-source.md index f2f67eac416..914d2afa4a0 100644 --- a/docs/building-from-source.md +++ b/docs/building-from-source.md @@ -41,7 +41,7 @@ Example: ``` sdk.dir=/Users/your_unix_name/android-sdk-macosx -ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e +ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r17b ``` #### Download links for Android NDK @@ -94,15 +94,15 @@ project(':ReactAndroid').projectDir = new File( ... ``` -Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `compile 'com.facebook.react:react-native:+'` with `compile project(':ReactAndroid')`: +Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `implementation 'com.facebook.react:react-native:+'` with `implementation project(':ReactAndroid')`: ```gradle ... dependencies { - compile fileTree(dir: 'libs', include: ['*.jar']) - compile 'com.android.support:appcompat-v7:26.0.2' + implementation fileTree(dir: 'libs', include: ['*.jar']) + implementation 'com.android.support:appcompat-v7:26.0.2' - compile project(':ReactAndroid') + implementation project(':ReactAndroid') ... } diff --git a/docs/custom-webview-android.md b/docs/custom-webview-android.md index 1f96356abf9..15232242853 100644 --- a/docs/custom-webview-android.md +++ b/docs/custom-webview-android.md @@ -195,7 +195,7 @@ export default class CustomWebView extends Component { const RCTCustomWebView = requireNativeComponent( 'RCTCustomWebView', CustomWebView, - WebView.extraNativeComponentConfig + WebView.extraNativeComponentConfig, ); ``` @@ -253,6 +253,6 @@ const RCTCustomWebView = requireNativeComponent( ...WebView.extraNativeComponentConfig.nativeOnly, onScrollToBottom: true, }, - } + }, ); ``` diff --git a/docs/custom-webview-ios.md b/docs/custom-webview-ios.md index c491892cf20..4a4a8df3e1b 100644 --- a/docs/custom-webview-ios.md +++ b/docs/custom-webview-ios.md @@ -168,7 +168,7 @@ export default class CustomWebView extends Component { const RCTCustomWebView = requireNativeComponent( 'RCTCustomWebView', CustomWebView, - WebView.extraNativeComponentConfig + WebView.extraNativeComponentConfig, ); ``` @@ -227,6 +227,6 @@ const RCTCustomWebView = requireNativeComponent( ...WebView.extraNativeComponentConfig.nativeOnly, onScrollToBottom: true, }, - } + }, ); ``` diff --git a/docs/datepickerandroid.md b/docs/datepickerandroid.md index 8b7258cc2ae..2fae70d48d3 100644 --- a/docs/datepickerandroid.md +++ b/docs/datepickerandroid.md @@ -52,7 +52,7 @@ The available keys for the `options` object are: * 'spinner': Show a date picker in spinner mode. * 'default': Show a default native date picker(spinner/calendar) based on android versions. -Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. +Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` is equal to `DatePickerAndroid.dateSetAction` before reading the values. Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options. diff --git a/docs/debugging.md b/docs/debugging.md index eddd9504f7d..94c583e0731 100644 --- a/docs/debugging.md +++ b/docs/debugging.md @@ -73,6 +73,19 @@ The debugger will receive a list of all project roots, separated by a space. For > Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output. +## Safari Developer Tools + +You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely". + +* Enable Develop menu in Safari: `Preferences → Advanced → Select "Show Develop menu in menu bar"` +* Select your app's JSContext: `Develop → Simulator → JSContext` +* Safari's Web Inspector should open which has a Console and a Debugger + +However, there are some disadvantages: + +1. No sourcemaps when debugging +2. Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually. + ## 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: diff --git a/docs/getting-started.md b/docs/getting-started.md index 9cebb9af288..82b76125d3b 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -132,6 +132,7 @@ Congratulations! You've successfully run and modified your first React Native ap Expo also has [docs](https://docs.expo.io) you can reference if you have questions specific to the tool. You can also ask for help at [Expo forums](https://forums.expo.io). If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it: + * in the [Expo CLI issues](https://github.com/expo/expo-cli/issues) (for issues related to Expo CLI), or * in the [Expo issues](https://github.com/expo/expo/issues) (for issues about the Expo client or SDK). @@ -155,7 +156,7 @@ If you're integrating React Native into an existing project, you'll want to skip -

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo/a> or Create React Native App, you'll need this section.

+

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo or Create React Native App, you'll need this section.

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different. @@ -290,7 +291,7 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho ### Java Development Kit -React Native requires a recent version of the Java SE Development Kit (JDK). [Download and install Oracle JDK 8 or newer](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if needed. You can also use [OpenJDK 8 or newer](http://openjdk.java.net/install/) as an alternative. +React Native requires a recent version of the Java SE Development Kit (JDK). [Download and install Oracle JDK 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if needed. You can also use [OpenJDK 8](http://openjdk.java.net/install/) as an alternative. @@ -327,7 +328,7 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t #### 2. Install the Android SDK -Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 8.0 (Oreo)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. +Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 8.1 (Oreo)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager". @@ -343,45 +344,15 @@ The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Cli > The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. -Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 8.0 (Oreo)` entry, then make sure the following items are all checked: - -* `Android SDK Platform 26` -* `Google APIs Intel x86 Atom_64 System Image` - - - -![Android SDK Manager](/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png) - - - -![Android SDK Manager](/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png) - - +Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 8.1 (Oreo)` entry, then make sure the following items are checked: -Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `26.0.3` is selected. +* `Android SDK Platform 27` +* `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image` - - -![Android SDK Manager - 26.0.3 Build Tools](/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png) - - - -![Android SDK Manager - 26.0.3 Build Tools](/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png) - - +Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `27.0.3` is selected. Finally, click "Apply" to download and install the Android SDK and related build tools. - - -![Android SDK Manager - Installs](/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png) - - - -![Android SDK Manager - Installs](/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png) - - - #### 3. Configure the ANDROID_HOME environment variable The React Native tools require some environment variables to be set up in order to build apps with native code. @@ -484,19 +455,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li ![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedAndroidStudioAVD.png) -If you have just installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next". - - - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedCreateAVDWindows.png) - - - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedCreateAVDMacOS.png) - - - -Select the "x86 Images" tab, then look for the **Oreo** API Level 26, x86_64 ABI image with a Android 8.0 (Google APIs) target. +If you have just installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Oreo** API Level 27 image. @@ -504,20 +463,12 @@ Select the "x86 Images" tab, then look for the **Oreo** API Level 26, x86_64 ABI -![Install HAXM](/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png) - > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. -![AVD List](/react-native/docs/assets/GettingStartedAVDManagerWindows.png) - -![Install HAXM](/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png) - > If you don't have HAXM installed, follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS) to set it up, then go back to the AVD Manager. -![AVD List](/react-native/docs/assets/GettingStartedAVDManagerMacOS.png) - Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. diff --git a/docs/height-and-width.md b/docs/height-and-width.md index 6d6b7d3bad6..e14899e8aaa 100644 --- a/docs/height-and-width.md +++ b/docs/height-and-width.md @@ -33,7 +33,7 @@ Setting dimensions this way is common for components that should always render a ## Flex Dimensions -Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings. +Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings. > A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible. diff --git a/docs/imagebackground.md b/docs/imagebackground.md new file mode 100644 index 00000000000..06ada42fc83 --- /dev/null +++ b/docs/imagebackground.md @@ -0,0 +1,53 @@ +--- +id: imagebackground +title: ImageBackground +--- + +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. + +Note that you must specify some width and height style attributes. + +## Example + +``` +return ( + + Inside + +); +``` + +### Props + +* [`Image` props...](image.md#props) +* [`style`](imagebackground.md#style) +* [`imageStyle`](imagebackground.md#imageStyle) +* [`imageRef`](imagebackground.md#imageRef) + +--- + +# Reference + +## Props + +### `style` + +| Type | Required | +| ---------------------------------- | -------- | +| [view styles](view-style-props.md) | No | + +### `imageStyle` + +| Type | Required | +| ------------------------------------ | -------- | +| [image styles](image-style-props.md) | No | + +### `imageRef` + +Allows to set a reference to the inner `Image` component + +| Type | Required | +| ----------------------------------------------------- | -------- | +| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | No | diff --git a/docs/images.md b/docs/images.md index 6bad61ebe75..3460d324f07 100644 --- a/docs/images.md +++ b/docs/images.md @@ -19,6 +19,7 @@ You can also use the `@2x` and `@3x` suffixes to provide images for different sc . ├── button.js └── img + ├── check.png ├── check@2x.png └── check@3x.png ``` @@ -195,7 +196,7 @@ On the user side, this lets you annotate the object with useful attributes such 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. +You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [documentation](imagebackground.md) for more insight, and create your own custom component when needed. ```javascript return ( diff --git a/docs/integration-with-existing-apps.md b/docs/integration-with-existing-apps.md index fea6bb74221..35931ae2b34 100644 --- a/docs/integration-with-existing-apps.md +++ b/docs/integration-with-existing-apps.md @@ -562,9 +562,9 @@ Add the React Native dependency to your app's `build.gradle` file: ``` dependencies { - compile 'com.android.support:appcompat-v7:23.0.1' + implementation 'com.android.support:appcompat-v7:27.1.1' ... - compile "com.facebook.react:react-native:+" // From node_modules + implementation "com.facebook.react:react-native:+" // From node_modules } ``` @@ -663,7 +663,7 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { } ``` -Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. +Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use `startActivityForResult`, we need to pass the result to the `onActivityResult` method of our `ReactInstanceManager` instance. ```java @Override @@ -675,6 +675,7 @@ protected void onActivityResult(int requestCode, int resultCode, Intent data) { } } } + mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data ); } ``` diff --git a/docs/keyboardavoidingview.md b/docs/keyboardavoidingview.md index 8c1698774b7..2322b287ab7 100644 --- a/docs/keyboardavoidingview.md +++ b/docs/keyboardavoidingview.md @@ -28,12 +28,6 @@ import { KeyboardAvoidingView } from 'react-native'; - [`contentContainerStyle`](keyboardavoidingview.md#contentcontainerstyle) - [`enabled`](keyboardavoidingview.md#enabled) -### Methods - -* [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) -* [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) -* [`onLayout`](keyboardavoidingview.md#onlayout) - --- # Reference @@ -77,27 +71,3 @@ Enabled or disabled KeyboardAvoidingView. The default is `true`. | Type | Required | | ------- | -------- | | boolean | No | - -## Methods - -### `relativeKeyboardHeight()` - -```javascript -relativeKeyboardHeight(keyboardFrame: object): -``` - ---- - -### `onKeyboardChange()` - -```javascript -onKeyboardChange((event: object)); -``` - ---- - -### `onLayout()` - -```javascript -onLayout((event: ViewLayoutEvent)); -``` diff --git a/docs/layout-props.md b/docs/layout-props.md index cf516511c93..4e392ffa950 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -97,9 +97,9 @@ title: Layout Props ### `aspectRatio` -Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in react native and not CSS. +Aspect ratio controls the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in React Native and not CSS. -* On a node with a set width/height aspect ratio control the size of the unset dimension +* On a node with a set width/height aspect ratio controls the size of the unset dimension * On a node with a set flex basis aspect ratio controls the size of the node in the cross axis if unset * On a node with a measure function aspect ratio works as though the measure function measures the flex basis * On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis if unset @@ -189,9 +189,9 @@ It works similarly to `bottom` in CSS, but in React Native you must use points o See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -223,9 +223,9 @@ When the direction is `ltr`, `end` is equivalent to `right`. When the direction This style takes precedence over the `left` and `right` styles. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -249,9 +249,9 @@ flexGrow, flexShrink, and flexBasis work the same as in CSS. ### `flexBasis` -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -297,9 +297,9 @@ flexGrow, flexShrink, and flexBasis work the same as in CSS. It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -321,9 +321,9 @@ It works similarly to `left` in CSS, but in React Native you must use points or See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -331,9 +331,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -341,9 +341,9 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft `marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -351,9 +351,9 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -361,9 +361,9 @@ When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direct Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -371,9 +371,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -381,9 +381,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -391,9 +391,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -401,9 +401,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc `marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -411,9 +411,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -425,9 +425,9 @@ It works similarly to `max-height` in CSS, but in React Native you must use poin See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -439,9 +439,9 @@ It works similarly to `max-width` in CSS, but in React Native you must use point See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -453,9 +453,9 @@ It works similarly to `min-height` in CSS, but in React Native you must use poin See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -467,9 +467,9 @@ It works similarly to `min-width` in CSS, but in React Native you must use point See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -487,9 +487,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -497,9 +497,9 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB `paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -507,9 +507,9 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -517,9 +517,9 @@ When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When dire Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -527,9 +527,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi `paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -537,9 +537,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi `paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -547,9 +547,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -567,9 +567,9 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -597,9 +597,9 @@ It works similarly to `right` in CSS, but in React Native you must use points or See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -609,9 +609,9 @@ When the direction is `ltr`, `start` is equivalent to `left`. When the direction This style takes precedence over the `left`, `right`, and `end` styles. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -623,9 +623,9 @@ It works similarly to `top` in CSS, but in React Native you must use points or p See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -635,9 +635,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/docs/layoutanimation.md b/docs/layoutanimation.md index d549117b90f..e3005091ebb 100644 --- a/docs/layoutanimation.md +++ b/docs/layoutanimation.md @@ -73,12 +73,58 @@ static checkConfig(config, location, name) ## Properties +### Types + +An enumerate of animation types to be used in [`create`](layoutanimation.md#create) method. + +| Types | +| ------------- | +| spring | +| linear | +| easeInEaseOut | +| easeIn | +| easeOut | +| keyboard | + --- +### Properties + +An enumerate of object property to be animated, used in [`create`](layoutanimation.md#create) method. + +| Properties | +| ---------- | +| opacity | +| scaleX | +| scaleY | +| scaleXY | + --- +### Presets + +A set of predefined animation config. + +| Presets | Value | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')` | +| linear | `create(500, 'linear', 'opacity')` | +| spring | `{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }` | + --- +### easeInEaseOut + +Shortcut to bind `configureNext()` methods with `Presets.easeInEaseOut`. + --- +### linear + +Shortcut to bind `configureNext()` methods with `Presets.linear`. + --- + +### spring + +Shortcut to bind `configureNext()` methods with `Presets.spring`. diff --git a/docs/more-resources.md b/docs/more-resources.md index 31aa4b0f270..0e481a45724 100644 --- a/docs/more-resources.md +++ b/docs/more-resources.md @@ -38,4 +38,6 @@ The folks who built the app for Facebook's F8 conference also [open-sourced the [Yoga](https://yogalayout.com/) is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind. +[Bugsnag](https://www.bugsnag.com/), [Microsoft App Center](https://appcenter.ms/), and [Sentry](https://sentry.io/welcome/) all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience. + The [React Developer Tools](debugging.md#react-developer-tools) are great for debugging React and React Native apps. diff --git a/docs/native-components-ios.md b/docs/native-components-ios.md index 1142cf11c4f..473f7147306 100644 --- a/docs/native-components-ios.md +++ b/docs/native-components-ios.md @@ -122,7 +122,7 @@ var RNTMap = requireNativeComponent('RNTMap', MapView); module.exports = MapView; ``` -Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to `requireNativeComponent` from `null` to the new `MapView` wrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code. +Now we have a nicely documented wrapper component that is easy to work with. Note that we changed `requireNativeComponent`'s second argument from `null` to the new `MapView` wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code. Next, let's add the more complex `region` prop. We start by adding the native code: @@ -272,7 +272,7 @@ Until now we've just returned a `MKMapView` instance from our manager's `-(UIVie @end ``` -Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. +Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. ```objectivec{9,17,31-48} // RNTMapManager.m diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md index 5bdcd14ebbc..7e72693f58f 100644 --- a/docs/native-modules-android.md +++ b/docs/native-modules-android.md @@ -221,7 +221,7 @@ UIManager.measureLayout( }, (x, y, width, height) => { console.log(x + ':' + y + ':' + width + ':' + height); - } + }, ); ``` @@ -273,7 +273,7 @@ async function measureLayout() { try { var {relativeX, relativeY, width, height} = await UIManager.measureLayout( 100, - 100 + 100, ); console.log(relativeX + ':' + relativeY + ':' + width + ':' + height); diff --git a/docs/native-modules-ios.md b/docs/native-modules-ios.md index 3144d573345..1fb50b7fde4 100644 --- a/docs/native-modules-ios.md +++ b/docs/native-modules-ios.md @@ -120,7 +120,7 @@ You would then call this from JavaScript by using either: CalendarManager.addEvent( 'Birthday Party', '4 Privet Drive, Surrey', - date.getTime() + date.getTime(), ); // passing date as number of milliseconds since Unix epoch ``` @@ -130,7 +130,7 @@ or CalendarManager.addEvent( 'Birthday Party', '4 Privet Drive, Surrey', - date.toISOString() + date.toISOString(), ); // passing date as ISO-8601 string ``` diff --git a/docs/navigation.md b/docs/navigation.md index 98d07604607..8aca253b130 100644 --- a/docs/navigation.md +++ b/docs/navigation.md @@ -9,7 +9,7 @@ This guide covers the various navigation components available in React Native. I If you're only targeting iOS, you may want to also check out [NavigatorIOS](navigation.md#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 library provides native navigation on both platforms:[react-native-navigation](https://github.com/wix/react-native-navigation). +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 library provides native navigation on both platforms: [react-native-navigation](https://github.com/wix/react-native-navigation). ## React Navigation diff --git a/docs/network.md b/docs/network.md index 65f4d0b3fe1..17f6a9c1de5 100644 --- a/docs/network.md +++ b/docs/network.md @@ -60,7 +60,7 @@ You can also use the proposed ES2017 `async`/`await` syntax in a React Native ap async function getMoviesFromApi() { try { let response = await fetch( - 'https://facebook.github.io/react-native/movies.json' + 'https://facebook.github.io/react-native/movies.json', ); let responseJson = await response.json(); return responseJson.movies; diff --git a/docs/out-of-tree-platforms.md b/docs/out-of-tree-platforms.md index c5ed7efe957..b88f663e691 100644 --- a/docs/out-of-tree-platforms.md +++ b/docs/out-of-tree-platforms.md @@ -16,7 +16,15 @@ Right now the process of creating a React Native platform from scratch is not ve ### Bundling -As of React Native 0.57 you can now register your React Native platform with React Native's JavaScript bundler, [Metro](https://facebook.github.io/metro/). This means you can pass `--platform example` to `react-native bundle`, and it will look for JavaScript files with the `.example.js` suffix. To register your platform with RNPM, your module's name must start with a `react-native-` suffix. You must also have an entry in your `package.json` like this: +As of React Native 0.57 you can now register your React Native platform with React Native's JavaScript bundler, [Metro](https://facebook.github.io/metro/). This means you can pass `--platform example` to `react-native bundle`, and it will look for JavaScript files with the `.example.js` suffix. + +To register your platform with RNPM, your module's name must match one of these patterns: + +* `react-native-example` - It will search all top-level modules that start with `react-native-` +* `@org/react-native-example` - It will search for modules that start with `react-native-` under any scope +* `@react-native-example/module` - It will search in all modules under scopes with names starting with `@react-native-` + +You must also have an entry in your `package.json` like this: ```json { diff --git a/docs/permissionsandroid.md b/docs/permissionsandroid.md index 59274fb53ed..4ff0bb11324 100644 --- a/docs/permissionsandroid.md +++ b/docs/permissionsandroid.md @@ -32,7 +32,10 @@ async function requestCameraPermission() { { 'title': 'Cool Photo App Camera Permission', 'message': 'Cool Photo App needs access to your camera ' + - 'so you can take awesome pictures.' + 'so you can take awesome pictures.', + 'buttonNeutral': "Ask Me Later", + 'buttonNegative':"Cancel", + 'buttonPositive': "OK" } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { @@ -132,10 +135,20 @@ If `rationale` is provided, this function checks with the OS whether it is neces **Parameters:** -| Name | Type | Required | Description | -| ---------- | ------ | -------- | ------------------------------------ | -| permission | string | Yes | The permission to request. | -| rationale | object | No | Object with a `title` and `message`. | +| Name | Type | Required | Description | +| ---------- | ------ | -------- | -------------------------- | +| permission | string | Yes | The permission to request. | +| rationale | object | No | See `rationale` below. | + +**Rationale:** + +| Name | Type | Required | Description | +| -------------- | ------ | -------- | -------------------------------- | +| title | string | Yes | The title of the dialog. | +| message | string | Yes | The message of the dialog. | +| buttonPositive | string | Yes | The text of the positive button. | +| buttonNegative | string | No | The text of the negative button. | +| buttonNeutral | string | No | The text of the neutral button. | --- diff --git a/docs/picker-item.md b/docs/picker-item.md index 1437abfb000..b2567ac00e0 100644 --- a/docs/picker-item.md +++ b/docs/picker-item.md @@ -28,7 +28,7 @@ Text to display for this item. ### `color` -The value to be passed to picker's `onValueChange` callback when this item is selected. Can be a string or an integer. +Color of this item's text. | Type | Required | | ------------------ | -------- | @@ -44,7 +44,7 @@ Used to locate the item in end-to-end tests. ### `value` -Color of this item's text. +The value to be passed to picker's `onValueChange` callback when this item is selected. Can be a string or an integer. | Type | Required | Platform | | ---- | -------- | -------- | diff --git a/docs/props.md b/docs/props.md index cd2944fe488..32709fe4497 100644 --- a/docs/props.md +++ b/docs/props.md @@ -26,7 +26,7 @@ export default class Bananas extends Component { AppRegistry.registerComponent('AwesomeProject', () => Bananas); ``` -Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. +Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to `this.props` in your `render` function. Here's an example: diff --git a/docs/share.md b/docs/share.md index bdc0c45b16b..f8f48c6ab61 100644 --- a/docs/share.md +++ b/docs/share.md @@ -68,4 +68,42 @@ The content was successfully shared. static dismissedAction() ``` -The dialog has been dismissed. @platform ios +_iOS Only_. The dialog has been dismissed. + +## Basic Example + +```javascript +import React, {Component} from 'react' +import {Share, Button} from 'react-native' + +class ShareExample extends Component { + + async onShare = () => { + try { + const result = await Share.share({ + message: + 'React Native | A framework for building native apps using React', + }) + + if (result.action === Share.sharedAction) { + if (result.activityType) { + // shared with activity type of result.activityType + } else { + // shared + } + } else if (result.action === Share.dismissedAction) { + // dismissed + } + } catch (error) { + alert(error.message); + } + }; + + render() { + return ( + + ); + } + +} +``` diff --git a/docs/signed-apk-android.md b/docs/signed-apk-android.md index b385f673c84..0915a551469 100644 --- a/docs/signed-apk-android.md +++ b/docs/signed-apk-android.md @@ -91,7 +91,7 @@ Gradle's `assembleRelease` will bundle all the JavaScript needed to run your app > Note: Make sure gradle.properties does not include _org.gradle.configureondemand=true_ as that will make the release build skip bundling JS and assets into the APK. -The generated APK can be found under `android/app/build/outputs/apk/app-release.apk`, and is ready to be distributed. +The generated APK can be found under `android/app/build/outputs/apk/release/app-release.apk`, and is ready to be distributed. ### Testing the release build of your app diff --git a/docs/state.md b/docs/state.md index 451c56e233c..06406768de2 100644 --- a/docs/state.md +++ b/docs/state.md @@ -16,20 +16,23 @@ import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); - this.state = {isShowingText: true}; + this.state = { isShowingText: true }; // Toggle the state every second - setInterval(() => { - this.setState(previousState => { - return { isShowingText: !previousState.isShowingText }; - }); - }, 1000); + setInterval(() => ( + this.setState(previousState => ( + { isShowingText: !previousState.isShowingText } + )) + ), 1000); } render() { - let display = this.state.isShowingText ? this.props.text : ' '; + if (!this.state.isShowingText) { + return null; + } + return ( - {display} + {this.props.text} ); } } diff --git a/docs/style.md b/docs/style.md index f2ad674f2b9..68cd9579720 100644 --- a/docs/style.md +++ b/docs/style.md @@ -13,6 +13,17 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; +const styles = StyleSheet.create({ + bigblue: { + color: 'blue', + fontWeight: 'bold', + fontSize: 30, + }, + red: { + color: 'red', + }, +}); + export default class LotsOfStyles extends Component { render() { return ( @@ -26,17 +37,6 @@ export default class LotsOfStyles extends Component { } } -const styles = StyleSheet.create({ - bigblue: { - color: 'blue', - fontWeight: 'bold', - fontSize: 30, - }, - red: { - color: 'red', - }, -}); - // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); ``` diff --git a/docs/stylesheet.md b/docs/stylesheet.md index de8eea49c5a..13416b24604 100644 --- a/docs/stylesheet.md +++ b/docs/stylesheet.md @@ -37,11 +37,6 @@ Code quality: * By moving styles away from the render function, you're making the code easier to understand. * Naming the styles is a good way to add meaning to the low level components in the render function. -Performance: - -* Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. -* It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet). - ### Methods * [`setStyleAttributePreprocessor`](stylesheet.md#setstyleattributepreprocessor) @@ -152,7 +147,7 @@ A line with hairline width may not be visible if your simulator is downscaled. ### `absoluteFill` -A very common pattern is to create overlays with position absolute and zero positioning, so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. +A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. --- diff --git a/docs/switch.md b/docs/switch.md index 1dfcc58247d..55b7b1d3bcc 100644 --- a/docs/switch.md +++ b/docs/switch.md @@ -9,16 +9,16 @@ This is a controlled component that requires an `onValueChange` callback that up ### Props -- [View props...](view.md#props) +* [View props...](view.md#props) -* [`disabled`](switch.md#disabled) -* [`trackColor`](switch.md#trackColor) -* [`ios_backgroundColor`](switch.md#ios_backgroundColor) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`thumbColor`](switch.md#thumbColor) -* [`tintColor`](switch.md#tintcolor) -* [`value`](switch.md#value) +- [`disabled`](switch.md#disabled) +- [`trackColor`](switch.md#trackcolor) +- [`ios_backgroundColor`](switch.md#ios-backgroundcolor) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`thumbColor`](switch.md#thumbcolor) +- [`tintColor`](switch.md#tintcolor) +- [`value`](switch.md#value) --- @@ -38,9 +38,9 @@ If true the user won't be able to toggle the switch. Default value is false. ### `trackColor` -Custom colors for the switch track. `onTintColor` is now deprecated. +Custom colors for the switch track. -iOS: when the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). +_iOS_: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). | Type | Required | | ------------------------------------------------------------- | -------- | @@ -90,6 +90,8 @@ Color of the foreground switch grip. If this is set on iOS, the switch grip will ### `tintColor` +`tintColor` is deprecated, use `trackColor` instead. + Border color on iOS and background color on Android when the switch is turned off. | Type | Required | diff --git a/docs/text.md b/docs/text.md index edb3ad080d4..2ec1c188f31 100644 --- a/docs/text.md +++ b/docs/text.md @@ -62,7 +62,7 @@ export default class BoldAndBeautiful extends Component { render() { return ( - I am bold + I am bold and red @@ -118,7 +118,10 @@ The `` element is special relative to layout: everything inside is no long First part and second part -// Text container: all the text flows as if it was one +// Text container: the text will be inline if the space allowed it +// |First part and second part| + +// otherwise, the text will flow as if it was one // |First part | // |and second | // |part | @@ -128,6 +131,10 @@ The `` element is special relative to layout: everything inside is no long second part // View container: each text is its own block +// |First part and| +// |second part | + +// the will will flow in its own block // |First part | // |and | // |second part| diff --git a/docs/textinput.md b/docs/textinput.md index deeb3826975..0fe12052ca7 100644 --- a/docs/textinput.md +++ b/docs/textinput.md @@ -167,7 +167,7 @@ Specifies whether fonts should scale to respect Text Size accessibility settings ### `autoCapitalize` -Can tell `TextInput` to automatically capitalize certain characters. +Can tell `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`. * `characters`: all characters. * `words`: first letter of each word. @@ -222,7 +222,7 @@ If `true`, caret is hidden. The default value is `false`. ### `clearButtonMode` -When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. +When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`. | Type | Required | Platform | | ---------------------------------------------------------- | -------- | -------- | diff --git a/docs/toastandroid.md b/docs/toastandroid.md index 4fbe08467cf..b85a6a84cf5 100644 --- a/docs/toastandroid.md +++ b/docs/toastandroid.md @@ -15,35 +15,30 @@ The 'showWithGravityAndOffset' function adds on the ability to specify offset Th Basic usage: ```javascript -import { ToastAndroid } from 'react-native'; +import {ToastAndroid} from 'react-native'; ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ToastAndroid.showWithGravityAndOffset( 'A wild toast appeared!', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); ``` ### Advanced usage: -The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) -to expose a declarative component from it. See an example below: +The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below: ```javascript -import React, { Component } from 'react'; -import { - View, - Button, - ToastAndroid, -} from 'react-native'; +import React, {Component} from 'react'; +import {View, Button, ToastAndroid} from 'react-native'; // a component that calls the imperative ToastAndroid API const Toast = (props) => { @@ -53,7 +48,7 @@ const Toast = (props) => { ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); return null; } @@ -69,26 +64,26 @@ class App extends Component { } handleButtonPress = () => { - this.setState({ + this.setState( + { visible: true, - }, () => { - this.hideToast(); - }); + }, + () => { + this.hideToast(); + }, + ); }; hideToast = () => { this.setState({ - visible: false - }) - } + visible: false, + }); + }; render() { return ( - + - @@ -92,8 +90,8 @@ class AppList extends React.Component { _renderAppIcon(app) { let imgSource = app.icon; - if (!app.icon.startsWith("http")) { - imgSource = siteConfig.baseUrl + "img/showcase/" + app.icon; + if (!app.icon.startsWith('http')) { + imgSource = siteConfig.baseUrl + 'img/showcase/' + app.icon; } return {app.name}; } @@ -190,7 +188,7 @@ class AwkwardScrollingImageWithText extends Component { React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With [Hot - Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html), + Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading), you can even run new code while retaining your application state. Give it a try - it's a magical experience. @@ -255,10 +253,8 @@ class MiniShowcase extends React.Component {

Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be - accomplished with React Native,{" "} - - check out these apps - ! + accomplished with React Native,{' '} + check out these apps!

diff --git a/website/pages/en/showcase.js b/website/pages/en/showcase.js index 7b3c98325fe..ca7b969b302 100755 --- a/website/pages/en/showcase.js +++ b/website/pages/en/showcase.js @@ -1,16 +1,16 @@ /** - * Copyright (c) 2017-present, Facebook, Inc. + * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -const React = require("react"); +const React = require('react'); -const CompLibrary = require("../../core/CompLibrary.js"); +const CompLibrary = require('../../core/CompLibrary.js'); const Container = CompLibrary.Container; -const siteConfig = require(process.cwd() + "/siteConfig.js"); +const siteConfig = require(process.cwd() + '/siteConfig.js'); const showcaseApps = siteConfig.users; const pinnedApps = showcaseApps.filter(app => { @@ -55,8 +55,8 @@ class AppList extends React.Component { _renderAppIcon(app) { let imgSource = app.icon; - if (!app.icon.startsWith("http")) { - imgSource = siteConfig.baseUrl + "img/showcase/" + app.icon; + if (!app.icon.startsWith('http')) { + imgSource = siteConfig.baseUrl + 'img/showcase/' + app.icon; } return {app.name}; } @@ -90,20 +90,20 @@ class AppList extends React.Component { iOS ) : ( - "" + '' ); var linkPlayStore = app.linkPlayStore ? ( Android ) : ( - "" + '' ); return (

{linkAppStore} - {linkAppStore && linkPlayStore ? " · " : ""} + {linkAppStore && linkPlayStore ? ' · ' : ''} {linkPlayStore}

); @@ -114,7 +114,7 @@ class Showcase extends React.Component { render() { return (
- +

Who's using React Native?

@@ -144,7 +144,7 @@ class Showcase extends React.Component { } Showcase.defaultProps = { - language: "en" + language: 'en', }; module.exports = Showcase; diff --git a/website/pages/en/versions.js b/website/pages/en/versions.js index c31e64aebc2..f02d6394d85 100755 --- a/website/pages/en/versions.js +++ b/website/pages/en/versions.js @@ -1,46 +1,45 @@ /** - * Copyright (c) 2017-present, Facebook, Inc. + * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -const React = require("react"); +const React = require('react'); -const CompLibrary = require("../../core/CompLibrary.js"); +const CompLibrary = require('../../core/CompLibrary.js'); const Container = CompLibrary.Container; const CWD = process.cwd(); -const siteConfig = require(CWD + "/siteConfig.js"); -const versions = require(CWD + "/versions.json"); +const siteConfig = require(CWD + '/siteConfig.js'); +const versions = require(CWD + '/versions.json'); class VersionItem extends React.Component { render() { const version = this.props.version; - const versionName = version === "next" ? "Master" : version; + const versionName = version === 'next' ? 'Master' : version; const isCurrentVersion = this.props.currentVersion === version; - const isNext = version === "next"; - const isRC = version.toUpperCase().indexOf("-RC") !== -1; + const isNext = version === 'next'; + const isRC = version.toUpperCase().indexOf('-RC') !== -1; - const latestMajorVersion = versions[0].toUpperCase().replace("-RC", ""); + const latestMajorVersion = versions[0].toUpperCase().replace('-RC', ''); const documentationLink = ( + 'docs/' + + (isCurrentVersion ? '' : version + '/') + + 'getting-started.html' + }> Documentation ); - let releaseNotesURL = "https://github.com/facebook/react-native/releases"; - let releaseNotesTitle = "Changelog"; + let releaseNotesURL = 'https://github.com/facebook/react-native/releases'; + let releaseNotesTitle = 'Changelog'; if (isNext) { releaseNotesURL = `https://github.com/facebook/react-native/compare/${latestMajorVersion}-stable...master`; - releaseNotesTitle = "Commits since " + latestMajorVersion; + releaseNotesTitle = 'Commits since ' + latestMajorVersion; } else if (!isRC) { releaseNotesURL = `https://github.com/facebook/react-native/releases/tag/v${version}.0`; } @@ -60,11 +59,11 @@ class VersionItem extends React.Component { class Versions extends React.Component { render() { let currentVersion = versions.length > 0 ? versions[0] : null; - let latestVersions = ["next"].concat( - versions.filter(version => version.indexOf("-RC") !== -1) + let latestVersions = ['next'].concat( + versions.filter(version => version.indexOf('-RC') !== -1) ); const stableVersions = versions.filter( - version => version.indexOf("-RC") === -1 + version => version.indexOf('-RC') === -1 ); return ( @@ -76,21 +75,20 @@ class Versions extends React.Component { that is coordinated on GitHub through the + 'https://github.com/react-native-community/react-native-releases' + }> react-native-releases - {" "} + {' '} repository. At the beginning of each month, a new release candidate - is created off the master branch of{" "} - + is created off the master branch of{' '} + facebook/react-native . The release candidate will soak for a month to allow - contributors like yourself to{" "} - + contributors like yourself to{' '} + verify the changes - {" "} - and to identify any issues by{" "} + {' '} + and to identify any issues by{' '} writing clear, actionable bug reports . Eventually, the release candidate will be promoted to stable. @@ -108,7 +106,7 @@ class Versions extends React.Component { {latestVersions.map(function(version) { return ( Stable versions

The most recent stable version will be used automatically whenever a - new project is created using the react-native init{" "} + new project is created using the react-native init{' '} command.

@@ -128,7 +126,7 @@ class Versions extends React.Component { {stableVersions.map(function(version) { return ( VIYkFb_P9J+EO_bzi(#?J#qe|MYerG+5C zYhQ4K>4G?56h&`(wvW};SjLH*bu2nI@b5fcP1hJDBI zT$&jmVSstgu89jkA~p#$ww)IV1OU4*!{A2J-dw0+(V21y$sy!GK}u}zWl`bCisTB# zWpK(P4OTD9=0%Zx9+rD;3Z;S=Y4K+>k~=#Ep*rW=SC`6`&uh|UA=Q%Vz(%te>ObMA z=W6Pib9PMBr_9mq0*b6TpA38ldv-1m_5%B&6@4eirLPM_aOp#EM@m6oOg;ufYmRbO zC$iZz@G!|O08ro*=NQB`hinXC2dkhp>viw#Iq9$TsEoumya@nRb*@j%=%WA2o$dF3 zi$e<)vcsO@EM>aHEt8+pOxRa)7%=qx+w<1M&Cg-MnQ`%A?3Ot!2@7G?5jO*rifGhw zNv5tC6eCMUo}-Bcg1(+qiEa3eo@buv{bE5Qrdj=%HHK!2%B2i1#fd~*35G{_dnnLn zbb`zr?jrzz!1TYq1V(see`5v!qZ4!$07B(h3b^T5PNg8y1o|2rY)~xr_*QxJaus$J zzj@IYvvUAKPOaKNuej z?af{Y1r1n7EHbF}a;%R!?K#W!6b>NM87bK5Chl>;_@SE1T z!DXJl0xd$&4t{`d{B@mUoK=wfwf!o^DH`yZdoRn`jLvGeA0E9N)5y}r6p}t%Gl0(k z4MbzYVUsQ*3}zG!nR~xIpm{inUQ%J`wRq9gzI~lG`G;Ok9Kl4{kaCog$j{mJR}?i( zn70bGA{{10f;U|+31=W;dEhWeL&MLTBa%&u4A&$^R{yIxjqLeCkyV5m#UFqebk555 zo{|pzQAMvv&wT_8s_7TdYfpt{dBUmM-B5BmsatM(TL6%2Vkr2fN zK!eNy%XBCeyda!zU_>qwAc>C`xM-v#o4VRT)?1x+=C6P0Zs>AciK-nnHEgjmXS;Y~TR7qFi@@H8|>-A2j zmq$R0kndix5>&`o!Xzy3SO*R&qlHv-Wh;>%xOg39w^S zg$WlY_I^LyusjgWtete(FMMUn}vHnx--6zd7Tbxjl**i zwYk;kq@ea<^R58E6$?si9YXlIoL^?BYQuc;C;VS$Njjg^d2tT&2t03ESn(O(Di`tJ zZf>Hh$CaJ+!iWHCDZ2ZQGBfJzeO9s!otJB0JM%M8@c z$D!-xIz6r2bjpePA6Ue^8)pwP(|zdzIZ%h{O^4pQUl(|rZno@5<8#HWT=b7&E6Q30 zYqwoT%f&+Tlvb}pG_Pk*S^-DPhu_JAovq)K2sBkp`mvd(_0TxKROwbfb+5+1AOBdm zzr@6FqReJ5387A95@Zxn#FcM*Tp~K?O4bh%4#rPW`$*T1Fq7kLx0~bd;=`#g%_g!E zLaPq^XqSgieCO%tm3}=k?R|}gua$rsayfIimi|1Isl=7=E-@Gp*Ni-7h>c@6BH+dC z>L*6^%eEvC?d$j0U&Ot9_p@z}YXoYVG{sH4i`)cf^%ZA+<7IC<3%hYK<(H8c9=DNjVeC=Q@EAW{_j>;j(rVYi&_&s-u@a~ivl>^# zZoRT+LdOmW`}t2zok>ZQ3<-GN9!IO6UKeo@$bs-x)}r)q=W8qXjzazMLYLRa-sS{~ zzl{h>sE=D^zN)V33k3-qE{itmRqCVog$MPUU5*ceg|EL+vSw~Z`EO{8Amk#cei2R3 zCgNxoQ~I0B*Q~wJq&sqDMtS}r$LFBr48xgy%%zN8ghGO8nN)y~$Qs`7V*IteX8}oa z^ZJj4Kz*83-Xh1-uNX88 zGT%m=@E=Kp*V zOV$!Fz9?5#@QDXPYZhDhBQ?K%gC`$rpi8Ik#gF7Z_TssA|Jx_|KR*IEMW;0zGJeJ~ zJx^pjff@VXyP}dk_JxtPzLou4#!4PeU)*W_%O$Tfy(gHG7-|!zU(lwvYy`J0{PLBb z>37y$-h>n(s7+_I@Azi%?ZVWuna6Y0g&U^%tBcT*j=Q0Dal~V}8v%UUpTnEe@y2nQ zfm-y*)*fT!%O3VIUm;j(3M`@RK|x_J(%L!7yQga3D4J|MttH8c)z7fzRmj@=6Qlj{ z{<2cq@ikW3=6{WAk4oo|1)Jzp((EThV$z5|cDv+I1M;AL0Kn*DJSGXWVrker85y}J&K504~= zxU|*cOPt18d+jz9PK#qU<8t{C1fx4Fb_%a0JWL&TEJ*`2jdrR$=GvhkwcIc*Bftd3 zc?seRfwv}}#i1dtm~xl|0P3ChB$o@umHB`{fw_$asHZ6nL7>J2qeBTyHd8c0wZD!l zj515|${N)S%-{L@p7IEJ9=#*$e#Vk#$bS@FFt*f{jHa;CdA=mLE zLh{>*)!2|+ODcno$hlE6c} zsBM-koTEIhCHzlxg?ukIPU*jr#spO}acLILtCu1kCBLB7A`DEXQ^XIe*u}qIV!d$$ z+?X%Q0)Xr(uppJj54o&6-|*v8m&(tt>4Y@mCg*0aW~yXMk-yg?enTX)^z{3>IrS%p z)GV6F!BF)ewMCJRS6d8YgPg)5rRQ|-or>?a{_pK7H?x|z0y|Wf4&?84tSZ&-{I7$C z@77nBwv{nWxq{TKr3^IkMQ5b#s+`&$r zs7tP-WcnCyw@dbRr(w)B6Av&-U?RsQip`D|Tu&@+N1J0!IoYP$qw+q%wln>=)$Zm?nAp@X%OWXs zXF~xnZ-f=a<<5wQVp0Oe=|yW*o}{g)6y1@Mw+o)N*HqJkY2r?I^iB_p-T0iGk7Au$MN^1Qg^%3YcfAF5nuwNum0*vJOzr{1p6O5$&v+I!!L5C?}wWz+ur-0x%b zmQq=pP5wBYZ=?}!_*xO~JMpgehIjAcvK|T(6VqXh?I5bQ?F{G_FfJ~A82Z@gvCTJ@ z9gM8w)hJ1GbkyyQr+;pZQ6BLw-~zU^hhvev#^>17z`uZt!*J9 zu+NvvS6S2z)s*f}2pm#Ji-+DXlxuGxv^lSF@d1~se+8bxHAdWARkTzpR5rS>#B7Ra zPqunq8}?A>T7;7|pN;vPc|8*3 zNM`QS9AoAc)hxpWs>NiEzt|3UFjgqjNrw3F3{F<1uu-Q6t{=p?z2oG!Pgu1{$1>;3 zhWf0ZRV{4#p7n0N4OvNiP+!pcQ!8SMNqY)CJvEfO)z^U&H9>ve__S;?rHsm$U`rjo zJEc5_&LaKMo~wBL^no~w>URs-+x>yhnT}s!qok0Y$nx*xaO52!he-V(75qR&yntqn zZ*KH9wmQ&tIswzdAsBio@wF9yvVvVpF<+P{E9qOy;Dq1c;e;UPh=R4Z1SQD&Zn}aI zhj6P0Oqv1S{W4|cI~!ZaG596t`q3*9ztkpuh*pd4EZgsrFU@hQSit}A=jrC-IXuQA z6Gioi%8;ebG7|9U@qn{F-y~0^y-D9VGGq7pS-rxgUL%50OlhIw6B19>1_Nmx$DwNL zu7T&Hz}Y_!!Bux~ZHIT@#dfHJF;gNe#n91b32xW7oYCZ|+y3ssY1JaPl@aYja8;d{(R)_Bq=Te78jHSM-Lx7PPSUo&hR@xH{JW)(a0*fir*=6kI`{z53cOf?YlIh1r-z4wJ+MERnbr-3iye?3}P&qKXmBvFU(ig6`@@~SPEfG3Z&kR*4mNy^CvIEU)|9wpN=)Va;CJiSeH>fU0cFPZ z=vD?Ts)q!p*%~GPa$+pN=nTEj@5DY@u481h>bHkM)(^sZ6TcDq>V`KcA48V7aRrWiG$KkuKYNBU}Po}*DC<+fy@1Z6b-~f=B(UlG#fmHG9`@Hse6&N&We-sjoQvFqLM4T z{QGCBWN@*i`_^Qpa+K8LU7L-nNuCuPnsgM!(>aII0!ugwl+}(QV#tBf`lPKcWX_Q* z&8D}SSM`_4kw?Pd8daH)C-h~>xnDUpA~;tROC7UjeMn80b6=K`9hBWH;Ds)310jbZl$pzDH&gYvVlk7_b2i(a%W z>#De0n)crgb}QbtOqJ}^AN17aC*K=6dgvkdxq{#V={|`HZjt7wYpk_c0&|5^mL%Jh zJvMDkV-K~2u44k;XmjpQyc85SV)B1+>gy9P-Guxeh+{-7ql_+vYLub*f><=h>uvNB z4LYokFWslxrnc@ecikv3?o)4TK;=Yivf=(EN5<~yi|1Qd4Wg~klF|< zq_<;x+D$J(NhVt@DlEHi#7=BnhUc1pzsJ_igf0}XifIZynDsHfU42k`nUEs*>ETPN z0GT>GOJ3u{X_P~~lhw&jl?WqcxhpiiQ0T6Told*WuaROV4s!mq?S)`-@Kh z=NOWAj3W^mK_vAdkGXB7yT=q<_^cQ+3)wX!E?-KdcgH67U6killENE0S9#;~EFtP*A8IpsRPx58D z{-&4%C;&_%P&E8K>?cG5XOFoB3e5N=3NYPD)$Ib;*uLvrpAjt$Fhlffq4n_(U~bpd zaNScjs~i+25`;w*f!6zZ%TT!P^_~|F#U_Y&2Z-XMI$dmvuX4#?6!d9_lNfbqdhF)s z*tEH9B=hgO4ntm6>QwXdxb#Gz1=P=lq|@EMm7FgoBzo(2ez5&>Pt!I(Itfie7iMT~ zWN^@DS7Es$VRr{lu655!J2?RX{1adi(mrwX;ZY?A*A}=BjN2`y!u-R9fKacX=9>)G zkBIUh=*Lf;Ch5e1AchMUDF~rJQ@{VVuve3UH8Lg*2AB}ka47iN%V7)c9atuWlG;&! zQtdHNM?6ZGjByI=VUXUJ5g{ag`&PggDYlC`tc_BN?M6WQ_tSEX>v3KR2xiokO@Glw zLj41sP<9po$^=GYxs4dKA)(SU5#cccM#UIB$;Jb-cPf8CffACte`y5UG&O;xU51KX zk+a_JQI#~oiIh%jEnYkvH0Bm=LEQ~e<-q_Nc=ke=p!|^=Mj(4gPUohigt~QrE96VW z)H_K>I4hrN+~I0p#YD)|04l@ok8mp$MH2ZE8VWa_V8ep+;vQd&f04r46t1J@$EsOF z6E_r#8lVvXp4T*XSKqqXwumsT#21v{K2k4~En?2f;_#bSVvlHqSvy%qL@@b6pQpAc zq;y!)2s1Ybkbdo}@quIIukYzS$LGu*B_LWmb^YZrp3iE}#`E5K^(aFK&<03%($d-v zt2Ao0O%@Qsh$NR|GKpZ}5%S$#U%UxwCRl9!1v1A%-m*dn)U~aLpsdobUObdeZvRj) zd)cWtTsLfGQ|mNFFV-%h5b3r-DEzg~uvEA{zWF`?jBalq!&vijBH*CU53X_cQ4QTH zvReX!pu9j_H4G;caf1J7=-T~~?Wf0?r1qvwLAt;p1T&1U`i3L%5y~Pud8F=0P;MU; zp88#wDE1IO-Am@b*x@a?d@@Rm2ZjU1N_!og7#wdM^a}>FDu=!Fe^eP!JcncsFM;}q zLXZ;WD=v-feq6DBz(d*1-3C{#OQ`(>MdOo?va9)BEke-6^RUc7ZW^U}Rw3fL`+LOR zLM(xFRC_BP*5)`z39V%}&{se}4d)eiYPK2SPj9AK`# zA}no*ur;RA78iy5^f0foq7v&;5~7sQ%(Nw7;I+y~fY!qgVHagV##N|A%(+)(Z_#Gz zYXnTaBX9R|ChcIP3W&|0W#@{)H2P}hKxF&JHItxYSHZJm7i`IyKV)NAjMC@JUv_6^ zwAxTtcNNbM3|tEDwBJWE@r=D}h+>r5Md5btMUa#3>J*-vn=c}lv``|`R+1-asjnlypi1i{hmlFU;pJ7dm%?O3JMgE$GHD318{tGMfz&ClyMTpL{_I6+IZw?2MzVF_mI#4K` zl<|3;>#5<R@F(A^tEYKgxjejN6YC~s2Vaj!pz8HOe1J(zxSH8 z-HwPLhiyVsCt1CK%OlM*)=jTHxvZZveQ(G~F>iWaPh(zZLp1B)+$Rh%HNnh{thZ8?kePA$`fsPV#~ao7lSoxh8$R5^PPfaA zr-yws6u zgpVTF81ra?8i7GM?6)Fb%=>-yPzfNUNvSE$hM>>8xiQDM=%^Fd5O8i@ zutFmVIGvU~)35PtVswCa)rh!EyxAdnI~AWEe_!;h+7g=#2t+D0>K%)q$O~HU)EaDv zP+1uGDdSj0sG$ZL#@GDjtZzis2c@(Vm0F@_TT;eMfOQ>Hf1VM+q_7{;n<5q@Eq>)f z9bU}leY{OVZQ4^V0fiw26UfM5D^(#_=qw{k`B8}+TuhQKdry8)GJY){t9KVb;K+?2 zm4FSf+d^sulG~a}YuO6lk<2ITI}wf0+^l59Siu!zrR1~GQ1O`~>)_uI%ay~=%LuxN zO$@D9T%NKLG5OEW)K+WDC=vuB*UW;sBrRN0)vVx_TaGxoc<62^@|<{1*4Ijf;lAJ{ zq$HhrFF$7-%n7&L0o(t|DcCLPaN!D4)+Z2Z$d)m}eh%{D)DOFo4B#vYVb(sZrLDXF zd3!q8){M236J#U$prbH>&{(0&t?x!($vJ7;o{lXhH zTzGcHZh%e_=u{JOn@kA6`4(swF~X|*n5wmLc}uNM_^%t>QAl>Bw;WhvwUOQtO4{ z=q+E&@~=(QYW2}j$7Y2goIxp025~-Hk4F&^I2vGb?$(^0#DpL=aw0V>F`ZKt9I4eh ziH@s$18r>)4Zsg zw?Ckn^CePA=rIyCs{5wJx!zgvi6yGOn-a;$h`l*juZmC{w|ol8`}MmTdpay8#GEjQ zvycnGg}<0uD^e}JOTTDe9|eKdta!O672fU!(cCUPTv{5moTrl9=QlF8iiA5%)SQht z0HRSs5Au10Z-$C;TF;(WmW-T>wCo=^FT60g!`P406-;Laj(p3?DK5o&2_+=9)Y!lY zHRO`Y!eJnop~vG&w~s21Z>pra^`OL2oeaIQNU%m z$R?%m#6~2cjTs@k+mPawByG=5D^Xeyn^oj+9BdVN5lM1D_C{dnyfccpJja_;=yjT8 z1~Cx)O>@TfL^f*RjV`UlZG>i~9Jho%QR`JR5dX5WduSU_j7;e zGu|$B9Uh*l(Rh-%M^C|&D%T%Ou4mWK&|BMmHi1u-Cz9QQa^+~hLbQ=SsY$I6Q}@DE zMPz&y)ZNBtyjcBXixEGdlvAQv3K5LO#FWALV#+7m>`y;#|Jm2?aSEx%uW)71jN;+n z#CT!gvId)}S&TuBzSfa+3?ybm3aJ*Dh=s@>icB8fhdoo>>QJHs^sRv!X5Zx};wYw8UAzh(4 zd>L#f)ByYJ`C&#abChhR+w0Z8zb?+!QnI4D_VkjnWH=^4YxETuwj z4VOQdpw#mUv)<~pKd-zU*1DFBrmR?#%z{utDcf#-C`CjqSW;^~jh>KeVXCZNhloCOa*h+WHYVS{y@_ z{09Q;#Dz7h#+8!r(``U(OFc9-Eo=+&IPs-#(Vo%YHI`^yljSN`3YmaX($l zh91Y^+7VL=$D|>bj3H0jMms>Y3kZr3LCCLp_rp49LsU42ao~h5T6IuTAaELa{(yG! zk7vN%Pr)~a$iwfOA4;-GTqQx}FhrbQJS=m%#3Cng`PKTfm7AZ{g8tVVo$S9QzZB~( zCu*1iKbTIK^bB+4~K`<0lDqJ)irl9JKQUGGY z+_@@I9^pVO^3l>QqI$Ne?-z z2Mz`X8>!qA4>#1guyf1~*wzh$_>V^LG&pQhDzo zM2FVNXPKO~bb2h_oOJ-dOc#TT!!^g7dpHZp^^;Aq>WgmF96nW1D8#&Pabq0ikwA%T zAy`Er4z{cZqfxFZ`cSGR(-E7&6#%5EIIiAxezvekeh+Z^P^t?M3>76D2vw5NCV2D}X@aY^B24J58 z0Vr~@R6OE3;fxSZV(4%Kkz%oRS%F7bm@EO?VRCz?4M{d^0=0H_Qd#Kmn3>-atx>jy z-A)zA*xk>I96w=egQxd-w{tZiQ9VLF4o6Ep{bDtZFQblr{f5H8^pb8@>L~mPx~Oah zmGL=cI8?gbuu#TeII)OQkBQ!|FxQ@sfLy{_p1>gOu0Uk)$P|&cp?~c^vw^jz#s1gL zV!&IX4Snt4uVrO{e3+qp8jUa3L=RiO2nY*(42E`^II2pLNhrD67+Cb9q{gcKV)7=u z$vp(?D|@W-MT^vj!PUAtr@GovGJdBI`p>S$ zUd4yh;Zp&Uky@o4r$VPC2>N+f39YWJC?&@xbJo@jNSbdyc(S~mwjFAIMKM||oYUuM zkRE&fvzI>ZSbP7_)M;nzU6vuAs4uL9D#N0&8_CTUM3PRSQDDFcUTTlNCk`^sp>3eP z3Fg+88_rr?LkTN;s}OiRYw`KZsTEld_`Nd1y=rJ-uq;?S$7-1L{q3fy^REoYy6S}- zYH1_9r1Ou|0u)AFQ_-0Awi9b*L_)C%sEGo;*M`%^z48+3S&QpFqJh_mwki;)@LfX7 z)sx$GGX0?|7hx)nHxV;xva-c<9HSH1`kz^X%*EO_&> z0^_;1)4ufv;4R)v3P+9<;|@t(I+>3yI{%e-RcXt?GtJz0K@y+iyQomo@xslV9NN-&zoVpd()rdmAWh~~ND6uQ&4vs#kHj>-vpDXULtnfCtQc(Ff7h*g z`mSY;N>!P~crynF3|$EQ-Q=>DyW>j|e}}%_(hYBNkm9Fu9KBk1?rOR7cC&nn$P*+e z*U~U=aRjFamlOn{D4_nVJXgQ?SyDYnBCyt#@axh5cW@|C>hP!Dp!|}hM)PKt__J2~ zBgc-%>-UPK<(x2czSjOAzk?};r(_Jd31Xuk_nvq5&od!PFDm`J-7{#J>cq<*Kb=v; z1oo9#jO<#Y(9~I!P*6sy;zkTWYIK6tNp8&1B(7(Eb#BK!w52J3Uh-(u!bP(~ z7$du8_5aORKcWa^bUH;~XKU@|g9KdhtzDfL8S2Dag)Dqm@8;&e#WyMx(xTu7FjA@F zMq%Y=ZpZW*D$8_}WR}o2w@sobf+w{NVKM@2F4${ie&=E#r&<~=yX*!) z!%nl-4bdy>Y)O$RIbeY;dU6`wD4e9~loD1|S&iU^9>%Ee*dQ^9F#wi2AlIUB3WS#% zh@jfNFJ=TDvGQa`1d3ty3ALI9zwA#jL?gk7zpA8bn}XGskg{d?1{D*J%||H;fPz%w zMFHjD8iOh%CQX7+fC%o4e0FFSa|}G6gnFJw3p@!BPF+NQV8P$@b4tI|HEa&va3c@x zybosOsTe0+1ZA>;U~$-mjB3HP*9a5`QmhQ`Bg`Xp1?fW_0Eyg|jRO6Zwg~1+Wxjru zS(bb-^xC@j;Yk^jd&kWSzmreX+4#)`EMgRw8chfOceC!_fK{aIRQLJyng4zT zP`gQLyO|lgne&^vnExXHb{HEkGaHN<#;MNs?`1PDKPNjgjE5fv%l``-Zej%L;t cUjGvS { + const {version, asset} = opts; + const {id} = asset; + + const pathToDocVersion = `${pathToVersionedDocs}/version-${version}/${id}.md`; + const idForDocVersion = `version-${version}-${id}`; + + const data = fs.readFileSync(`${pathToDocs}/${id}.md`, 'utf8'); + const frontmatter = fm(data); + const title = frontmatter.attributes.title; + const body = frontmatter.body; + + const newData = `--- +id: ${idForDocVersion} +title: ${title} +original_id: ${id} +--- +${body}`; + + fs.writeFileSync(pathToDocVersion, newData); +}; + +const globAsync = (pattern, options) => + new Promise((resolve, reject) => { + glob(pattern, options, (err, files) => { + if (err) return reject(err); + resolve(files); + }); + }); + +const getBlacklistedAssetsInVersionedDocs = async () => { + let blacklistedAssetsFound = []; + const files = await globAsync(`${pathToVersionedDocs}/**/*.md`); + files.forEach(file => { + const data = fs.readFileSync(file, 'utf8'); + const frontmatter = fm(data); + const id = frontmatter.attributes.original_id; + const re = /\/version-(.+)\//; + const version = file.match(re)[1]; + if (version !== oldestVersion && blacklist.includes(id)) { + blacklistedAssetsFound.push({id, file, version}); + } + }); + + return blacklistedAssetsFound; +}; + +const getOriginalUnversionedAssets = async () => { + let assets = []; + const files = await globAsync(`${pathToDocs}/*.md`); + files.forEach(file => { + const data = fs.readFileSync(file, 'utf8'); + const frontmatter = fm(data); + const {id} = frontmatter.attributes; + if (blacklist.includes(id)) { + assets.push({id, file}); + } + }); + + return assets; +}; + +const syncGuides = async () => { + // delete unversioned docs that creep into `website/versioned_docs`... + const blacklistedAssetsFound = await getBlacklistedAssetsInVersionedDocs(); + blacklistedAssetsFound.forEach(asset => { + fs.removeSync(asset.file); + }); + + // ...then update the oldest version with whatever is in `docs/` master + const originalAssets = await getOriginalUnversionedAssets(); + originalAssets.forEach(asset => { + updateVersionWithAsset({ + version: oldestVersion, + asset, + }); + }); +}; + +syncGuides(); diff --git a/website/versioned_docs/version-0.12/animated.md b/website/versioned_docs/version-0.12/animated.md index 12bb5a2ccbe..cda2eca7229 100755 --- a/website/versioned_docs/version-0.12/animated.md +++ b/website/versioned_docs/version-0.12/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -344,7 +344,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.16/animated.md b/website/versioned_docs/version-0.16/animated.md index 27ea65908f3..09ffd3904d0 100755 --- a/website/versioned_docs/version-0.16/animated.md +++ b/website/versioned_docs/version-0.16/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -344,7 +344,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.18/animated.md b/website/versioned_docs/version-0.18/animated.md index 810b630df7d..84a7ceeb6be 100755 --- a/website/versioned_docs/version-0.18/animated.md +++ b/website/versioned_docs/version-0.18/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -366,7 +366,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.19/animated.md b/website/versioned_docs/version-0.19/animated.md index 49f004cb224..c305a51213d 100755 --- a/website/versioned_docs/version-0.19/animated.md +++ b/website/versioned_docs/version-0.19/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -366,7 +366,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.22/animated.md b/website/versioned_docs/version-0.22/animated.md index 7bc480e312f..ff1464d326b 100755 --- a/website/versioned_docs/version-0.22/animated.md +++ b/website/versioned_docs/version-0.22/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -377,7 +377,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.23/animated.md b/website/versioned_docs/version-0.23/animated.md index 807f52d0403..c4384c561ae 100755 --- a/website/versioned_docs/version-0.23/animated.md +++ b/website/versioned_docs/version-0.23/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -377,7 +377,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.34/animated.md b/website/versioned_docs/version-0.34/animated.md index f0be259151e..2f2bec52778 100755 --- a/website/versioned_docs/version-0.34/animated.md +++ b/website/versioned_docs/version-0.34/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -390,7 +390,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.35/toastandroid.md b/website/versioned_docs/version-0.35/toastandroid.md index fedc541d54e..7ae2c74229f 100755 --- a/website/versioned_docs/version-0.35/toastandroid.md +++ b/website/versioned_docs/version-0.35/toastandroid.md @@ -18,7 +18,7 @@ ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ``` diff --git a/website/versioned_docs/version-0.36/animated.md b/website/versioned_docs/version-0.36/animated.md index e3954174e97..96e38e03d8c 100755 --- a/website/versioned_docs/version-0.36/animated.md +++ b/website/versioned_docs/version-0.36/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -401,7 +401,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.37/alertios.md b/website/versioned_docs/version-0.37/alertios.md index 870b82e8787..dd9179d1bfb 100755 --- a/website/versioned_docs/version-0.37/alertios.md +++ b/website/versioned_docs/version-0.37/alertios.md @@ -77,7 +77,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -118,7 +118,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -132,7 +132,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/website/versioned_docs/version-0.39/animated.md b/website/versioned_docs/version-0.39/animated.md index 4db8cf16b1e..cb5556deb06 100755 --- a/website/versioned_docs/version-0.39/animated.md +++ b/website/versioned_docs/version-0.39/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -411,7 +411,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.42/alertios.md b/website/versioned_docs/version-0.42/alertios.md index 5d7d0431031..c42ead8c65a 100755 --- a/website/versioned_docs/version-0.42/alertios.md +++ b/website/versioned_docs/version-0.42/alertios.md @@ -77,7 +77,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -119,7 +119,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -133,7 +133,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/website/versioned_docs/version-0.42/animated.md b/website/versioned_docs/version-0.42/animated.md index 1f0ec136cf2..ed3cb06c9fb 100755 --- a/website/versioned_docs/version-0.42/animated.md +++ b/website/versioned_docs/version-0.42/animated.md @@ -20,7 +20,7 @@ class FadeInView extends React.Component { Animated.timing( // Uses easing functions this.state.fadeAnim, // The value to drive - {toValue: 1} // Configuration + {toValue: 1}, // Configuration ).start(); // Don't forget start! } render() { @@ -411,7 +411,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.43/accessibilityinfo.md b/website/versioned_docs/version-0.43/accessibilityinfo.md index 8b99cca233f..d4e98eab3fa 100755 --- a/website/versioned_docs/version-0.43/accessibilityinfo.md +++ b/website/versioned_docs/version-0.43/accessibilityinfo.md @@ -17,7 +17,7 @@ class ScreenReaderStatusExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); AccessibilityInfo.fetch().done((isEnabled) => { this.setState({ @@ -29,7 +29,7 @@ class ScreenReaderStatusExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } diff --git a/website/versioned_docs/version-0.43/animated.md b/website/versioned_docs/version-0.43/animated.md index 0b141e59906..161f6dcaf08 100755 --- a/website/versioned_docs/version-0.43/animated.md +++ b/website/versioned_docs/version-0.43/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -487,7 +487,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.44/alertios.md b/website/versioned_docs/version-0.44/alertios.md index 3f08e7ca26f..b732a80b047 100755 --- a/website/versioned_docs/version-0.44/alertios.md +++ b/website/versioned_docs/version-0.44/alertios.md @@ -77,7 +77,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -119,7 +119,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -133,7 +133,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/website/versioned_docs/version-0.44/animated.md b/website/versioned_docs/version-0.44/animated.md index bbea7ea5e2a..406e9ccf416 100755 --- a/website/versioned_docs/version-0.44/animated.md +++ b/website/versioned_docs/version-0.44/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -539,7 +539,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.46/accessibilityinfo.md b/website/versioned_docs/version-0.46/accessibilityinfo.md index 220cf8a78ba..3fb4cd935ec 100755 --- a/website/versioned_docs/version-0.46/accessibilityinfo.md +++ b/website/versioned_docs/version-0.46/accessibilityinfo.md @@ -17,7 +17,7 @@ class ScreenReaderStatusExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); AccessibilityInfo.fetch().done((isEnabled) => { this.setState({ @@ -29,7 +29,7 @@ class ScreenReaderStatusExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } diff --git a/website/versioned_docs/version-0.46/animated.md b/website/versioned_docs/version-0.46/animated.md index 52750c0203d..30d62920a23 100755 --- a/website/versioned_docs/version-0.46/animated.md +++ b/website/versioned_docs/version-0.46/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -541,7 +541,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.46/imagebackground.md b/website/versioned_docs/version-0.46/imagebackground.md new file mode 100644 index 00000000000..51214d5286f --- /dev/null +++ b/website/versioned_docs/version-0.46/imagebackground.md @@ -0,0 +1,54 @@ +--- +id: version-0.46-imagebackground +title: ImageBackground +original_id: imagebackground +--- + +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. + +Note that you must specify some width and height style attributes. + +## Example + +``` +return ( + + Inside + +); +``` + +### Props + +* [`Image` props...](image.md#props) +* [`style`](imagebackground.md#style) +* [`imageStyle`](imagebackground.md#imageStyle) +* [`imageRef`](imagebackground.md#imageRef) + +--- + +# Reference + +## Props + +### `style` + +| Type | Required | +| ---------------------------------- | -------- | +| [view styles](view-style-props.md) | No | + +### `imageStyle` + +| Type | Required | +| ------------------------------------ | -------- | +| [image styles](image-style-props.md) | No | + +### `imageRef` + +Allows to set a reference to the inner `Image` component + +| Type | Required | +| ----------------------------------------------------- | -------- | +| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | No | diff --git a/website/versioned_docs/version-0.48/animated.md b/website/versioned_docs/version-0.48/animated.md index 8ac67dee605..415e827a6b7 100755 --- a/website/versioned_docs/version-0.48/animated.md +++ b/website/versioned_docs/version-0.48/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -541,7 +541,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.49/alertios.md b/website/versioned_docs/version-0.49/alertios.md index da3fd2fc0c0..4e835715595 100755 --- a/website/versioned_docs/version-0.49/alertios.md +++ b/website/versioned_docs/version-0.49/alertios.md @@ -77,7 +77,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -119,7 +119,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -133,7 +133,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/website/versioned_docs/version-0.49/animated.md b/website/versioned_docs/version-0.49/animated.md index 1533c0c618d..f257d0d33de 100755 --- a/website/versioned_docs/version-0.49/animated.md +++ b/website/versioned_docs/version-0.49/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` diff --git a/website/versioned_docs/version-0.49/toastandroid.md b/website/versioned_docs/version-0.49/toastandroid.md index 3e0b22250d9..e03d24bffb1 100755 --- a/website/versioned_docs/version-0.49/toastandroid.md +++ b/website/versioned_docs/version-0.49/toastandroid.md @@ -20,14 +20,14 @@ ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ToastAndroid.showWithGravityAndOffset( 'A wild toast appeared!', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); ``` diff --git a/website/versioned_docs/version-0.5/accessibility.md b/website/versioned_docs/version-0.5/accessibility.md index a9aa40fd2ab..4e6af833f36 100755 --- a/website/versioned_docs/version-0.5/accessibility.md +++ b/website/versioned_docs/version-0.5/accessibility.md @@ -33,12 +33,12 @@ In the above example, we can't get accessibility focus separately on 'text one' 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: +To use, set the `accessibilityLabel` property to a custom string on your View, Text or Touchable: ```javascript Press me! @@ -48,8 +48,65 @@ To use, set the `accessibilityLabel` property to a custom string on your View: 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. +#### accessibilityHint (iOS, Android) + +An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. + +To use, set the `accessibilityHint` property to a custom string on your View, Text or Touchable: + +```javascript + + + Back + + +``` + +iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the [iOS Developer Docs](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint) + +Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android. + +#### accessibilityIgnoresInvertColors(iOS) + +Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted. + +#### accessibilityRole (iOS, Android) + +> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. + +Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings: + +* **none** Used when the element has no role. +* **button** Used when the element should be treated as a button. +* **link** Used when the element should be treated as a link. +* **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. +* **keyboardkey** Used when the element acts as a keyboard key. +* **text** Used when the element should be treated as static text that cannot change. +* **adjustable** Used when an element can be "adjusted" (e.g. a slider). +* **imagebutton** Used when the element should be treated as a button and is also an image. +* **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar). +* **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. + +#### accessibilityStates (iOS, Android) + +> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. + +Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both: + +* **selected** Used when the element is in a selected state. For example, a button is selected. +* **disabled** Used when the element is disabled and cannot be interacted with. + +To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both. + #### accessibilityTraits (iOS) +> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. + 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: @@ -94,6 +151,8 @@ Assign this property to a custom function which will be called when someone perf #### accessibilityComponentType (Android) +> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. + 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. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’. ```javascript @@ -174,7 +233,7 @@ _onPress: function() { } ``` diff --git a/website/versioned_docs/version-0.5/accessibilityinfo.md b/website/versioned_docs/version-0.5/accessibilityinfo.md index 619cfb3b233..bb8f10cf35c 100755 --- a/website/versioned_docs/version-0.5/accessibilityinfo.md +++ b/website/versioned_docs/version-0.5/accessibilityinfo.md @@ -17,7 +17,7 @@ class ScreenReaderStatusExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); AccessibilityInfo.fetch().done((isEnabled) => { this.setState({ @@ -29,7 +29,7 @@ class ScreenReaderStatusExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } diff --git a/website/versioned_docs/version-0.5/alertios.md b/website/versioned_docs/version-0.5/alertios.md index 5091e894aff..e404ee51286 100755 --- a/website/versioned_docs/version-0.5/alertios.md +++ b/website/versioned_docs/version-0.5/alertios.md @@ -43,7 +43,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -64,7 +64,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -76,7 +76,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` @@ -126,7 +126,7 @@ AlertIOS.prompt( [callbackOrButtons], [type], [defaultValue], - [keyboardType] + [keyboardType], ); ``` diff --git a/website/versioned_docs/version-0.5/animated.md b/website/versioned_docs/version-0.5/animated.md index e09722f2f2d..dc8d8e5d887 100755 --- a/website/versioned_docs/version-0.5/animated.md +++ b/website/versioned_docs/version-0.5/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -254,7 +254,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.5/animatedvaluexy.md b/website/versioned_docs/version-0.5/animatedvaluexy.md index 8275c86f6fe..d0797d444f3 100755 --- a/website/versioned_docs/version-0.5/animatedvaluexy.md +++ b/website/versioned_docs/version-0.5/animatedvaluexy.md @@ -29,7 +29,7 @@ class DraggableView extends React.Component { onPanResponderRelease: () => { Animated.spring( this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero + {toValue: {x: 0, y: 0}}, // Back to zero ).start(); }, }); diff --git a/website/versioned_docs/version-0.5/animations.md b/website/versioned_docs/version-0.5/animations.md index b1094f8b51f..7f234254e4d 100755 --- a/website/versioned_docs/version-0.5/animations.md +++ b/website/versioned_docs/version-0.5/animations.md @@ -165,7 +165,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t }} ``` -[`interpolate()`](animated.md#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: +[`interpolate()`](animated.md#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a 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({ @@ -272,7 +272,7 @@ Animated.timing(this.state.animatedValue, { 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. +The native driver also works with `Animated.event`. This is especially 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} diff --git a/website/versioned_docs/version-0.5/building-for-apple-tv.md b/website/versioned_docs/version-0.5/building-for-apple-tv.md index a59e0413494..d8a8fd18866 100755 --- a/website/versioned_docs/version-0.5/building-for-apple-tv.md +++ b/website/versioned_docs/version-0.5/building-for-apple-tv.md @@ -1,6 +1,6 @@ --- id: version-0.5-building-for-apple-tv -title: Building For Apple TV +title: Building For TV Devices original_id: building-for-apple-tv --- @@ -140,19 +140,19 @@ var running_on_android_tv = Platform.isTV; * _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS. -* _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight` and `TouchableOpacity` will "just work". In particular: +* _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will "just work". In particular: - * `touchableHandleActivePressIn` will be executed when the touchable view goes into focus - * `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus - * `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + * `onFocus` will be executed when the touchable view goes into focus + * `onBlur` will be executed when the touchable view goes out of focus + * `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. -* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will "just work". In particular: +* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will "just work". In particular: - * `touchableHandleActivePressIn` will be executed when the touchable view goes into focus - * `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus - * `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + * `onFocus` will be executed when the touchable view goes into focus + * `onBlur` will be executed when the touchable view goes out of focus + * `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. @@ -215,7 +215,7 @@ class Game2048 extends React.Component { -* _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, make a long press on the play/pause button on the remote. (Please do not shake the Android TV device, that will not work :) ) +* _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) ) diff --git a/website/versioned_docs/version-0.5/building-from-source.md b/website/versioned_docs/version-0.5/building-from-source.md index 47b190dd69f..38e60e8d8c3 100755 --- a/website/versioned_docs/version-0.5/building-from-source.md +++ b/website/versioned_docs/version-0.5/building-from-source.md @@ -42,15 +42,15 @@ Example: ``` sdk.dir=/Users/your_unix_name/android-sdk-macosx -ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e +ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r17b ``` #### Download links for Android NDK -1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip -2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip -3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip -4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip +1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r17b-darwin-x86_64.zip +2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r17b-linux-x86_64.zip +3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r17b-windows-x86_64.zip +4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r17b-windows-x86.zip You can find further instructions on the [official page](https://developer.android.com/ndk/index.html). @@ -73,7 +73,7 @@ Add `gradle-download-task` as dependency in `android/build.gradle`: ```gradle ... dependencies { - classpath 'com.android.tools.build:gradle:1.3.1' + classpath 'com.android.tools.build:gradle:2.3.3' classpath 'de.undercouch:gradle-download-task:3.1.2' // NOTE: Do not place your application dependencies here; they belong @@ -95,15 +95,15 @@ project(':ReactAndroid').projectDir = new File( ... ``` -Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `compile 'com.facebook.react:react-native:+'` with `compile project(':ReactAndroid')`: +Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `implementation 'com.facebook.react:react-native:+'` with `implementation project(':ReactAndroid')`: ```gradle ... dependencies { - compile fileTree(dir: 'libs', include: ['*.jar']) - compile 'com.android.support:appcompat-v7:26.0.2' + implementation fileTree(dir: 'libs', include: ['*.jar']) + implementation 'com.android.support:appcompat-v7:26.0.2' - compile project(':ReactAndroid') + implementation project(':ReactAndroid') ... } diff --git a/website/versioned_docs/version-0.5/custom-webview-android.md b/website/versioned_docs/version-0.5/custom-webview-android.md index 35c726e23e0..00c444c36a4 100755 --- a/website/versioned_docs/version-0.5/custom-webview-android.md +++ b/website/versioned_docs/version-0.5/custom-webview-android.md @@ -196,7 +196,7 @@ export default class CustomWebView extends Component { const RCTCustomWebView = requireNativeComponent( 'RCTCustomWebView', CustomWebView, - WebView.extraNativeComponentConfig + WebView.extraNativeComponentConfig, ); ``` @@ -254,6 +254,6 @@ const RCTCustomWebView = requireNativeComponent( ...WebView.extraNativeComponentConfig.nativeOnly, onScrollToBottom: true, }, - } + }, ); ``` diff --git a/website/versioned_docs/version-0.5/custom-webview-ios.md b/website/versioned_docs/version-0.5/custom-webview-ios.md index 4c847bd7029..c54d31a75db 100755 --- a/website/versioned_docs/version-0.5/custom-webview-ios.md +++ b/website/versioned_docs/version-0.5/custom-webview-ios.md @@ -169,7 +169,7 @@ export default class CustomWebView extends Component { const RCTCustomWebView = requireNativeComponent( 'RCTCustomWebView', CustomWebView, - WebView.extraNativeComponentConfig + WebView.extraNativeComponentConfig, ); ``` @@ -228,6 +228,6 @@ const RCTCustomWebView = requireNativeComponent( ...WebView.extraNativeComponentConfig.nativeOnly, onScrollToBottom: true, }, - } + }, ); ``` diff --git a/website/versioned_docs/version-0.5/debugging.md b/website/versioned_docs/version-0.5/debugging.md index 0f485ad88f9..61612621818 100755 --- a/website/versioned_docs/version-0.5/debugging.md +++ b/website/versioned_docs/version-0.5/debugging.md @@ -74,6 +74,19 @@ The debugger will receive a list of all project roots, separated by a space. For > Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output. +## Safari Developer Tools + +You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely". + +* Enable Develop menu in Safari: `Preferences → Advanced → Select "Show Develop menu in menu bar"` +* Select your app's JSContext: `Develop → Simulator → JSContext` +* Safari's Web Inspector should open which has a Console and a Debugger + +However, there are some disadvantages: + +1. No sourcemaps when debugging +2. Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually. + ## 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: @@ -96,7 +109,7 @@ It should connect to your simulator within a few seconds. ### 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: +Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it: ![React Native Inspector](/react-native/docs/assets/Inspector.gif) @@ -104,7 +117,7 @@ However, when `react-devtools` is running, Inspector will enter a special collap ![React DevTools Inspector Integration](/react-native/docs/assets/ReactDevToolsInspector.gif) -You can choose "Hide Inspector" in the same menu to exit this mode. +You can choose "Toggle Inspector" in the same menu to exit this mode. ### Inspecting Component Instances @@ -130,7 +143,7 @@ You can enable a performance overlay to help you debug performance problems by s

Projects with Native Code Only

The remainder of this guide only applies to projects made with react-native init - or to those made with Create React Native App which have since ejected. For + or to those made with expo init or Create React Native App which have since ejected. For more information about ejecting, please see the guide on the Create React Native App repository. @@ -148,11 +161,11 @@ $ 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. +> If you're using Create React Native App or Expo CLI, 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. +> If you're using Create React Native App or Expo CLI, 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. diff --git a/website/versioned_docs/version-0.5/direct-manipulation.md b/website/versioned_docs/version-0.5/direct-manipulation.md index 103795bfe7a..5a14bcc1e3f 100755 --- a/website/versioned_docs/version-0.5/direct-manipulation.md +++ b/website/versioned_docs/version-0.5/direct-manipulation.md @@ -55,7 +55,7 @@ render() { This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity. -If you look at the implementation of `setNativeProps` in [NativeMethodsMixin.js](https://github.com/facebook/react/blob/master/src/renderers/native/NativeMethodsMixin.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent.js](https://github.com/facebook/react/blob/master/src/renderers/native/ReactNativeBaseComponent.js). +If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/master/Libraries/Renderer/oss/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent.js](https://github.com/facebook/react/blob/master/src/renderers/native/ReactNativeBaseComponent.js). ## Composite components and setNativeProps diff --git a/website/versioned_docs/version-0.5/flexbox.md b/website/versioned_docs/version-0.5/flexbox.md index 379bbf38100..09db16b3673 100755 --- a/website/versioned_docs/version-0.5/flexbox.md +++ b/website/versioned_docs/version-0.5/flexbox.md @@ -85,11 +85,11 @@ export default class AlignItemsBasics extends Component { flex: 1, flexDirection: 'column', justifyContent: 'center', - alignItems: 'center', + alignItems: 'stretch', }}> - - + + ); } diff --git a/website/versioned_docs/version-0.5/getting-started.md b/website/versioned_docs/version-0.5/getting-started.md index 69881946404..4a07da8ec71 100755 --- a/website/versioned_docs/version-0.5/getting-started.md +++ b/website/versioned_docs/version-0.5/getting-started.md @@ -157,7 +157,7 @@ If you're integrating React Native into an existing project, you'll want to skip -

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo/a> or Create React Native App, you'll need this section.

+

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo or Create React Native App, you'll need this section.

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different. @@ -292,7 +292,7 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho ### Java Development Kit -React Native requires a recent version of the Java SE Development Kit (JDK). [Download and install Oracle JDK 8 or newer](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if needed. You can also use [OpenJDK 8 or newer](http://openjdk.java.net/install/) as an alternative. +React Native requires a recent version of the Java SE Development Kit (JDK). [Download and install Oracle JDK 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if needed. You can also use [OpenJDK 8](http://openjdk.java.net/install/) as an alternative. @@ -329,7 +329,7 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t #### 2. Install the Android SDK -Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 6.0 (Marshmallow)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. +Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 8.1 (Oreo)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager". @@ -345,47 +345,15 @@ The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Cli > The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. -Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 6.0 (Marshmallow)` entry, then make sure the following items are all checked: +Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 8.1 (Oreo)` entry, then make sure the following items are checked: -* `Google APIs` -* `Android SDK Platform 23` -* `Intel x86 Atom_64 System Image` -* `Google APIs Intel x86 Atom_64 System Image` +* `Android SDK Platform 27` +* `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image` - - -![Android SDK Manager](/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png) - - - -![Android SDK Manager](/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png) - - - -Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `23.0.1` is selected. - - - -![Android SDK Manager - 23.0.1 Build Tools](/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png) - - - -![Android SDK Manager - 23.0.1 Build Tools](/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png) - - +Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `27.0.3` is selected. Finally, click "Apply" to download and install the Android SDK and related build tools. - - -![Android SDK Manager - Installs](/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png) - - - -![Android SDK Manager - Installs](/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png) - - - #### 3. Configure the ANDROID_HOME environment variable The React Native tools require some environment variables to be set up in order to build apps with native code. @@ -398,6 +366,7 @@ Add the following lines to your `$HOME/.bash_profile` config file: ``` export ANDROID_HOME=$HOME/Library/Android/sdk +export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools @@ -407,6 +376,7 @@ export PATH=$PATH:$ANDROID_HOME/platform-tools ``` export ANDROID_HOME=$HOME/Android/Sdk +export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools @@ -482,23 +452,11 @@ If you have a physical Android device, you can use it for development in place o ### Using a virtual device -You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this: +If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this: ![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedAndroidStudioAVD.png) -If you have just installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next". - - - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedCreateAVDWindows.png) - - - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedCreateAVDMacOS.png) - - - -Select the "x86 Images" tab, then look for the **Marshmallow** API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target. +If you have just installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Oreo** API Level 27 image. @@ -506,20 +464,12 @@ Select the "x86 Images" tab, then look for the **Marshmallow** API Level 23, x86 -![Install HAXM](/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png) - > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. -![AVD List](/react-native/docs/assets/GettingStartedAVDManagerWindows.png) - -![Install HAXM](/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png) - > If you don't have HAXM installed, follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS) to set it up, then go back to the AVD Manager. -![AVD List](/react-native/docs/assets/GettingStartedAVDManagerMacOS.png) - Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. diff --git a/website/versioned_docs/version-0.5/handling-touches.md b/website/versioned_docs/version-0.5/handling-touches.md index fe0df9fe5ac..6bae9dc6f00 100755 --- a/website/versioned_docs/version-0.5/handling-touches.md +++ b/website/versioned_docs/version-0.5/handling-touches.md @@ -79,7 +79,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between' } -}) +}); // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics); @@ -169,7 +169,7 @@ const styles = StyleSheet.create({ padding: 20, color: 'white' } -}) +}); // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => Touchables); diff --git a/website/versioned_docs/version-0.5/headless-js-android.md b/website/versioned_docs/version-0.5/headless-js-android.md index f564db0688b..9a15df2c90c 100755 --- a/website/versioned_docs/version-0.5/headless-js-android.md +++ b/website/versioned_docs/version-0.5/headless-js-android.md @@ -22,7 +22,7 @@ module.exports = async (taskData) => { }; ``` -You can do anything in your task as long as it doesn't touch UI: network requests, timers and so on. Once your task completes (i.e. the promise is resolved), React Native will go into "paused" mode (unless there are other tasks running, or there is a foreground app). +You can do anything in your task such as network requests, timers and so on, as long as it doesn't touch UI. Once your task completes (i.e. the promise is resolved), React Native will go into "paused" mode (unless there are other tasks running, or there is a foreground app). ## The Java API diff --git a/website/versioned_docs/version-0.5/height-and-width.md b/website/versioned_docs/version-0.5/height-and-width.md index 15c80920b07..33830b63cd0 100755 --- a/website/versioned_docs/version-0.5/height-and-width.md +++ b/website/versioned_docs/version-0.5/height-and-width.md @@ -34,7 +34,7 @@ Setting dimensions this way is common for components that should always render a ## Flex Dimensions -Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings. +Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings. > A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible. diff --git a/website/versioned_docs/version-0.5/images.md b/website/versioned_docs/version-0.5/images.md index fbc94ef8a31..58a06fe4be8 100755 --- a/website/versioned_docs/version-0.5/images.md +++ b/website/versioned_docs/version-0.5/images.md @@ -20,6 +20,7 @@ You can also use the `@2x` and `@3x` suffixes to provide images for different sc . ├── button.js └── img + ├── check.png ├── check@2x.png └── check@3x.png ``` @@ -67,7 +68,7 @@ Note that image sources required this way include size (width, height) info for 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/react-native/blob/master/local-cli/util/Config.js#L68) 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/metro/blob/master/packages/metro/src/defaults.js#L14-L44) for the full list of configuration options). +You can add support for other types by creating a packager config file (see the [packager config file](https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44) 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. @@ -132,7 +133,7 @@ Sometimes, you might be getting encoded image data from a REST API call. You can style={{ width: 51, height: 51, - resizeMode: Image.resizeMode.contain, + resizeMode: 'contain', }} source={{ uri: @@ -196,7 +197,7 @@ On the user side, this lets you annotate the object with useful attributes such 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. +You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [documentation](imagebackground.md) for more insight, and create your own custom component when needed. ```javascript return ( diff --git a/website/versioned_docs/version-0.5/integration-with-existing-apps.md b/website/versioned_docs/version-0.5/integration-with-existing-apps.md index 67105604fd2..69157f60f78 100755 --- a/website/versioned_docs/version-0.5/integration-with-existing-apps.md +++ b/website/versioned_docs/version-0.5/integration-with-existing-apps.md @@ -563,9 +563,9 @@ Add the React Native dependency to your app's `build.gradle` file: ``` dependencies { - compile 'com.android.support:appcompat-v7:23.0.1' + implementation 'com.android.support:appcompat-v7:27.1.1' ... - compile "com.facebook.react:react-native:+" // From node_modules + implementation "com.facebook.react:react-native:+" // From node_modules } ``` @@ -664,7 +664,7 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { } ``` -Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. +Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use `startActivityForResult`, we need to pass the result to the `onActivityResult` method of our `ReactInstanceManager` instance. ```java @Override @@ -676,6 +676,7 @@ protected void onActivityResult(int requestCode, int resultCode, Intent data) { } } } + mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data ); } ``` diff --git a/website/versioned_docs/version-0.5/maintainers.md b/website/versioned_docs/version-0.5/maintainers.md index 95d93a8112c..cbb92fdd6dd 100755 --- a/website/versioned_docs/version-0.5/maintainers.md +++ b/website/versioned_docs/version-0.5/maintainers.md @@ -83,7 +83,7 @@ You can generally figure out who may be relevant for a given issue by looking at ### 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. +Issues in the "Needs more information" state may be closed after a week with no followup from the author. Issues that 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: diff --git a/website/versioned_docs/version-0.5/more-resources.md b/website/versioned_docs/version-0.5/more-resources.md index 0641f6ad149..0a9a58ba549 100755 --- a/website/versioned_docs/version-0.5/more-resources.md +++ b/website/versioned_docs/version-0.5/more-resources.md @@ -25,7 +25,7 @@ The folks who built the app for Facebook's F8 conference also [open-sourced the * Fellow developers write and publish React Native modules to npm and open source them on GitHub. * Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm. * Read the guides on Native Modules ([iOS](native-modules-ios.md), [Android](native-modules-android.md)) and Native UI Components ([iOS](native-components-ios.md), [Android](native-components-android.md)) if you are interested in extending native functionality. -* Looking for a pre-built component? Check [JS.coach](https://js.coach/react-native). +* Looking for a pre-built component? Check [JS.coach](https://js.coach/react-native) or [Native Directory](https://native.directory/) to find what the community has been creating. ## Development Tools @@ -33,20 +33,10 @@ The folks who built the app for Facebook's F8 conference also [open-sourced the [Ignite](https://github.com/infinitered/ignite) is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you. -[CodePush](https://microsoft.github.io/code-push/) is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give CodePush a try. +[App Center](https://appcenter.ms/) is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try. [Expo](https://docs.expo.io) is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo. -The [React Developer Tools](debugging.md#react-developer-tools) are great for debugging React and React Native apps. - -## Where React Native People Hang Out - -The [forum at discuss.reactjs.org](https://discuss.reactjs.org/) is a great place for discussion about best practices and application architecture as well as the future of React Native. - -[Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) is a Discord chat where a lot of React-related discussion happens, including React Native. Discord is just like Slack except it works better for open source projects with a zillion contributors. Check out the #react-native channel. +[Yoga](https://yogalayout.com/) is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind. -The [React Twitter account](https://twitter.com/reactjs) covers both React and React Native. Follow the React Native [Twitter account](https://twitter.com/reactnative) and [blog](/react-native/blog/) to find out what's happening in the world of React Native. - -There are a lot of [React Native Meetups](http://www.meetup.com/topics/react-native/) that happen around the world. Often there is React Native content in React meetups as well. - -Sometimes we have React conferences. We posted the [videos from React.js Conf 2017](https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0), [React.js Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY), and [React.js Conf 2015](https://www.youtube.com/watch?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr&v=KVZ-P-ZI6W4). We'll probably have more conferences in the future, too. Stay tuned. You can also find a list of dedicated React Native conferences [here](http://www.awesome-react-native.com/#conferences). +The [React Developer Tools](debugging.md#react-developer-tools) are great for debugging React and React Native apps. diff --git a/website/versioned_docs/version-0.5/native-components-android.md b/website/versioned_docs/version-0.5/native-components-android.md index 6b32d50027b..48fa8029092 100755 --- a/website/versioned_docs/version-0.5/native-components-android.md +++ b/website/versioned_docs/version-0.5/native-components-android.md @@ -97,28 +97,24 @@ The final Java step is to register the ViewManager to the application, this happ ## 5. Implement the JavaScript module -The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the `propTypes`. +The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments). ```javascript // ImageView.js -import PropTypes from 'prop-types'; -import {requireNativeComponent, ViewPropTypes} from 'react-native'; - -var iface = { - name: 'ImageView', - propTypes: { - src: PropTypes.string, - borderRadius: PropTypes.number, - resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']), - ...ViewPropTypes, // include the default view properties - }, -}; +import {requireNativeComponent} from 'react-native'; -module.exports = requireNativeComponent('RCTImageView', iface); +/** + * Composes `View`. + * + * - src: string + * - borderRadius: number + * - resizeMode: 'cover' | 'contain' | 'stretch' + */ +module.exports = requireNativeComponent('RCTImageView'); ``` -`requireNativeComponent` commonly takes two parameters, the first is the name of the native view and the second is an object that describes the component interface. The component interface should declare a friendly `name` for use in debug messages and must declare the `propTypes` reflected by the Native View. The `propTypes` are used for checking the validity of a user's use of the native view. Note that if you need your JavaScript component to do more than just specify a name and propTypes, like do custom event handling, you can wrap the native component in a normal react component. In that case, you want to pass in the wrapper component instead of `iface` to `requireNativeComponent`. This is illustrated in the `MyCustomView` example below. +The `requireNativeComponent` function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the `MyCustomView` example below. # Events @@ -184,9 +180,5 @@ MyCustomView.propTypes = { ... }; -var RCTMyCustomView = requireNativeComponent(`RCTMyCustomView`, MyCustomView, { - nativeOnly: {onChange: true} -}); +var RCTMyCustomView = requireNativeComponent(`RCTMyCustomView`); ``` - -Note the use of `nativeOnly` above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, `Switch` has a custom `onChange` handler for the raw native event, and exposes an `onValueChange` handler property that is invoked with just the boolean value rather than the raw event (similar to `onChangeMessage` in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in `propTypes`, but if you don't you'll get an error. The solution is simply to call them out via the `nativeOnly` option. diff --git a/website/versioned_docs/version-0.5/native-components-ios.md b/website/versioned_docs/version-0.5/native-components-ios.md index fadba7c6f3e..bfa194efa65 100755 --- a/website/versioned_docs/version-0.5/native-components-ios.md +++ b/website/versioned_docs/version-0.5/native-components-ios.md @@ -123,7 +123,7 @@ var RNTMap = requireNativeComponent('RNTMap', MapView); module.exports = MapView; ``` -Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to `requireNativeComponent` from `null` to the new `MapView` wrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code. +Now we have a nicely documented wrapper component that is easy to work with. Note that we changed `requireNativeComponent`'s second argument from `null` to the new `MapView` wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code. Next, let's add the more complex `region` prop. We start by adding the native code: @@ -273,7 +273,7 @@ Until now we've just returned a `MKMapView` instance from our manager's `-(UIVie @end ``` -Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. +Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. ```objectivec{9,17,31-48} // RNTMapManager.m diff --git a/website/versioned_docs/version-0.5/native-modules-android.md b/website/versioned_docs/version-0.5/native-modules-android.md index 30931814ff4..a30df6b4a26 100755 --- a/website/versioned_docs/version-0.5/native-modules-android.md +++ b/website/versioned_docs/version-0.5/native-modules-android.md @@ -141,6 +141,12 @@ public class CustomToastPackage implements ReactPackage { The package needs to be provided in the `getPackages` method of the `MainApplication.java` file. This file exists under the android folder in your react-native application directory. The path to this file is: `android/app/src/main/java/com/your-app-name/MainApplication.java`. ```java +// MainApplication.java + +... +import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name. +... + protected List getPackages() { return Arrays.asList( new MainReactPackage(), @@ -216,7 +222,7 @@ UIManager.measureLayout( }, (x, y, width, height) => { console.log(x + ':' + y + ':' + width + ':' + height); - } + }, ); ``` @@ -268,7 +274,7 @@ async function measureLayout() { try { var {relativeX, relativeY, width, height} = await UIManager.measureLayout( 100, - 100 + 100, ); console.log(relativeX + ':' + relativeY + ':' + width + ':' + height); diff --git a/website/versioned_docs/version-0.5/native-modules-ios.md b/website/versioned_docs/version-0.5/native-modules-ios.md index a460e6177dd..c5659c30ad6 100755 --- a/website/versioned_docs/version-0.5/native-modules-ios.md +++ b/website/versioned_docs/version-0.5/native-modules-ios.md @@ -4,7 +4,7 @@ title: Native Modules original_id: native-modules-ios --- -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. +Sometimes an app needs to access a 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. We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself. @@ -121,7 +121,7 @@ You would then call this from JavaScript by using either: CalendarManager.addEvent( 'Birthday Party', '4 Privet Drive, Surrey', - date.getTime() + date.getTime(), ); // passing date as number of milliseconds since Unix epoch ``` @@ -131,7 +131,7 @@ or CalendarManager.addEvent( 'Birthday Party', '4 Privet Drive, Surrey', - date.toISOString() + date.toISOString(), ); // passing date as ISO-8601 string ``` diff --git a/website/versioned_docs/version-0.5/navigation.md b/website/versioned_docs/version-0.5/navigation.md index c0146bb3c8b..c98361d6920 100755 --- a/website/versioned_docs/version-0.5/navigation.md +++ b/website/versioned_docs/version-0.5/navigation.md @@ -6,11 +6,11 @@ original_id: navigation 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](navigation.md#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/redux-integration.html). +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](navigation.md#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. If you're only targeting iOS, you may want to also check out [NavigatorIOS](navigation.md#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). +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 library provides native navigation on both platforms: [react-native-navigation](https://github.com/wix/react-native-navigation). ## React Navigation @@ -58,7 +58,7 @@ class HomeScreen extends React.Component { } ``` -React Navigation routers make it easy to override navigation logic or integrate it into redux. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes. +React Navigation routers make it easy to override navigation logic. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes. The views in React Navigation use native components and the [`Animated`](animated.md) library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized. diff --git a/website/versioned_docs/version-0.5/network.md b/website/versioned_docs/version-0.5/network.md index 967e740f13f..f440ba09523 100755 --- a/website/versioned_docs/version-0.5/network.md +++ b/website/versioned_docs/version-0.5/network.md @@ -61,7 +61,7 @@ You can also use the proposed ES2017 `async`/`await` syntax in a React Native ap async function getMoviesFromApi() { try { let response = await fetch( - 'https://facebook.github.io/react-native/movies.json' + 'https://facebook.github.io/react-native/movies.json', ); let responseJson = await response.json(); return responseJson.movies; @@ -119,7 +119,7 @@ export default class FetchExample extends React.Component { {item.title}, {item.releaseYear}} - keyExtractor={(item, index) => index} + keyExtractor={({id}, index) => id} /> ); diff --git a/website/versioned_docs/version-0.5/performance.md b/website/versioned_docs/version-0.5/performance.md index a268e00c10d..e2c7a76a518 100755 --- a/website/versioned_docs/version-0.5/performance.md +++ b/website/versioned_docs/version-0.5/performance.md @@ -254,13 +254,13 @@ Notice that first the JS thread thinks for a bit, then you see some work done on There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly. -## Unbundling + inline requires +## RAM bundles + inline requires -If you have a large app you may want to consider unbundling and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the unbundle feature of the packager and requiring those features and screens inline (when they are actually used). +If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used). ### Loading JavaScript -Before react-native can execute JS code, that code must be loaded into memory and parsed. With a standard bundle if you load a 50mb bundle, all 50mb must be loaded and parsed before any of it can be executed. The optimization behind unbundling is that you can load only the portion of the 50mb that you actually need at startup, and progressively load more of the bundle as those sections are needed. +Before react-native can execute JS code, that code must be loaded into memory and parsed. With a standard bundle if you load a 50mb bundle, all 50mb must be loaded and parsed before any of it can be executed. The optimization behind RAM bundles is that you can load only the portion of the 50mb that you actually need at startup, and progressively load more of the bundle as those sections are needed. ### Inline Requires @@ -318,25 +318,25 @@ export default class Optimized extends Component { } ``` -Even without unbundling inline requires can lead to startup time improvements, because the code within VeryExpensive.js will only execute once it is required for the first time. +Even without the RAM format, inline requires can lead to startup time improvements, because the code within VeryExpensive.js will only execute once it is required for the first time. -### Enable Unbundling +### Enable the RAM format -On iOS unbundling will create a single indexed file that react native will load one module at a time. On Android, by default it will create a set of files for each module. You can force Android to create a single file, like iOS, but using multiple files can be more performant and requires less memory. +On iOS using the RAM format will create a single indexed file that react native will load one module at a time. On Android, by default it will create a set of files for each module. You can force Android to create a single file, like iOS, but using multiple files can be more performant and requires less memory. -Enable unbundling in Xcode by editing the build phase "Bundle React Native code and images". Before `../node_modules/react-native/packager/react-native-xcode.sh` add `export BUNDLE_COMMAND="unbundle"`: +Enable the RAM format in Xcode by editing the build phase "Bundle React Native code and images". Before `../node_modules/react-native/scripts/react-native-xcode.sh` add `export BUNDLE_COMMAND="ram-bundle"`: ``` -export BUNDLE_COMMAND="unbundle" +export BUNDLE_COMMAND="ram-bundle" export NODE_BINARY=node -../node_modules/react-native/packager/react-native-xcode.sh +../node_modules/react-native/scripts/react-native-xcode.sh ``` -On Android enable unbundling by editing your android/app/build.gradle file. Before the line `apply from: "../../node_modules/react-native/react.gradle"` add or amend the `project.ext.react` block: +On Android enable the RAM format by editing your `android/app/build.gradle` file. Before the line `apply from: "../../node_modules/react-native/react.gradle"` add or amend the `project.ext.react` block: ``` project.ext.react = [ - bundleCommand: "unbundle", + bundleCommand: "ram-bundle", ] ``` @@ -344,14 +344,14 @@ Use the following lines on Android if you want to use a single indexed file: ``` project.ext.react = [ - bundleCommand: "unbundle", - extraPackagerArgs: ["--indexed-unbundle"] + bundleCommand: "ram-bundle", + extraPackagerArgs: ["--indexed-ram-bundle"] ] ``` ### Configure Preloading and Inline Requires -Now that we have unbundled our code, there is overhead for calling require. require now needs to send a message over the bridge when it encounters a module it has not loaded yet. This will impact startup the most, because that is where the largest number of require calls are likely to take place while the app loads the initial module. Luckily we can configure a portion of the modules to be preloaded. In order to do this, you will need to implement some form of inline require. +Now that we have a RAM bundle, there is overhead for calling `require`. `require` now needs to send a message over the bridge when it encounters a module it has not loaded yet. This will impact startup the most, because that is where the largest number of require calls are likely to take place while the app loads the initial module. Luckily we can configure a portion of the modules to be preloaded. In order to do this, you will need to implement some form of inline require. ### Adding a packager config file @@ -359,10 +359,12 @@ Create a folder in your project called packager, and create a single file named ``` const config = { - getTransformOptions: () => { - return { - transform: { inlineRequires: true }, - }; + transformer: { + getTransformOptions: () => { + return { + transform: { inlineRequires: true }, + }; + }, }, }; @@ -372,17 +374,17 @@ module.exports = config; In Xcode, in the build phase, include `export BUNDLE_CONFIG="packager/config.js"`. ``` -export BUNDLE_COMMAND="unbundle" +export BUNDLE_COMMAND="ram-bundle" export BUNDLE_CONFIG="packager/config.js" export NODE_BINARY=node -../node_modules/react-native/packager/react-native-xcode.sh +../node_modules/react-native/scripts/react-native-xcode.sh ``` Edit your android/app/build.gradle file to include `bundleConfig: "packager/config.js",`. ``` project.ext.react = [ - bundleCommand: "unbundle", + bundleCommand: "ram-bundle", bundleConfig: "packager/config.js" ] ``` @@ -415,7 +417,7 @@ console.log( waitingModuleNames.length ); -// grab this text blob, and put it in a file named packager/moduleNames.js +// grab this text blob, and put it in a file named packager/modulePaths.js console.log(`module.exports = ${JSON.stringify(loadedModuleNames.sort())};`); ``` @@ -429,64 +431,7 @@ require.Systrace.beginEvent = (message) => { } ``` -Every app is different, but it may make sense to only load the modules you need for the very first screen. When you are satisified, put the output of the loadedModuleNames into a file named packager/moduleNames.js. - -### Transforming to Module Paths - -The loaded module names get us part of the way there, but we actually need absolute module paths, so the next script will set that up. Add `packager/generateModulePaths.js` to your project with the following: - -``` -// @flow -/* eslint-disable no-console */ -const execSync = require('child_process').execSync; -const fs = require('fs'); -const moduleNames = require('./moduleNames'); - -const pjson = require('../package.json'); -const localPrefix = `${pjson.name}/`; - -const modulePaths = moduleNames.map(moduleName => { - if (moduleName.startsWith(localPrefix)) { - return `./${moduleName.substring(localPrefix.length)}`; - } - if (moduleName.endsWith('.js')) { - return `./node_modules/${moduleName}`; - } - try { - const result = execSync( - `grep "@providesModule ${moduleName}" $(find . -name ${moduleName}\\\\.js) -l` - ) - .toString() - .trim() - .split('\n')[0]; - if (result != null) { - return result; - } - } catch (e) { - return null; - } - return null; -}); - -const paths = modulePaths - .filter(path => path != null) - .map(path => `'${path}'`) - .join(',\n'); - -const fileData = `module.exports = [${paths}];`; - -fs.writeFile('./packager/modulePaths.js', fileData, err => { - if (err) { - console.log(err); - } - - console.log('Done'); -}); -``` - -You can run via `node packager/generateModulePaths.js`. - -This script attempts to map from the module names to module paths. Its not foolproof though, for instance, it ignores platform specific files (\*ios.js, and \*.android.js). However based on initial testing, it handles 95% of cases. When it runs, after some time it should complete and output a file named `packager/modulePaths.js`. It should contain paths to module files that are relative to your projects root. You can commit modulePaths.js to your repo so it is transportable. +Every app is different, but it may make sense to only load the modules you need for the very first screen. When you are satisified, put the output of the loadedModuleNames into a file named `packager/modulePaths.js`. ### Updating the config.js @@ -497,26 +442,31 @@ const modulePaths = require('./modulePaths'); const resolve = require('path').resolve; const fs = require('fs'); +// Update the following line if the root folder of your app is somewhere else. +const ROOT_FOLDER = path.resolve(__dirname, '..'); + const config = { - getTransformOptions: () => { - const moduleMap = {}; - modulePaths.forEach(path => { - if (fs.existsSync(path)) { - moduleMap[resolve(path)] = true; - } - }); - return { - preloadedModules: moduleMap, - transform: { inlineRequires: { blacklist: moduleMap } }, - }; + transformer: { + getTransformOptions: () => { + const moduleMap = {}; + modulePaths.forEach(path => { + if (fs.existsSync(path)) { + moduleMap[resolve(path)] = true; + } + }); + return { + preloadedModules: moduleMap, + transform: { inlineRequires: { blacklist: moduleMap } }, + }; + }, }, }; module.exports = config; ``` -The preloadedModules entry in the config indicates which modules should be marked as preloaded by the unbundler. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The blacklist entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced. +The `preloadedModules` entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The blacklist entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced. ### Test and Measure Improvements -You should now be ready to build your app using unbundling and inline requires. Make sure you measure the before and after startup times. +You should now be ready to build your app using the RAM format and inline requires. Make sure you measure the before and after startup times. diff --git a/website/versioned_docs/version-0.5/permissionsandroid.md b/website/versioned_docs/version-0.5/permissionsandroid.md index c37920211fb..8b07d7f31af 100755 --- a/website/versioned_docs/version-0.5/permissionsandroid.md +++ b/website/versioned_docs/version-0.5/permissionsandroid.md @@ -35,7 +35,7 @@ async function requestCameraPermission() { message: 'Cool Photo App needs access to your camera ' + 'so you can take awesome pictures.', - } + }, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('You can use the camera'); diff --git a/website/versioned_docs/version-0.5/platform-specific-code.md b/website/versioned_docs/version-0.5/platform-specific-code.md index 07c8f984a70..1341677b7de 100755 --- a/website/versioned_docs/version-0.5/platform-specific-code.md +++ b/website/versioned_docs/version-0.5/platform-specific-code.md @@ -103,3 +103,5 @@ const BigButton = require('./BigButton'); ``` React Native will automatically pick up the right file based on the running platform. + +If you share your React Native code with a website, you might as well use the `BigButton.native.js` so that both iOS and Android will use this file, while the website will use `BigButton.js`. diff --git a/website/versioned_docs/version-0.5/props.md b/website/versioned_docs/version-0.5/props.md index 1ea9d1984f7..06d263f1abb 100755 --- a/website/versioned_docs/version-0.5/props.md +++ b/website/versioned_docs/version-0.5/props.md @@ -27,7 +27,7 @@ export default class Bananas extends Component { AppRegistry.registerComponent('AwesomeProject', () => Bananas); ``` -Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. +Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to `this.props` in your `render` function. Here's an example: @@ -38,7 +38,9 @@ import { AppRegistry, Text, View } from 'react-native'; class Greeting extends Component { render() { return ( - Hello {this.props.name}! + + Hello {this.props.name}! + ); } } diff --git a/website/versioned_docs/version-0.5/running-on-device.md b/website/versioned_docs/version-0.5/running-on-device.md index c180baf75fe..adbc22b0f10 100755 --- a/website/versioned_docs/version-0.5/running-on-device.md +++ b/website/versioned_docs/version-0.5/running-on-device.md @@ -75,7 +75,7 @@ original_id: running-on-device It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production. -If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the [Getting Started guide](getting-started.md). +If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the [Getting Started guide](getting-started.md).
@@ -108,7 +108,7 @@ If you used Create React Native App to set up your project, you can preview your -A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the [Quick Start instructions](getting-started.md) to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app. +A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the [Quick Start instructions](getting-started.md) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. @@ -353,10 +353,14 @@ To configure your app to be built using the `Release` scheme, go to **Product** During the development process, React Native has loaded your JavaScript code dynamically at runtime. For a production build, you want to pre-package the JavaScript bundle and distribute it inside your application. Doing this requires a code change in your code so that it knows to load the static bundle. -In `AppDelegate.m`, change the default `jsCodeLocation` to point to the static bundle that is built in Release. +In `AppDelegate.m`, change `jsCodeLocation` to point to the static bundle if you're not in debug mode. ```objc +#ifdef DEBUG + jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; +#else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; +#endif ``` This will now reference the `main.jsbundle` resource file that is created during the `Bundle React Native code and images` Build Phase in Xcode. diff --git a/website/versioned_docs/version-0.5/signed-apk-android.md b/website/versioned_docs/version-0.5/signed-apk-android.md index 40e04c4f75b..e54fe5ca217 100755 --- a/website/versioned_docs/version-0.5/signed-apk-android.md +++ b/website/versioned_docs/version-0.5/signed-apk-android.md @@ -12,16 +12,28 @@ You can generate a private signing key using `keytool`. On Windows `keytool` mus $ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 -This command prompts you for passwords for the keystore and key, and to provide the Distinguished Name fields for your key. It then generates the keystore as a file called `my-release-key.keystore`. +This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called `my-release-key.keystore`. The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias. -On Mac if you not sure where is your jdk bin folder is then perform the following command to find it, `$ /usr/libexec/java_home` it will output the directroy of jdk which looks like this, `/Library/Java/JavaVirtualMachines/jdk1.8.0_161.jdk/Contents/Home` then navigate to that directory by the following command, `$ cd /Library/Java/JavaVirtualMachines/jdk1.8.0_161.jdk/Contents/Home/` Now you can perform the keytool command with sudo permission as shown below, `$ sudo keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000` _Note: Remember to keep your keystore file private and never commit it to version control._ +On Mac, if you're not sure where your jdk bin folder is, then perform the following command to find it: + + $ /usr/libexec/java_home + +It will output the directory of the jdk, which will look something like this: + + /Library/Java/JavaVirtualMachines/jdkX.X.X_XXX.jdk/Contents/Home + +Navigate to that directory by using the command `$ cd /your/jdk/path` and use the keytool command with sudo permission as shown below. + + $ sudo keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 + +_Note: Remember to keep your keystore file private and never commit it to version control._ ### Setting up gradle variables 1. Place the `my-release-key.keystore` file under the `android/app` directory in your project folder. -2. Edit the file `~/.gradle/gradle.properties` or `android/gradle.properties` and add the following (replace `*****` with the correct keystore password, alias and key password), +2. Edit the file `~/.gradle/gradle.properties` or `android/gradle.properties`, and add the following (replace `*****` with the correct keystore password, alias and key password), ``` MYAPP_RELEASE_STORE_FILE=my-release-key.keystore @@ -36,11 +48,11 @@ These are going to be global gradle variables, which we can later use in our gra > Once you publish the app on the Play Store, you will need to republish your app under a different package name (losing all downloads and ratings) if you want to change the signing key at any point. So backup your keystore and don't forget the passwords. -_Note about security: If you are not keen on storing your passwords in plaintext and you are running OSX, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`._ +_Note about security: If you are not keen on storing your passwords in plaintext, and you are running OSX, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`._ ### Adding signing config to your app's gradle config -Edit the file `android/app/build.gradle` in your project folder and add the signing config, +Edit the file `android/app/build.gradle` in your project folder, and add the signing config, ```gradle ... @@ -78,9 +90,9 @@ $ ./gradlew assembleRelease Gradle's `assembleRelease` will bundle all the JavaScript needed to run your app into the APK. If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at `android/app/build.gradle` to see how you can update it to reflect these changes. -> Note: Make sure gradle.properties does not include _org.gradle.configureondemand=true_ as that will make release build skip bundling JS and assets into the APK. +> Note: Make sure gradle.properties does not include _org.gradle.configureondemand=true_ as that will make the release build skip bundling JS and assets into the APK. -The generated APK can be found under `android/app/build/outputs/apk/app-release.apk`, and is ready to be distributed. +The generated APK can be found under `android/app/build/outputs/apk/release/app-release.apk`, and is ready to be distributed. ### Testing the release build of your app @@ -92,7 +104,7 @@ $ react-native run-android --variant=release Note that `--variant=release` is only available if you've set up signing as described above. -You can kill any running packager instances, all your framework and JavaScript code is bundled in the APK's assets. +You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets. ### Split APKs by ABI to reduce file size @@ -101,11 +113,14 @@ By default, the generated APK has the native code for both x86 and ARMv7a CPU ar You can create an APK for each CPU by changing the following line in android/app/build.gradle: ```diff +- ndk { +- abiFilters "armeabi-v7a", "x86" +- } - def enableSeparateBuildPerCPUArchitecture = false + def enableSeparateBuildPerCPUArchitecture = true ``` -Upload both these files to markets which support device targetting, such as [Google Play](https://developer.android.com/google/play/publishing/multiple-apks.html) and [Amazon AppStore](https://developer.amazon.com/docs/app-submission/getting-started-with-device-targeting.html) and the users will automatically get the appropriate APK. If you want to upload to other markets such as [APKFiles](https://www.apkfiles.com/), which do not support multiple APKs for a single app, change the following line as well to create the default universal APK with binaries for both CPUs. +Upload both these files to markets which support device targetting, such as [Google Play](https://developer.android.com/google/play/publishing/multiple-apks.html) and [Amazon AppStore](https://developer.amazon.com/docs/app-submission/getting-started-with-device-targeting.html), and the users will automatically get the appropriate APK. If you want to upload to other markets, such as [APKFiles](https://www.apkfiles.com/), which do not support multiple APKs for a single app, change the following line as well to create the default universal APK with binaries for both CPUs. ```diff - universalApk false // If true, also generate a universal APK diff --git a/website/versioned_docs/version-0.5/state.md b/website/versioned_docs/version-0.5/state.md index 16aa033c0d9..a18dc66cece 100755 --- a/website/versioned_docs/version-0.5/state.md +++ b/website/versioned_docs/version-0.5/state.md @@ -17,20 +17,23 @@ import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); - this.state = {isShowingText: true}; + this.state = { isShowingText: true }; // Toggle the state every second - setInterval(() => { - this.setState(previousState => { - return { isShowingText: !previousState.isShowingText }; - }); - }, 1000); + setInterval(() => ( + this.setState(previousState => ( + { isShowingText: !previousState.isShowingText } + )) + ), 1000); } render() { - let display = this.state.isShowingText ? this.props.text : ' '; + if (!this.state.isShowingText) { + return null; + } + return ( - {display} + {this.props.text} ); } } diff --git a/website/versioned_docs/version-0.5/style.md b/website/versioned_docs/version-0.5/style.md index b4ab65277a8..c5839ae68b1 100755 --- a/website/versioned_docs/version-0.5/style.md +++ b/website/versioned_docs/version-0.5/style.md @@ -14,6 +14,17 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; +const styles = StyleSheet.create({ + bigblue: { + color: 'blue', + fontWeight: 'bold', + fontSize: 30, + }, + red: { + color: 'red', + }, +}); + export default class LotsOfStyles extends Component { render() { return ( @@ -27,17 +38,6 @@ export default class LotsOfStyles extends Component { } } -const styles = StyleSheet.create({ - bigblue: { - color: 'blue', - fontWeight: 'bold', - fontSize: 30, - }, - red: { - color: 'red', - }, -}); - // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); ``` diff --git a/website/versioned_docs/version-0.5/testing.md b/website/versioned_docs/version-0.5/testing.md index 6ec4cd71190..0f481eeab91 100755 --- a/website/versioned_docs/version-0.5/testing.md +++ b/website/versioned_docs/version-0.5/testing.md @@ -15,7 +15,7 @@ Whenever you are fixing a bug or adding new functionality to React Native, you s * [iOS](testing.md#ios) * [Apple TV](testing.md#apple-tv) * [End-to-end tests](testing.md#end-to-end-tests) -* [Website](testing.md#website) +* [Updating the Documentation](testing.md#updating-the-documentation) ## JavaScript @@ -50,7 +50,7 @@ javac 1.8.0_111 The version string `1.8.x_xxx` corresponds to JDK 8. -You also need to install the [Buck build tool](https://buckbuild.com/setup/install.html). +You also need to install the [Buck build tool](https://buckbuild.com/setup/install.html). Note that brew may not install the version needed to run the tests. For best results, use the same version as the GitHub builds, which can be found in the `.circleci` folder in the root of the repo. To run the Android unit tests: diff --git a/website/versioned_docs/version-0.5/toastandroid.md b/website/versioned_docs/version-0.5/toastandroid.md index 5356ae3f576..1fde8dce4c2 100755 --- a/website/versioned_docs/version-0.5/toastandroid.md +++ b/website/versioned_docs/version-0.5/toastandroid.md @@ -20,14 +20,14 @@ ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ToastAndroid.showWithGravityAndOffset( 'A wild toast appeared!', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); ``` @@ -75,7 +75,7 @@ ToastAndroid.showWithGravityAndOffset( duration, gravity, xOffset, - yOffset + yOffset, ); ``` diff --git a/website/versioned_docs/version-0.5/understanding-cli.md b/website/versioned_docs/version-0.5/understanding-cli.md index ea1137aa9c7..5874344e199 100755 --- a/website/versioned_docs/version-0.5/understanding-cli.md +++ b/website/versioned_docs/version-0.5/understanding-cli.md @@ -25,3 +25,52 @@ module.exports = { ### Parameters The command name identifies the parameters that a command would expect. When the command parameter is surrounded by greater-than, less-than symbols `< >`, this indicates that the parameter is expected. When a parameter is surrounded by brackets `[ ]`, this indicates that the parameter is optional. + +### Getting a list of all CLI commands + +Running `react-native --help` from inside a React Native project will list all of your current commands. Here is an example from version `0.56`: + +```sh + Usage: react-native [options] [command] + + Options: + + -V, --version output the version number + -h, --help output usage information + + Commands: + + start [options] starts the webserver + run-ios [options] builds your app and starts it on iOS simulator + run-android [options] builds your app and starts it on a connected Android emulator or device + new-library [options] generates a native library bridge + bundle [options] builds the javascript bundle for offline use + unbundle [options] builds javascript as "unbundle" for offline use + eject [options] Re-create the iOS and Android folders and native code + link [options] [packageName] links all native dependencies (updates native build files) + unlink [options] unlink native dependency + install [options] install and link native dependencies + uninstall [options] uninstall and unlink native dependencies + upgrade [options] upgrade your app's template files to the latest version; run this after updating the react-native version in your package.json and running npm install + log-android [options] starts adb logcat + log-ios [options] starts iOS device syslog tail + dependencies [options] lists dependencies + info [options] Get relevant version info about OS, toolchain and libraries +``` + +### CLI Configs + +When using `react-native start`, its platform derivatives, and `react-native bundle` you can use a file to define the CLI options used by React Native by default. If you create a file `rn-cli.config.js` in the root of your project, it will be evaluated and options for the commands will come from there. + +You can see the options for the CLI config on the [metro website](https://facebook.github.io/metro/docs/en/configuration). Here's a common `rn-cli.config.js` used for supporting TypeScript in React Native projects: + +```js +module.exports = { + getTransformModulePath() { + return require.resolve('react-native-typescript-transformer'); + }, + getSourceExts() { + return ['ts', 'tsx']; + }, +}; +``` diff --git a/website/versioned_docs/version-0.5/upgrading.md b/website/versioned_docs/version-0.5/upgrading.md index 451177e7172..a923fa6f4e1 100755 --- a/website/versioned_docs/version-0.5/upgrading.md +++ b/website/versioned_docs/version-0.5/upgrading.md @@ -6,18 +6,18 @@ original_id: upgrading Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you. The instructions are a bit different depending on whether you used `create-react-native-app` or `react-native init` to create your project. -## Create React Native App projects +## Expo projects -Upgrading your Create React Native App project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Please refer to [this document](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) to find out what versions are supported. You will also need to set the correct `sdkVersion` in your `app.json` file. +Upgrading your Expo project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Please refer to [this list](https://docs.expo.io/versions/latest/sdk/#sdk-version) to find out what versions are supported. You will also need to set the correct `sdkVersion` in your `app.json` file. -See the [CRNA user guide](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#updating-to-new-releases) for up-to-date information about upgrading your project. +See the [Upgrading Expo SDK Walkthrough](https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough) for up-to-date information about upgrading your project. ## Projects built with native code @@ -54,6 +54,14 @@ $ react-native-git-upgrade > You may specify a React Native version by passing an argument: `react-native-git-upgrade X.Y.Z` +Upon completion, run the following command to find your corresponding git patch file. + +``` +$ ls $TMPDIR/react-native-git-upgrade +``` + +To apply the git patch, run `git apply ` inside your project folder. + The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git 3-way merge have failed, depending on the version and how you modified your sources. #### 4. Resolve the conflicts @@ -128,4 +136,4 @@ This will check your files against the latest template and perform the following ## Manual Upgrades -Some upgrades require manual steps, e.g. 0.13 to 0.14, or 0.28 to 0.29. Be sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require. +Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require. diff --git a/website/versioned_docs/version-0.50/alertios.md b/website/versioned_docs/version-0.50/alertios.md index 7a66b2a429b..50e27b0ee23 100755 --- a/website/versioned_docs/version-0.50/alertios.md +++ b/website/versioned_docs/version-0.50/alertios.md @@ -77,7 +77,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -119,7 +119,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -133,7 +133,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/website/versioned_docs/version-0.50/animated.md b/website/versioned_docs/version-0.50/animated.md index 56982301d3a..9d0cc20351d 100755 --- a/website/versioned_docs/version-0.50/animated.md +++ b/website/versioned_docs/version-0.50/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -209,7 +209,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.50/toastandroid.md b/website/versioned_docs/version-0.50/toastandroid.md index 3ef8391312f..eee8a3b5afd 100755 --- a/website/versioned_docs/version-0.50/toastandroid.md +++ b/website/versioned_docs/version-0.50/toastandroid.md @@ -20,14 +20,14 @@ ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ToastAndroid.showWithGravityAndOffset( 'A wild toast appeared!', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); ``` diff --git a/website/versioned_docs/version-0.51/animated.md b/website/versioned_docs/version-0.51/animated.md index 075306a1e37..bd16f002ede 100755 --- a/website/versioned_docs/version-0.51/animated.md +++ b/website/versioned_docs/version-0.51/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -209,7 +209,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.52/animated.md b/website/versioned_docs/version-0.52/animated.md index f0aca06fd56..4c0892bfd42 100755 --- a/website/versioned_docs/version-0.52/animated.md +++ b/website/versioned_docs/version-0.52/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -209,7 +209,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.55/animated.md b/website/versioned_docs/version-0.55/animated.md index 8de558e3c49..cebc2856453 100644 --- a/website/versioned_docs/version-0.55/animated.md +++ b/website/versioned_docs/version-0.55/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -211,7 +211,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.56/animated.md b/website/versioned_docs/version-0.56/animated.md index 68378711a40..1928d88a037 100644 --- a/website/versioned_docs/version-0.56/animated.md +++ b/website/versioned_docs/version-0.56/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -213,7 +213,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.57/accessibility.md b/website/versioned_docs/version-0.57/accessibility.md deleted file mode 100644 index 6bef8c83c26..00000000000 --- a/website/versioned_docs/version-0.57/accessibility.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: version-0.57-accessibility -title: Accessibility -original_id: accessibility ---- - -## 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, Text or Touchable: - -```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. - -#### accessibilityHint (iOS, Android) - -An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. - -To use, set the `accessibilityHint` property to a custom string on your View, Text or Touchable: - -```javascript - - - Back - - -``` - -iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the [iOS Developer Docs](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint) - -Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android. - -#### accessibilityIgnoresInvertColors(iOS) - -Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted. - -#### accessibilityRole (iOS, Android) - -> **Note:** Accessibility Role and Accessibility States are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. - -Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. To use, set the `accessibilityRole` property to one of the following strings: - -* **none** Used when the element has no role. -* **button** Used when the element should be treated as a button. -* **link** Used when the element should be treated as a link. -* **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. -* **keyboardkey** Used when the element acts as a keyboard key. -* **text** Used when the element should be treated as static text that cannot change. -* **adjustable** Used when an element can be "adjusted" (e.g. a slider). -* **imagebutton** Used when the element should be treated as a button and is also an image. -* **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar). -* **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. - -#### accessibilityState (iOS, Android) - -> **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. - -Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. The state of the element can be set either to `selected` or `disabled` or both: - -* **selected** Used when the element is in a selected state. For example, a button is selected. -* **disabled** Used when the element is disabled and cannot be interacted with. - -To use, set the `accessibilityState` to an array containing either `selected`, `disabled`, or both. - -#### accessibilityTraits (iOS) - -> **Note:** `accessibilityTraits` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. - -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`. - -#### accessibilityElementsHidden (iOS) - -A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden. - -For example, in a window that contains sibling views `A` and `B`, setting `accessibilityElementsHidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`. This is similar to the Android property `importantForAccessibility="no-hide-descendants"`. - -#### 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) - -> **Note:** > `accessibilityComponentType` will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. - -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. We support 'none', ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’. - -```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](accessibilityinfo.md) 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 -import { UIManager, findNodeHandle } from 'react-native'; - -_onPress: function() { - const radioButton = this.state.radioButton === 'radiobutton_checked' ? - 'radiobutton_unchecked' : 'radiobutton_checked' - - this.setState({ - radioButton: radioButton - }); - - if (radioButton === 'radiobutton_checked') { - UIManager.sendAccessibilityEvent( - findNodeHandle(this), - UIManager.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/website/versioned_docs/version-0.57/accessibilityinfo.md b/website/versioned_docs/version-0.57/accessibilityinfo.md index 07178540684..2b70af7d828 100644 --- a/website/versioned_docs/version-0.57/accessibilityinfo.md +++ b/website/versioned_docs/version-0.57/accessibilityinfo.md @@ -17,7 +17,7 @@ class ScreenReaderStatusExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); AccessibilityInfo.fetch().then((isEnabled) => { this.setState({ @@ -29,7 +29,7 @@ class ScreenReaderStatusExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } diff --git a/website/versioned_docs/version-0.57/animated.md b/website/versioned_docs/version-0.57/animated.md index 6f2f566b37e..1ae79032682 100644 --- a/website/versioned_docs/version-0.57/animated.md +++ b/website/versioned_docs/version-0.57/animated.md @@ -14,7 +14,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` @@ -213,7 +213,7 @@ Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an a Other configuration options are as follows: * `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest). -* `overshootClamping`: Boolean indiciating whether the spring should be clamped and not bounce. Default false. +* `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false. * `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001. * `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001. * `delay`: Start the animation after delay (milliseconds). Default 0. diff --git a/website/versioned_docs/version-0.57/building-for-apple-tv.md b/website/versioned_docs/version-0.57/building-for-apple-tv.md deleted file mode 100644 index 5b3d8d7fefb..00000000000 --- a/website/versioned_docs/version-0.57/building-for-apple-tv.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: version-0.57-building-for-apple-tv -title: Building For TV Devices -original_id: building-for-apple-tv ---- - - - -TV devices support has been implemented with the intention of making existing React Native applications "just work" on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications. - -
- -
    - - -
-
- - - -The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS. - -## Build changes - -* _Native layer_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'. - -* _react-native init_: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects. - -* _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing - -```javascript -var Platform = require('Platform'); -var running_on_tv = Platform.isTV; - -// If you want to be more specific and only detect devices running tvOS -// (but no Android TV devices) you can use: -var running_on_apple_tv = Platform.isTVOS; -``` - - - -## Build changes - -* _Native layer_: To run React Native project on Android TV make sure to make the following changes to `AndroidManifest.xml` - -```xml - - - ... - - ... - - - - ... - -``` - -* _JavaScript layer_: Support for Android TV has been added to `Platform.android.js`. You can check whether code is running on Android TV by doing - -```js -var Platform = require('Platform'); -var running_on_android_tv = Platform.isTV; -``` - - - -## Code changes - - - -* _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard. - -* _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS. - -* _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight` and `TouchableOpacity` will "just work". In particular: - - * `touchableHandleActivePressIn` will be executed when the touchable view goes into focus - * `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus - * `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. - - - -* _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will "just work". In particular: - - * `touchableHandleActivePressIn` will be executed when the touchable view goes into focus - * `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus - * `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. - - - -* _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: - - - -* _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: - - - -```javascript -var TVEventHandler = require('TVEventHandler'); - -class Game2048 extends React.Component { - _tvEventHandler: any; - - _enableTVEventHandler() { - this._tvEventHandler = new TVEventHandler(); - this._tvEventHandler.enable(this, function(cmp, evt) { - if (evt && evt.eventType === 'right') { - cmp.setState({board: cmp.state.board.move(2)}); - } else if(evt && evt.eventType === 'up') { - cmp.setState({board: cmp.state.board.move(1)}); - } else if(evt && evt.eventType === 'left') { - cmp.setState({board: cmp.state.board.move(0)}); - } else if(evt && evt.eventType === 'down') { - cmp.setState({board: cmp.state.board.move(3)}); - } else if(evt && evt.eventType === 'playPause') { - cmp.restartGame(); - } - }); - } - - _disableTVEventHandler() { - if (this._tvEventHandler) { - this._tvEventHandler.disable(); - delete this._tvEventHandler; - } - } - - componentDidMount() { - this._enableTVEventHandler(); - } - - componentWillUnmount() { - this._disableTVEventHandler(); - } -``` - - - -* _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) ) - -* _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties. - -* _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote. - -* _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code. - - - -* _Dev Menu support_: On the simulator, cmd-M will bring up the developer menu, just like on Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) ) - - - -* _Known issues_: - - * [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be easily worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944). - - - -* _Known issues_: - - * `InputText` components do not work for now (i.e. they cannot receive focus). - - diff --git a/website/versioned_docs/version-0.57/building-from-source.md b/website/versioned_docs/version-0.57/building-from-source.md deleted file mode 100644 index 8859c0b711e..00000000000 --- a/website/versioned_docs/version-0.57/building-from-source.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: version-0.57-building-from-source -title: Building React Native from source -original_id: building-from-source ---- - -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. - -## Android - -### Prerequisites - -Assuming you have the Android SDK installed, run `android` to open the Android SDK Manager. - -Make sure you have the following installed: - -1. Android SDK version 26 (compileSdkVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)) -2. SDK build tools version 26.0.3 (buildToolsVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)) -3. Android Support Repository >= 26 (for Android Support Library) -4. Android NDK (download links and installation instructions below) - -#### Point Gradle to your Android SDK: - -**Step 1:** Set environment variables through your local shell. - -Note: Files may vary based on shell flavor. See below for examples from common shells. - -* bash: `.bash_profile` or `.bashrc` -* zsh: `.zprofile` or `.zshrc` -* ksh: `.profile` or `$ENV` - -Example: - -``` -export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx -export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10e -``` - -**Step 2:** Create a `local.properties` file in the `android` directory of your react-native app with the following contents: - -Example: - -``` -sdk.dir=/Users/your_unix_name/android-sdk-macosx -ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e -``` - -#### Download links for Android NDK - -1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r17b-darwin-x86_64.zip -2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r17b-linux-x86_64.zip -3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r17b-windows-x86_64.zip -4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r17b-windows-x86.zip - -You can find further instructions on the [official page](https://developer.android.com/ndk/index.html). - -### Building the source - -#### 1. Installing the fork - -First, you need to install `react-native` from your fork. For example, to install the master branch from the official repo, run the following: - -```sh -npm install --save github:facebook/react-native#master -``` - -Alternatively, you can clone the repo to your `node_modules` directory and run `npm install` inside the cloned repo. - -#### 2. Adding gradle dependencies - -Add `gradle-download-task` as dependency in `android/build.gradle`: - -```gradle -... - dependencies { - classpath 'com.android.tools.build:gradle:2.3.3' - classpath 'de.undercouch:gradle-download-task:3.1.2' - - // NOTE: Do not place your application dependencies here; they belong - // in the individual module build.gradle files - } -... -``` - -#### 3. Adding the `:ReactAndroid` project - -Add the `:ReactAndroid` project in `android/settings.gradle`: - -```gradle -... -include ':ReactAndroid' - -project(':ReactAndroid').projectDir = new File( - rootProject.projectDir, '../node_modules/react-native/ReactAndroid') -... -``` - -Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `compile 'com.facebook.react:react-native:+'` with `compile project(':ReactAndroid')`: - -```gradle -... -dependencies { - compile fileTree(dir: 'libs', include: ['*.jar']) - compile 'com.android.support:appcompat-v7:26.0.2' - - compile project(':ReactAndroid') - - ... -} -... -``` - -#### 4. Making 3rd-party modules use your fork - -If you use 3rd-party React Native modules, you need to override their dependencies so that they don't bundle the pre-compiled library. Otherwise you'll get an error while compiling - `Error: more than one library with package name 'com.facebook.react'`. - -Modify your `android/app/build.gradle`, and add: - -```gradle -configurations.all { - exclude group: 'com.facebook.react', module: 'react-native' -} -``` - -### Building from Android Studio - -From the Welcome screen of Android Studio choose "Import project" and select the `android` folder of your app. - -You should be able to use the _Run_ button to run your app on a device. Android Studio won't start the packager automatically, you'll need to start it by running `npm start` on the command line. - -### Additional notes - -Building from source can take a long time, especially for the first build, as it needs to download ~200 MB of artifacts and compile the native code. Every time you update the `react-native` version from your repo, the build directory may get deleted, and all the files are re-downloaded. To avoid this, you might want to change your build directory path by editing the `~/.gradle/init.gradle` file: - -```gradle -gradle.projectsLoaded { - rootProject.allprojects { - buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}" - } -} -``` - -### Building for Maven/Nexus deployment - -If you find that you need to push up a locally compiled React Native .aar and related files to a remote Nexus repository, you can. - -Start by following the `Point Gradle to your Android SDK` section of this page. Once you do this, assuming you have Gradle configured properly, you can then run the following command from the root of your React Native checkout to build and package all required files: - -``` -./gradlew ReactAndroid:installArchives -``` - -This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout. - -### Troubleshooting - -Gradle build fails in `ndk-build`. See the section about `local.properties` file above. - -## Testing your Changes - -If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Testing your Changes](testing.md). diff --git a/website/versioned_docs/version-0.57/debugging.md b/website/versioned_docs/version-0.57/debugging.md deleted file mode 100644 index bffe03faf9d..00000000000 --- a/website/versioned_docs/version-0.57/debugging.md +++ /dev/null @@ -1,242 +0,0 @@ ---- -id: version-0.57-debugging -title: Debugging -original_id: debugging ---- - -## 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 on Mac OS and `Ctrl+M` on Windows and Linux. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code). - -![](/react-native/docs/assets/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: - -```javascript -import {YellowBox} from 'react-native'; -YellowBox.ignoreWarnings(['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](debugging.md#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](/react-native/docs/assets/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 "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it: - -![React Native Inspector](/react-native/docs/assets/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](/react-native/docs/assets/ReactDevToolsInspector.gif) - -You can choose "Toggle 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](/react-native/docs/assets/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() { - final OkHttpClient baseClient = OkHttpClientProvider.createClient(); - OkHttpClientProvider.setOkHttpClientFactory(new OkHttpClientFactory() { - @Override - public OkHttpClient createNewNetworkModuleClient() { - return baseClient.newBuilder() - .addNetworkInterceptor(new StethoInterceptor()) - .build(); - } - }); - } - } - ``` - -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/website/versioned_docs/version-0.57/direct-manipulation.md b/website/versioned_docs/version-0.57/direct-manipulation.md deleted file mode 100644 index c097f1b7812..00000000000 --- a/website/versioned_docs/version-0.57/direct-manipulation.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: version-0.57-direct-manipulation -title: Direct Manipulation -original_id: direct-manipulation ---- - -It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node. - -> Use setNativeProps when frequent re-rendering creates a performance bottleneck -> -> Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. `setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with `setState` and [shouldComponentUpdate](http://facebook.github.io/react/advanced-performance.md#shouldcomponentupdate-in-action). - -## setNativeProps with TouchableOpacity - -[TouchableOpacity](https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component: - -```javascript -setOpacityTo(value) { - // Redacted: animation related code - this.refs[CHILD_REF].setNativeProps({ - opacity: value - }); -}, -``` - -This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation: - -```javascript - - - Press me! - - -``` - -Let's imagine that `setNativeProps` was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever `onPress` is fired: - -```javascript -constructor(props) { - super(props); - this.state = { myButtonOpacity: 1, }; -} - -render() { - return ( - this.setState({myButtonOpacity: 0.5})} - onPressOut={() => this.setState({myButtonOpacity: 1})}> - - Press me! - - - ) -} -``` - -This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity. - -If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](https://github.com/facebook/react-native/blob/master/Libraries/Renderer/oss/ReactNativeRenderer-prod.js) you will notice that it is a wrapper around `RCTUIManager.updateView` - this is the exact same function call that results from re-rendering - see [receiveComponent in ReactNativeBaseComponent.js](https://github.com/facebook/react/blob/master/src/renderers/native/ReactNativeBaseComponent.js). - -## Composite components and setNativeProps - -Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example: - -```SnackPlayer name=setNativeProps%20with%20Composite%20Components -import React from 'react'; -import { Text, TouchableOpacity, View } from 'react-native'; - -class MyButton extends React.Component { - render() { - return ( - - {this.props.label} - - ) - } -} - -export default class App extends React.Component { - render() { - return ( - - - - ) - } -} -``` - -If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component. - -#### Forward setNativeProps to a child - -All we need to do is provide a `setNativeProps` method on our component that calls `setNativeProps` on the appropriate child with the given arguments. - -```SnackPlayer name=Forwarding%20setNativeProps -import React from 'react'; -import { Text, TouchableOpacity, View } from 'react-native'; - -class MyButton extends React.Component { - setNativeProps = (nativeProps) => { - this._root.setNativeProps(nativeProps); - } - - render() { - return ( - this._root = component} {...this.props}> - {this.props.label} - - ) - } -} - -export default class App extends React.Component { - render() { - return ( - - - - ) - } -} -``` - -You can now use `MyButton` inside of `TouchableOpacity`! A sidenote for clarity: we used the [ref callback](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) syntax here, rather than the traditional string-based ref. - -You may have noticed that we passed all of the props down to the child view using `{...this.props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`. - -## setNativeProps to clear TextInput value - -Another very common use case of `setNativeProps` is to clear the value of a TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button: - -```SnackPlayer name=Clear%20text -import React from 'react'; -import { TextInput, Text, TouchableOpacity, View } from 'react-native'; - -export default class App extends React.Component { - clearText = () => { - this._textInput.setNativeProps({text: ''}); - } - - render() { - return ( - - this._textInput = component} - style={{height: 50, flex: 1, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}} - /> - - Clear text - - - ); - } -} -``` - -## Avoiding conflicts with the render function - -If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden. - -## setNativeProps & shouldComponentUpdate - -By [intelligently applying `shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) you can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use `setState` instead of `setNativeProps`. - -## Other native methods - -The methods described here are available on most of the default components provided by React Native. Note, however, that they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app. - -### measure(callback) - -Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments: - -* x -* y -* width -* height -* pageX -* pageY - -Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the [`onLayout` prop](view.md#onlayout) instead. - -### measureInWindow(callback) - -Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments: - -* x -* y -* width -* height - -### measureLayout(relativeToNativeNode, onSuccess, onFail) - -Like `measure()`, but measures the view relative an ancestor, specified as `relativeToNativeNode`. This means that the returned x, y are relative to the origin x, y of the ancestor view. - -As always, to obtain a native node handle for a component, you can use `ReactNative.findNodeHandle(component)`. - -### focus() - -Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view. - -### blur() - -Removes focus from an input or view. This is the opposite of `focus()`. diff --git a/website/versioned_docs/version-0.57/flexbox.md b/website/versioned_docs/version-0.57/flexbox.md deleted file mode 100644 index cac01c6b5f0..00000000000 --- a/website/versioned_docs/version-0.57/flexbox.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: version-0.57-flexbox -title: Layout with Flexbox -original_id: flexbox ---- - -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. - -You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout. - -> Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with `flexDirection` defaulting to `column` instead of `row`, and the `flex` parameter only supporting a single number. - -#### Flex Direction - -Adding `flexDirection` to a component's `style` determines the **primary axis** of its layout. Should the children be organized horizontally (`row`) or vertically (`column`)? The default is `column`. - -```ReactNativeWebPlayer -import React, { Component } from 'react'; -import { AppRegistry, View } from 'react-native'; - -export default class FlexDirectionBasics extends Component { - render() { - return ( - // Try setting `flexDirection` to `column`. - - - - - - ); - } -}; - -// skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics); -``` - -#### Justify Content - -Adding `justifyContent` to a component's style determines the **distribution** of children along the **primary axis**. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are `flex-start`, `center`, `flex-end`, `space-around`, `space-between` and `space-evenly`. - -```ReactNativeWebPlayer -import React, { Component } from 'react'; -import { AppRegistry, View } from 'react-native'; - -export default class JustifyContentBasics extends Component { - render() { - return ( - // Try setting `justifyContent` to `center`. - // Try setting `flexDirection` to `row`. - - - - - - ); - } -}; - -// skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics); -``` - -#### Align Items - -Adding `alignItems` to a component's style determines the **alignment** of children along the **secondary axis** (if the primary axis is `row`, then the secondary is `column`, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are `flex-start`, `center`, `flex-end`, and `stretch`. - -> For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children. - -```ReactNativeWebPlayer -import React, { Component } from 'react'; -import { AppRegistry, View } from 'react-native'; - -export default class AlignItemsBasics extends Component { - render() { - return ( - // Try setting `alignItems` to 'flex-start' - // Try setting `justifyContent` to `flex-end`. - // Try setting `flexDirection` to `row`. - - - - - - ); - } -}; - -// skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics); -``` - -#### Going Deeper - -We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./layout-props.md). - -We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](handling-text-input.md). diff --git a/website/versioned_docs/version-0.57/getting-started.md b/website/versioned_docs/version-0.57/getting-started.md deleted file mode 100644 index 900cc0ec758..00000000000 --- a/website/versioned_docs/version-0.57/getting-started.md +++ /dev/null @@ -1,757 +0,0 @@ ---- -id: version-0.57-getting-started -title: Getting Started -original_id: getting-started ---- - - - -This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the [Tutorial](tutorial.md). - -
-
    - - -
-
- - - -[Expo](https://expo.io) is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see [Caveats](getting-started.md#caveats)). - -Assuming that you have [Node](https://nodejs.org/en/download/) installed, you can use npm to install the Expo CLI command line utility: - -```sh -npm install -g expo-cli -``` - -Then run the following commands to create a new React Native project called "AwesomeProject": - -```sh -expo init AwesomeProject - -cd AwesomeProject -npm start -``` - -This will start a development server for you. - -## Running your React Native application - -Install the [Expo](https://expo.io) client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link. - -### Modifying your app - -Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes. - -### That's it! - -Congratulations! You've successfully run and modified your first React Native app. - -
- -## Now what? - -Expo also has [docs](https://docs.expo.io) you can reference if you have questions specific to the tool. You can also ask for help at [Expo forums](https://forums.expo.io). - -If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it: - -* in the [Expo CLI issues](https://github.com/expo/expo-cli/issues) (for issues related to Expo CLI), or -* in the [Expo issues](https://github.com/expo/expo/issues) (for issues about the Expo client or SDK). - -If you're curious to learn more about React Native, continue on to the [Tutorial](tutorial.md). - -### Running your app on a simulator or virtual device - -Expo CLI makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment. - -Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only). - -### Caveats - -Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app. - -If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll just need to "[eject](https://docs.expo.io/versions/latest/expokit/eject)" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project. - -Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check [this document](https://docs.expo.io/versions/latest/sdk/#sdk-version) to find out what versions are supported. - -If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "Building Projects with Native Code" above for instructions on configuring a native build environment for React Native. - - - -

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Expo/a> or Create React Native App, you'll need this section.

- -The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different. - -
- Development OS: - macOS - Windows - Linux - Target OS: - iOS - Android -
- - - -## Unsupported - -

A Mac is required to build projects with native code for iOS. You can follow the Quick Start to learn how to build your app using Expo instead.

- - - -## Installing dependencies - -You will need Node, Watchman, the React Native command line interface, and Xcode. - -While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS. - - - -## Installing dependencies - -You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio. - - - -## Installing dependencies - -You will need Node, the React Native command line interface, a JDK, and Android Studio. - - - -## Installing dependencies - -You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio. - - - -While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android. - - - -### Node, Watchman - -We recommend installing Node and Watchman using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew: - -``` -brew install node -brew install watchman -``` - -If you have already installed Node on your system, make sure it is Node 8.3 or newer. - -[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance. - - - -### Node - -Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 8.3 or newer. - - - -### Node, Python2, JDK - -We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. - -React Native also requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html), as well as Python 2. Both can be installed using Chocolatey. - -Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command: - -```powershell -choco install -y nodejs.install python2 jdk8 -``` - -If you have already installed Node on your system, make sure it is Node 8.3 or newer. If you already have a JDK on your system, make sure it is version 8 or newer. - -> You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/). - - - -### The React Native CLI - -Node comes with npm, which lets you install the React Native command line interface. - -Run the following command in a Terminal: - -``` -npm install -g react-native-cli -``` - -> If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`. - - - -### The React Native CLI - -Node comes with npm, which lets you install the React Native command line interface. - -Run the following command in a Command Prompt or shell: - -```powershell -npm install -g react-native-cli -``` - -> If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`. - - - -### Xcode - -The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. - -If you have already installed Xcode on your system, make sure it is version 9.4 or newer. - -#### Command Line Tools - -You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown. - -![Xcode Command Line Tools](/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png) - - - -### Java Development Kit - -React Native requires a recent version of the Java SE Development Kit (JDK). [Download and install Oracle JDK 8 or newer](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if needed. You can also use [OpenJDK 8 or newer](http://openjdk.java.net/install/) as an alternative. - - - -### Android development environment - -Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps. - - - -#### 1. Install Android Studio - -[Download and install Android Studio](https://developer.android.com/studio/index.html). Choose a "Custom" setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked: - - - -* `Android SDK` -* `Android SDK Platform` -* `Performance (Intel ® HAXM)` -* `Android Virtual Device` - - - -* `Android SDK` -* `Android SDK Platform` -* `Android Virtual Device` - - - -Then, click "Next" to install all of these components. - -> If the checkboxes are grayed out, you will have a chance to install these components later on. - -Once setup has finalized and you're presented with the Welcome screen, proceed to the next step. - -#### 2. Install the Android SDK - -Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 8.0 (Oreo)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. - -The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager". - - - -![Android Studio Welcome](/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png) - - - -![Android Studio Welcome](/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png) - - - -> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. - -Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 8.0 (Oreo)` entry, then make sure the following items are all checked: - -* `Android SDK Platform 26` -* `Google APIs Intel x86 Atom_64 System Image` - - - -![Android SDK Manager](/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png) - - - -![Android SDK Manager](/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png) - - - -Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `26.0.3` is selected. - - - -![Android SDK Manager - 26.0.3 Build Tools](/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png) - - - -![Android SDK Manager - 26.0.3 Build Tools](/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png) - - - -Finally, click "Apply" to download and install the Android SDK and related build tools. - - - -![Android SDK Manager - Installs](/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png) - - - -![Android SDK Manager - Installs](/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png) - - - -#### 3. Configure the ANDROID_HOME environment variable - -The React Native tools require some environment variables to be set up in order to build apps with native code. - - - -Add the following lines to your `$HOME/.bash_profile` config file: - - - -``` -export ANDROID_HOME=$HOME/Library/Android/sdk -export PATH=$PATH:$ANDROID_HOME/tools -export PATH=$PATH:$ANDROID_HOME/tools/bin -export PATH=$PATH:$ANDROID_HOME/platform-tools -export PATH=$PATH:$ANDROID_HOME/emulator -``` - - - -``` -export ANDROID_HOME=$HOME/Android/Sdk -export PATH=$PATH:$ANDROID_HOME/tools -export PATH=$PATH:$ANDROID_HOME/tools/bin -export PATH=$PATH:$ANDROID_HOME/platform-tools -export PATH=$PATH:$ANDROID_HOME/emulator -``` - - - -> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file. - -Type `source $HOME/.bash_profile` to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running `echo $PATH`. - -> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. - - - -Open the System pane under **System and Security** in the Windows Control Panel, then click on **Change settings...**. Open the **Advanced** tab and click on **Environment Variables...**. Click on **New...** to create a new `ANDROID_HOME` user variable that points to the path to your Android SDK: - -![ANDROID_HOME Environment Variable](/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png) - -The SDK is installed, by default, at the following location: - -```powershell -c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk -``` - -You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**. - -Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step. - - - -### Watchman - -Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install.html#buildinstall) to compile and install Watchman from source. - -> [Watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). - - - -## Creating a new application - -Use the React Native command line interface to generate a new React Native project called "AwesomeProject": - -``` -react-native init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo (or Create React Native App), or if you're adding iOS support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). - - - -## Creating a new application - -Use the React Native command line interface to generate a new React Native project called "AwesomeProject": - -``` -react-native init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](platform-specific-code.md)). - - - -## Preparing the Android device - -You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. - -Either way, you will need to prepare the device to run Android apps for development. - -### Using a physical device - -If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md). - -### Using a virtual device - -If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this: - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedAndroidStudioAVD.png) - -If you have just installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next". - - - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedCreateAVDWindows.png) - - - -![Android Studio AVD Manager](/react-native/docs/assets/GettingStartedCreateAVDMacOS.png) - - - -Select the "x86 Images" tab, then look for the **Oreo** API Level 26, x86_64 ABI image with a Android 8.0 (Google APIs) target. - - - -> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. - - - -![Install HAXM](/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png) - -> If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. - -![AVD List](/react-native/docs/assets/GettingStartedAVDManagerWindows.png) - - - -![Install HAXM](/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png) - -> If you don't have HAXM installed, follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS) to set it up, then go back to the AVD Manager. - -![AVD List](/react-native/docs/assets/GettingStartedAVDManagerMacOS.png) - - - -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. - - - -## Running your React Native application - -Run `react-native run-ios` inside your React Native project folder: - -``` -cd AwesomeProject -react-native run-ios -``` - -You should see your new app running in the iOS Simulator shortly. - -![AwesomeProject on iOS](/react-native/docs/assets/GettingStartediOSSuccess.png) - -`react-native run-ios` is just one way to run your app. You can also run it directly from within Xcode or [Nuclide](https://nuclide.io/). - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page. - -### Running on a device - -The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md). - - - -## Running your React Native application - -Run `react-native run-android` inside your React Native project folder: - -``` -cd AwesomeProject -react-native run-android -``` - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - - - -![AwesomeProject on Android](/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png) - - - -![AwesomeProject on Android](/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png) - - - -`react-native run-android` is just one way to run your app - you can also run it directly from within Android Studio or [Nuclide](https://nuclide.io/). - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md#content) page. - - - -### Modifying your app - -Now that you have successfully run the app, let's modify it. - - - -* Open `App.js` in your text editor of choice and edit some lines. -* Hit `⌘R` in your iOS Simulator to reload the app and see your changes! - - - -* Open `App.js` in your text editor of choice and edit some lines. -* Press the `R` key twice or select `Reload` from the Developer Menu (`⌘M`) to see your changes! - - - -### Modifying your app - -Now that you have successfully run the app, let's modify it. - -* Open `App.js` in your text editor of choice and edit some lines. -* Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes! - - - -### That's it! - -Congratulations! You've successfully run and modified your first React Native app. - -
- - - -### That's it! - -Congratulations! You've successfully run and modified your first React Native app. - -
- - - -## Now what? - -* Turn on [Live Reload](debugging.md#reloading-javascript) in the Developer Menu. Your app will now reload automatically whenever you save any changes! - -* If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, continue on to the [Tutorial](tutorial.md). - - - -## Now what? - -* Turn on [Live Reload](debugging.md#reloading-javascript) in the Developer Menu. Your app will now reload automatically whenever you save any changes! - -* If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, continue on to the [Tutorial](tutorial.md). - - diff --git a/website/versioned_docs/version-0.57/handling-touches.md b/website/versioned_docs/version-0.57/handling-touches.md deleted file mode 100644 index 80b6eed7ed5..00000000000 --- a/website/versioned_docs/version-0.57/handling-touches.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: version-0.57-handling-touches -title: Handling Touches -original_id: handling-touches ---- - -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. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](gesture-responder-system.md) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. - -## Displaying a basic button - -[Button](button.md) provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this: - -```javascript -