CODEWITHSUNDEEP
react-nativereact-native-navigation
Rexam
Rexam

Reputation: 913

How to create a tab navigation bar in React Native?

I would like to create a Tab bar like the one on Twitter shown also in this question here, but I don't want it to be at the top or at the bottom of the screen. There must be a title in my app with a certain style, some information and only after the tab bar. I'm trying to implement it with React-Natigation but it seems that by default you can only create tab bars at the top or at the bottom of the screen.

Up to now, I created a sample code for the Tab Bar:

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

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

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

const TabNavigator = createMaterialTopTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

And here's the code of the screen where I want this tab bar to appear:

import React from 'react';
import { Text, View } from 'react-native';
import { TabNavigator } from './../MyTab.js'

class App extends React.Component {
  render() {
    return (
      <View>
        <Text style={...some style...}>Title</Text>
        <Text>Some text</Text>
        <TabNavigator />
      </View>
    );
  }
}

export default App;

But this code fails with error:

Device: (101:380) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Do you have any suggestion to implement a tab bar like that one? I don't even need a real "navigation" bar because its purpose is to filter some data, so every time I tap on a tab, I simply want to call a function as it happens for items that have an onPress function, like buttons.

Upvotes: 2

Views: 2906

Answers (1)

displayname
displayname

Reputation: 1074

You can nested your TabBar inside a StackNavigator.

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


class StackScreen extends React.Component{
 render(){
  return(
    <View>
     <Text>Title</Text>
     <Text>Some text</Text>
   </View>
   )
 }
}


const TabNavi = createMaterialTopTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});


const StackNavi = create StackNavigator({
  Main: {screen: TabNavi,
   navigationOptions: ({navigation}) => ({
      header: <StackScreen navigation= {navigation} />,
    })
  },
});

export default createAppContainer(StackNavi);

Hope that helps

Upvotes: 1

Related Questions