react native stackNavigation header

Question

I'm facing a little problem with the header included with the stackNavigator in react-native.

i'v got two views that i'm navigating between, Skatebay and Profile. When I use the stackNavigator it add's a top-bar "header" to the Skatebay view, how can i remove it, if not possible, can i style it to look like the header i've already created?

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Image,
  ScrollView,
  Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import s from './styles/main.js';

class skatebay extends React.Component{

  render(){
    const { navigate } = this.props.navigation;
    return (

  <View style={s.container}>

      <View style={s.toolbar}>
        <TouchableHighlight style={s.toolbarButton} onPress={() => navigate('Profile')}
          title="Profile">
          <Image style={s.toolIcon} source={require('./gfx/profile.png')}/>
        </TouchableHighlight>

        <TouchableHighlight style={s.toolbarTitle} onPress={alert}>
          <Image style={s.logo} source={require('./gfx/logos.png')}/>
        </TouchableHighlight>

        <TouchableHighlight style={s.toolbarButton} onPress={alert}>
          <Image style={s.toolIcon} source={require('./gfx/settings.png')}/>
        </TouchableHighlight>
      </View>

      </View>
    );
    }
}

Profile view

class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
render() {
    return (
      <View>
        <Text>profile</Text>
      </View>
    );
  }
}


const skatebayApp = StackNavigator({
  Main: {screen: skatebay},
  Profile: {screen: ProfileScreen}
});

AppRegistry.registerComponent('skatebayApp', () => skatebayApp);

I'm talking about the blue/gray header above the white header i've created.

agenthunt · Accepted Answer · 2017-05-03 13:36:19Z

2

If you dont want the default header of StackNavigator, you can pass none to StackNavigatorConfig https://reactnavigation.org/docs/navigators/stack#StackNavigatorConfig

const skatebayApp = StackNavigator({
  Main: {screen: skatebay},
  Profile: {screen: ProfileScreen}
}, {
  headerMode: 'none'
});

answered May 3, 2017 at 13:36

agenthunt

8,6983 gold badges32 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

danni olsen Over a year ago

Thanks a lot, can't belive it was so hard to find. You saved my day

Collectives™ on Stack Overflow

react native stackNavigation header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related