Quantcast
Channel: React Native, change React Navigation header styling - Stack Overflow
Viewing all articles
Browse latest Browse all 7

React Native, change React Navigation header styling

$
0
0

I'm implementing React Navigation in my React Native app, and I'm wanting to change the background and foreground colors of the header. I have the following:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class ReactNativePlayground extends Component {

  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const SimpleApp = StackNavigator({
  Home: { screen: ReactNativePlayground }
});

AppRegistry.registerComponent('ReactNativePlayground', () => SimpleApp);

By default the background color of the heading is white, with a black foreground. I've also looked at the documentation for React Navigation but I'm not able to find where it shows how to set the styling. Any help?


Viewing all articles
Browse latest Browse all 7

Latest Images

Trending Articles





Latest Images