A framework for building native apps with React. http://facebook.github.io/react-native/
Go to file
Janic Duplessis 039924ec70 Add statusBarBackgroundColor to DrawerLayoutAndroid to allow it to open over the status bar
Summary:The navigation drawer of most apps on android opens over the status bar, this adds an option to do so. It implements a similar API to the native DrawerLayout by adding a statusBarBackgroundColor to DrawerLayoutAndroid.

Without statusBarBackgroundColor:
![image](https://cloud.githubusercontent.com/assets/2677334/13414490/50ebcdf4-df21-11e5-974f-c6a1343c2a4e.png)

With statusBarBackgroundColor:
![image](https://cloud.githubusercontent.com/assets/2677334/13414459/1fdc4086-df21-11e5-9658-bd47bfdb925f.png)

This PR depends on the changes in #6195 to add the `StatusBar.HEIGHT` constant I just want to put it out there now to see if this looks good. To test without the other PR just change `StatusBar.HEIGHT` for `25`.

It is implemented by making the native status bar translucent and making its background color transparent so we can draw a view of the same height as the status bar under it as a child of the DrawerLayoutAndroid. Then we can draw a semi-transparent gray View inside the drawer view to make it
Closes https://github.com/facebook/react-native/pull/6218

Differential Revision: D3017444

Pulled By: bestander

fb-gh-sync-id: ca48a47a20a2feecae360a76f3e2c9bbe6a37700
fbshipit-source-id: ca48a47a20a2feecae360a76f3e2c9bbe6a37700
2016-03-30 05:30:22 -07:00
Examples Add statusBarBackgroundColor to DrawerLayoutAndroid to allow it to open over the status bar 2016-03-30 05:30:22 -07:00
IntegrationTests Remove knowledge of fbjs from the packager 2016-03-02 04:28:38 -08:00
JSCLegacyProfiler Add suport for JSC profiling on iOS 9 2015-11-16 03:38:11 -08:00
Libraries Add statusBarBackgroundColor to DrawerLayoutAndroid to allow it to open over the status bar 2016-03-30 05:30:22 -07:00
React Fix OSS project configuration 2016-03-30 03:12:27 -07:00
ReactAndroid Add support for vibration patterns 2016-03-29 21:45:20 -07:00
Tools/FBPortForwarding Open source FBPortForwarding 2016-03-24 10:51:34 -07:00
babel-preset Revert strict mode in transform-es2015-modules-commonjs 2016-03-29 07:26:22 -07:00
blog Fix website 2016-03-25 10:46:25 -07:00
bots Fix typo 2016-03-20 13:26:27 -07:00
docs Add download links for Android NDK to the docs 2016-03-26 10:44:18 -07:00
flow Update FBSource to use Flow 0.22 2016-03-08 12:39:29 -08:00
gradle/wrapper Added ability to run Movies app with BUCK 2016-02-25 17:15:58 -08:00
jestSupport Update Jest to 0.9.0 2016-03-14 18:53:25 -07:00
keystores Added ability to run Movies app with BUCK 2016-02-25 17:15:58 -08:00
local-cli Apply react.gradle from node_modules/react-native 2016-03-29 07:39:21 -07:00
packager Avoid getting `entryFilePath` on HMR codepath 2016-03-25 08:45:21 -07:00
react-native-cli Allow react-native init <version> + removed sinopia from being required for e2e testing 2016-03-24 05:31:23 -07:00
scripts Version release script 2016-03-24 08:41:24 -07:00
website Adding app to showcase 2016-03-29 13:21:59 -07:00
.buckconfig Added ability to run Movies app with BUCK 2016-02-25 17:15:58 -08:00
.buckjavaargs limiting BUCK's memory for CI 2016-02-01 10:49:33 -08:00
.editorconfig Create .editorconfig 2015-10-09 22:34:00 +01:00
.eslintignore [ReactNative] clean lint in all of Libraries/ 2015-05-19 13:47:04 -08:00
.eslintrc Removed eslint rule that checks modules 2016-03-10 15:59:22 -08:00
.flowconfig fixed flow error on Travis 2016-03-19 02:15:24 -07:00
.gitattributes Added a .gitattributes file, ensuring that Bash script source files (gradlew and 2015-10-13 23:10:39 -04:00
.gitignore Npm publish 2016-03-15 09:22:26 -07:00
.travis.yml Retry e2e test consistently 2016-03-23 04:24:25 -07:00
CONTRIBUTING.md add instructions for testing website locally 2016-03-18 12:15:26 -07:00
ISSUE_TEMPLATE.md Update PR and issue templates and guidelines 2016-03-04 09:20:37 -08:00
LICENSE Update license 2015-03-23 10:48:39 -07:00
LICENSE-CustomComponents Add CustomComponents license 2015-03-26 11:03:30 -07:00
LICENSE-docs More licenses 2015-03-24 19:59:10 -07:00
LICENSE-examples More licenses 2015-03-24 19:59:10 -07:00
PATENTS Update Patent Grant 2015-04-10 12:14:22 -07:00
PULL_REQUEST_TEMPLATE.md Tweak commands and guidelines 2016-03-20 13:14:25 -07:00
README.md removed bithound badge 2016-03-01 10:53:29 -08:00
React.podspec Have CocoaPods read some values from package.json 2016-03-29 13:24:18 -07:00
Releases.md Version release script 2016-03-24 08:41:24 -07:00
breaking-changes.md Update breaking-changes.md 2016-01-16 21:56:57 +00:00
build.gradle Upgrade gradle to 2.9 2015-12-14 06:37:34 -08:00
circle.yml Allow react-native init <version> + removed sinopia from being required for e2e testing 2016-03-24 05:31:23 -07:00
cli.js Breaking change: Move `bundle` to `private-cli` 2015-10-13 11:48:30 -07:00
gradlew Upgrade gradle to 2.9 2015-12-14 06:37:34 -08:00
gradlew.bat Release React Native for Android 2015-09-14 18:13:39 +01:00
package.json Update version number in repo for ecosystem compatibility 2016-03-29 12:34:19 -07:00
react.gradle Apply react.gradle from node_modules/react-native 2016-03-29 07:39:21 -07:00
runXcodeTests.sh Add suggested ‘view size’ powers to -[RCTShadowView setFrame:] 2016-03-01 10:14:32 -08:00
settings.gradle Delete SampleApp 2015-09-29 09:21:33 -07:00

README.md

React Native Build Status Circle CI npm version

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. 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.

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

Introduction

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

Getting Started

Getting Help

Please use these community resources for getting help. We use the GitHub issues for tracking bugs and feature requests and have limited bandwidth to address them.

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 directory for components like ScrollView and Navigator, for example. The UIExplorer 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.

Examples

  • git clone https://github.com/facebook/react-native.git
  • cd react-native && npm install

Running the examples on iOS

Now open any example (the .xcodeproj file in each of the Examples subdirectories) and hit Run in Xcode.

Running the examples on Android

Note that you'll need the Android NDK installed, see prerequisites.

./gradlew :Examples:Movies:android:app:installDebug
# Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
# Open the Movies app in your emulator

Extending React Native

  • Looking for a component? JS.coach
  • 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, Android) and Native UI Components (iOS, Android) if you are interested in extending native functionality.

Upgrading

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

Opening Issues

If you encounter a bug with React Native we would like to hear about it. Search the existing issues and try to make sure your problem doesnt already exist before opening a new issue. Its helpful if you include the version of React Native and OS youre using. Please include a stack trace and reduced repro case when appropriate, too.

The GitHub issues are intended for bug reports and feature requests. For help and questions with using React Native please make use of the resources listed in the Getting Help section. Product Pains in particular is a good way to signal your interest in a feature or issue. There are limited resources available for handling issues and by keeping the list of open issues lean we can respond in a timely manner.

Contributing

For more information about contributing PRs and issues, see our Contribution Guidelines.

Good First Task is a great starting point for PRs.

We encourage the community to ask and answer questions on Stack Overflow with the react-native tag. It's a great way to help out and be involved!

License

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

React documentation is Creative Commons licensed.

Examples provided in this repository and in the documentation are separately licensed, as are some of the custom components.