8afa0378cd
Summary: Make StatusBar style respect previously set systemUiVisibility <!-- 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! --> I tried to set `SystemUiVisibility` flag to `SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR` to enable Android's light soft navigation bar, but when I had `<StatusBar />` component in my view, then it was always overwritten. This is how I found the bug and fixed it. 1. In MainActivity you can set systemUiFlags like this in onCreate method ``` if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { Window window = getWindow(); View rootView = window.getDecorView().getRootView(); rootView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR); } ``` 2. Add <StatusBar /> to a view 3. In `android/app/build.gradle` file set `targetSdkVersion` to **27** instead of 22 or something like that 4. In `android/app/src/main/res/values/styles.xml` add 2 lines to `AppTheme` ``` <item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:navigationBarColor">#ffffff</item> ``` 5. Run the app. 6. Test. Previously bottom soft navigation bar was set to white and buttons also to white (so they weren't visible anymore), because StatusBar was overwriting previously set systemUiVisibility Flags. Now the bar should be white and buttons dark as expected. Previous buggy android bottom navbar <img width="379" alt="screen shot 2017-12-27 at 17 11 57" src="https://user-images.githubusercontent.com/571171/34385126-2a3edc44-eb29-11e7-812e-846cfd2fb88b.png"> New fixed android bottom navbar <img width="379" alt="screen shot 2017-12-27 at 17 12 07" src="https://user-images.githubusercontent.com/571171/34385137-3e82517c-eb29-11e7-8af9-a3b7a41ae8e2.png"> This pull request does not change any existing feature. It only makes StatusBar coloring work more properly without affecting bottom navigation bar on android or any other system ui visibility feature. <!-- 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 --> [ANDROID] [BUGFIX] [StatusBar] - Fixed StatusBar overwriting previously set SystemUiVisibility flags Pull Request resolved: https://github.com/facebook/react-native/pull/17370 Differential Revision: D13860079 Pulled By: cpojer fbshipit-source-id: a0bca7acb7601eb78f0842239ea4dee76a63d1fd |
||
|---|---|---|
| .appveyor | ||
| .circleci | ||
| .github | ||
| ContainerShip | ||
| IntegrationTests | ||
| Libraries | ||
| RNTester | ||
| React | ||
| ReactAndroid | ||
| ReactCommon | ||
| bots | ||
| codegen | ||
| flow | ||
| flow-typed/npm | ||
| gradle/wrapper | ||
| jest | ||
| keystores | ||
| lib | ||
| local-cli | ||
| react-native-git-upgrade | ||
| scripts | ||
| template | ||
| third-party-podspecs | ||
| tools/build_defs | ||
| .buckconfig | ||
| .buckjavaargs | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc | ||
| .flowconfig | ||
| .flowconfig.android | ||
| .gitattributes | ||
| .gitignore | ||
| .nvmrc | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| DockerTests.md | ||
| Jenkinsfile | ||
| LICENSE | ||
| LICENSE-docs | ||
| README.md | ||
| React.podspec | ||
| Releases.md | ||
| build.gradle | ||
| cli.js | ||
| gradlew | ||
| gradlew.bat | ||
| jest-preset.js | ||
| package.json | ||
| react.gradle | ||
| rn-cli.config.js | ||
| rn-get-polyfills.js | ||
| runXcodeTests.sh | ||
| settings.gradle | ||
| yarn.lock | ||
README.md
React Native · 
Learn once, write anywhere: Build mobile apps with React.
See the official React Native website for an introduction to React Native.
Requirements
Supported target operating systems are >= Android 4.1 (API 16) and >= iOS 9.0. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS by default (tools like Expo can be used to get around this).
Building your first React Native app
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:
How React Native works
React Native lets you build mobile apps using JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
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, Kotlin, 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.
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.
React Native combines smoothly with components written in Objective-C, Java, Kotlin, 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. You can learn more about our open source roadmap in this blog post: Open Source Roadmap.
Full documentation
The full documentation for React Native can be found on our website. The source for the React Native documentation and website is hosted on a separate repo, https://github.com/facebook/react-native-website. Releases are discussed in the React Native Community, https://github.com/react-native-community/react-native-releases, and larger discussions and proposals are in https://github.com/react-native-community/discussions-and-proposals.
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.
Join the React Native community
- Website: https://facebook.github.io/react-native
- Twitter: https://twitter.com/reactnative
- Help: https://facebook.github.io/react-native/en/help
See the CONTRIBUTING file for how to help out.
License
React Native is MIT licensed, as found in the LICENSE file.
React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.