A framework for building native apps with React. http://facebook.github.io/react-native/
Go to file
Y.Shing 2546c95ac8 Fix iOS 11 WebView extra white space on top due to contentInsetAdjustmentBehavior
Summary:
Same IOS 11 issue as https://github.com/facebook/react-native/pull/15023
Fixes the annoying 20px content insert on top.
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Fix the behaviour of WebView when building the iOS project with Xcode 9 due to the `contentInsetAdjustmentBehavior`.

![expected](https://user-images.githubusercontent.com/5630513/32207551-b7789668-bdca-11e7-840a-f325b2767d08.jpg)
![iphone_x_after](https://user-images.githubusercontent.com/5630513/32207557-beb8fd6e-bdca-11e7-87d0-18d533f20125.jpg)

![issue_normal_iphone_ios11](https://user-images.githubusercontent.com/5630513/32207572-d773be5c-bdca-11e7-8e28-8f0783eef1cd.jpg)
![iphone_x_before](https://user-images.githubusercontent.com/5630513/32207581-e3e93234-bdca-11e7-847d-f801bbf05d55.jpg)

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAl  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
 [IOS] [BUGFIX] [WebView] - Fix extra white space added to webView due to iOS 11 contentInsetAdjustmentBehavior
Closes https://github.com/facebook/react-native/pull/16519

Differential Revision: D6195670

Pulled By: shergin

fbshipit-source-id: 08d4d4dc700059bb7707e038dc4f592af0275896
2017-10-30 23:29:20 -07:00
.circleci Add Danger and publish to npm 2017-10-16 12:13:32 -07:00
.github add release notes/changelog requirement to PR Template 2017-10-13 13:35:25 -07:00
ContainerShip Fix typo in run-instrumentation-tests-via-adb-shell.sh 2017-10-17 13:18:07 -07:00
IntegrationTests Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS 2017-10-25 08:20:48 -07:00
Libraries Gate ReactNativeVersionCheck by __DEV__ 2017-10-30 15:06:13 -07:00
RNTester Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS 2017-10-25 08:20:48 -07:00
React Fix iOS 11 WebView extra white space on top due to contentInsetAdjustmentBehavior 2017-10-30 23:29:20 -07:00
ReactAndroid Introduce getConstants generation for Native Modules codegen. 2017-10-30 08:16:48 -07:00
ReactCommon Final fixes 2017-10-19 14:33:05 -07:00
babel-preset Add babel-plugin-transform-exponentiation-operator to babel-preset-react-native 2017-10-18 16:46:49 -07:00
blog Fixed a blog typo 2017-10-10 15:22:07 -07:00
bots Add footer links to bot comments, rename label to Good fist issue 2017-10-16 14:17:07 -07:00
danger Add Danger and publish to npm 2017-10-16 12:13:32 -07:00
docs Change name of the file to edit 2017-10-29 23:02:30 -07:00
flow Add finally method to Promise flow definition 2017-10-09 22:02:09 -07:00
gradle/wrapper Android - Update Gradle to 2.2.3 2017-01-31 13:13:32 -08:00
jest Return request id in jest mock for requestAnimationFrame 2017-10-14 14:03:16 -07:00
keystores Apply auto-formatter for BUCK files in fbandroid. 2017-02-27 14:04:56 -08:00
lib Revert D5409825: [RN] Convert easy files to Prettier 2017-07-12 19:23:58 -07:00
local-cli Backed out changeset c188b39e104f 2017-10-20 12:32:37 -07:00
react-native-cli Revert D5409825: [RN] Convert easy files to Prettier 2017-07-12 19:23:58 -07:00
react-native-git-upgrade Run eslint --fix 2017-10-09 17:46:44 -07:00
scripts Move JS-native version check to its own module + unit tests + prefix Obj-C macro w/RCT 2017-10-16 14:30:34 -07:00
third-party-podspecs Apple TV Cocoapods support 2017-07-18 15:15:59 -07:00
website Fix npm start in website/ 2017-10-10 01:32:39 -07:00
.buckconfig update gitignore & fix links 2017-05-22 13:03:50 -07:00
.buckjavaargs limiting BUCK's memory for CI 2016-02-01 10:49:33 -08:00
.editorconfig Fix indent of .gradle files 2016-10-19 16:58:36 -07:00
.eslintignore Exclude the dangerfile from eslint. 2017-07-19 13:49:32 -07:00
.eslintrc Bump react/jsx-no-undef (undefined require) from warning to error 2017-09-15 12:01:04 -07:00
.flowconfig @allow-large-files Deploy Flow v0.57.2 2017-10-13 21:46:08 -07:00
.gitattributes Added a .gitattributes file, ensuring that Bash script source files (gradlew and 2015-10-13 23:10:39 -04:00
.gitignore Adds Danger support 2017-07-18 11:16:46 -07:00
.npmignore Update .npmignore to include generated bundle file 2017-02-03 11:43:31 -08:00
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md 2017-10-26 16:47:27 -07:00
CONTRIBUTING.md Add footer links to bot comments, rename label to Good fist issue 2017-10-16 14:17:07 -07:00
DockerTests.md Docker Testing Environment for Android & JS 2017-02-24 10:59:53 -08:00
Jenkinsfile Container Testing Updates 2017-04-12 16:31:35 -07:00
LICENSE Update license 2015-03-23 10:48:39 -07:00
LICENSE-docs More licenses 2015-03-24 19:59:10 -07:00
PATENTS Update Patent Grant 2015-04-10 12:14:22 -07:00
README.md Docs - README.md - Fix Good First Issue Link 2017-10-24 15:31:56 -07:00
React.podspec Remove AdSupport from React.podspec 2017-10-05 12:32:04 -07:00
Releases.md Update Releases.md 2017-07-17 14:22:43 -07:00
breaking-changes.md DOCS ONLY: Update breaking changes location in breaking-changes.md: move to Wiki 2017-02-03 06:28:37 -08:00
build.gradle Update gradle-download-task from 2.0.0 to 3.1.2 to fix boost zip down… 2016-12-07 16:43:28 -08:00
cli.js Revert D5409825: [RN] Convert easy files to Prettier 2017-07-12 19:23:58 -07:00
gradlew Update gradle wrapper binary and scripts 2016-09-09 08:13:59 -07:00
gradlew.bat Update gradle wrapper binary and scripts 2016-09-09 08:13:59 -07:00
jest-preset.json mock mp4 files 2017-10-20 13:05:26 -07:00
package.json mock mp4 files 2017-10-20 13:05:26 -07:00
react.gradle Improve support for unbundle feature 2017-10-13 17:28:28 -07:00
rn-cli.config.js Make the runBeforeMainModule config param to RN repo and make it absolute 2017-09-26 13:06:14 -07:00
rn-get-polyfills.js Move Array<string> to $ReadOnlyArray<string>. Separate polyfill list into a file. 2017-07-13 03:38:23 -07:00
runXcodeTests.sh Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
settings.gradle Cleanup settings.gradle 2017-07-28 07:51:09 -07:00
setupBabel.js Make prospective syntax compatible 2017-08-16 16:42:16 -07:00

README.md

React Native · Circle CI Status npm version PRs Welcome

Learn once, write anywhere: Build mobile apps with React.

  • Build native mobile apps using JavaScript and React: React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
  • A React Native app is a real mobile app: With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
  • Don't waste time recompiling: React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
  • Use native code when you need to: React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

See the official React Native website for an introduction to React Native.

Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.

Getting Started

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:

Documentation

The websites documentation is divided into multiple sections.

Another great way to learn more about the components and APIs included with React Native is to read their source. Look under the Libraries/Components directory for components like ScrollView and TextInput, for example. The RNTester example is also here to demonstrate some of the ways to use these components. From the source you can get an accurate understanding of each components behavior and API.

The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

Upgrading

React Native is under active development. See the guide on upgrading React Native to keep your project up-to-date.

Contributing

Read below to learn how you can take part in improving React Native.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to React Native.

Beginner Friendly Bugs

We have a list of beginner friendly issues to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.

License

React Native is BSD licensed. We also provide an additional patent grant.

React Native documentation is Creative Commons licensed.