CODEWITHSUNDEEP
react-nativereact-navigation
Syed
Syed

Reputation: 530

Header title doesn't show up

I am using stackNavigator with a few screen in my app. when I use title in the navigationOption object it doesn't display the title in the header. I have search the some answer but the closest I could get was this one, which doesn't quite relates to mine. the problem also doesn't get fixed when using createStacknavigator. StackNavigator title not showing in simplest example

// Router

import { StackNavigator } from 'react-navigation';

export const ScreenSwitcher = StackNavigator({

    SignIn:{
        screen: SignIn,
    },
    Home: {
        screen: Home,
        navigationOption: {
            title: 'HOME TITLE',
        },
    },
    Card: {
        screen: Card,
        navigationOption: {
            title: `CARD TITLE`,
        },
    },
},
    {
        mode: 'card',// modal, card
        headerMode: 'float', // float,screen, none
    }
);

//Card Component

class Home extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            url: 'http://localhost:3000',
            passedInfo: [],
        }
        // Request to the server to get members data
        fetch(this.state.url)
            .then(res => res.json())
            .then(data => {this.setState({passedInfo : data.members })})
            .catch(err => alert(err))
    }

    //  Render each member to the data received
    renderMembers = members =>  members.map((members, index) => <Card info={members} key = {index}/>);

    render = () => { return (
        <View style={styles.main}>

            <ScrollView contentContainerStyle={styles.scroll}>
                <SearchFilter />
                <Header />
                {this.renderMembers(this.state.passedInfo)}
            </ScrollView>

        </View>
    )} 
}

Upvotes: 1

Views: 4312

Answers (5)

suresh
suresh

Reputation: 2397

Use navigationOptions object as below:

const HomeStackNavigator = createStackNavigator({
  Home:{
    screen:App,
    navigationOptions:({navigation})=>({
      headerRight:<DrawerStructure navigationProps={navigation}/>,
      headerTintColor:'black',
      title:'All Ideas',
    }),
  }
});

Note: headerTintColor is the color of the header text and title is the actual header title.

Upvotes: 0

Tarreq
Tarreq

Reputation: 1365

You can just add navigationOptions at the component file like, for example in signIn screen component file : 

class signIn extends React.Component {
  static navigationOptions = {
    title: 'Sign In',
  };

  /* render function, etc */
}

Upvotes: 1

Thakur Anil
Thakur Anil

Reputation: 79

import { StackNavigator } from 'react-navigation';

export const ScreenSwitcher = StackNavigator({

SignIn:{
    screen: SignIn,
},
Home: {
    screen: Home,
    navigationOptions: {
        title: 'HOME TITLE',
    },
},
Card: {
    screen: Card,
    navigationOptions: {
        title: `CARD TITLE`,
    },
},

}, { mode: 'card',// modal, card headerMode: 'float', // float,screen, none } );

Upvotes: -1

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4869

Try navigationOptions instead of navigationOption.

Upvotes: 4

markb
markb

Reputation: 279

In each component that you would like a title, throw this piece of code in:

static navigationOptions = {
    title: 'YOUR TITLE HERE',
  };

Upvotes: 1

Related Questions