CODEWITHSUNDEEP
react-nativereact-navigation
Embata
Embata

Reputation: 21

React-navigation, createMaterialTopTabNavigator. Problem

picture

My problem is that I don't know were to put "title". I have TabNavigator, with two pages. You can see on the image, which is what I really want to do. 

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';


class HomeScreen extends React.Component {

    render() {

        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <View >
                    <Button
                        title='Click me'
                        onPress={() => this.props.navigation.navigate('HomeScreen')} />
                </View>
            </View>
        );
    }
}

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        );
    }
}

export default createMaterialTopTabNavigator({
    Test1: { screen: HomeScreen },
    Test2: { screen: SettingsScreen },
});

Upvotes: 1

Views: 2741

Answers (1)

Naoufal
Naoufal

Reputation: 427

One possible solution is to wrap the MaterialTopTabNavigatorinside a StackNavigator and add the title option to it. So your code should looks something similar to this:

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <View >
            <Button
                title='Click me'
                onPress={() => this.props.navigation.navigate('HomeScreen')} />
          </View>
        </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>
        </View>
    );
  }
}

const App = createMaterialTopTabNavigator({
  Test1: { screen: HomeScreen },
  Test2: { screen: SettingsScreen },
});

export default createStackNavigator({
  app: {
    screen: App,
    navigationOptions: {
      title: 'Screen title',
    },
  },
});

Upvotes: 2

Related Questions