CODEWITHSUNDEEP
javascriptreact-nativetabsreact-navigationnavigationbar
Lylys
Lylys

Reputation: 57

How to add a button on the header ? (React Native)

How to add a button on the header bar at the top right? I would like that button opens my page "Parametres" ?

(I don't want my "Parametres" page to be on the bottom tab.)

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import Parametres from '../screens/Parametres';


const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }/>),};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Linkscreen',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />),};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />),};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
  Parametres,
});

This is my "MainTabNavigator.js" page. I am novice, any help would be very appreciated.

Upvotes: 1

Views: 10135

Answers (2)

kivul
kivul

Reputation: 1158

Try this:

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  navigationOptions: ({ navigation }) => ({
    headerRight: (
      <Button
        title="Parametres"
        onPress={() => navigation.navigate('Parametres')}
      />
    ),
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) => (
      <TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
        }
      />
    ),
  }),
});

You could remove the HomeStack.navigationOptions with this

Upvotes: 0

Chris Gomez
Chris Gomez

Reputation: 6794

You need to add the header button to navigationOptions

You may do it this way:

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import Parametres from '../screens/Parametres';


const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
headerRight: <Button
    onPress={() => this.props.navigation.navigate('Parametres')}
    title="Parameters"
    color="#fff"
/>,
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
<TabBarIcon
  focused={focused}
  name={
    Platform.OS === 'ios'
      ? `ios-information-circle${focused ? '' : '-outline'}`
      : 'md-information-circle'
  }/>),};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Linkscreen',
  tabBarIcon: ({ focused }) => (
<TabBarIcon
  focused={focused}
  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
/>),};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
<TabBarIcon
  focused={focused}
  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>),};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
  Parametres,
});

Note: I'm assuming you're route name is Parametres

Upvotes: 1

Related Questions