Skip to content

Update status-bar.md #381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 21, 2019
Merged

Update status-bar.md #381

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/status-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ If you don't have a navigation header, or your navigation header changes color b

This is a simple task when using a stack or drawer. You can simply render the `StatusBar` component, which is exposed by React Native, and set your config.

```javascript
```jsx
class Screen1 extends React.Component {
render() {
return (
Expand Down Expand Up @@ -53,7 +53,7 @@ class Screen2 extends React.Component {
}
```

```javascript
```jsx
export default createStackNavigator({
Screen1: {
screen: Screen1,
Expand All @@ -68,7 +68,7 @@ export default createStackNavigator({

![StackNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-stack-demo.gif)

```javascript
```jsx
export default createDrawerNavigator({
Screen1: {
screen: Screen1,
Expand All @@ -92,7 +92,7 @@ To fix this we'll have to do two things

First, the new `Screen2.js` will no longer use the `StatusBar` component.

```javascript
```jsx
class Screen2 extends React.Component {
render() {
return (
Expand All @@ -116,7 +116,7 @@ class Screen2 extends React.Component {

Then, in both `Screen1.js` and `Screen2.js` we'll set up a listener to change the `StatusBar` configuration when that tab `didFocus`. We'll also make sure to remove the listener when the `TabNavigator` has been unmounted.

```javascript
```jsx
class Screen1 extends React.Component {
componentDidMount() {
this._navListener = this.props.navigation.addListener('didFocus', () => {
Expand Down