Adding tab component in a view - react-native

Question

I am new to react native, and I am struggling to understand it. This may be a very basic question.
I have a screen and it consists of a searchbar on top of the page and below it there are Tabs. While navigating through the tabs, the searchbar should not be removed (being at the top level).
MainScreen:
export default class MainScreen extends Component {
render() {
return (
<View>
<Text>My search bar here</Text>
<TabBar></TabBar>
</View>
);
}
}
TabBar:
const routeConfiguration = {
TabEvents: { screen: TabEvents },
TabPeople: { screen: TabPeople },
TabGroups: { screen: TabGroups },
TabMap: { screen: TabMap },
}
const tabBarConfiguration = {
tabBarOptions:{
// some options
}
}
export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)
When running the app, only the text is being displayed My search bar here without the tabs.

Answer 1

To be able to show tabs, the navigator acts like a container with "two views". One is for the screens that you wanna show and, at the bottom, the tabs container.
So, for the MainScreen you just only need to define the tabs/screens that want react navigator to render.
In each screen you will put the header as shown above. You could also define a default header in the navigator props.
MainScreen.js:
const MainScreen = TabNavigator({
TabEvents: { screen: TabEvents },
Second: { screen: SecondPage },
Third: { screen: ThirdPage },
Fourth: { screen: FourthPage },
Fifth: { screen: FifthPage }
}
})
export default MainScreen;
MainScreen.js: (with default header)
const MainScreen = TabNavigator({
TabEvents: { screen: TabEvents },
Second: { screen: SecondPage },
Third: { screen: ThirdPage },
Fourth: { screen: FourthPage },
Fifth: { screen: FifthPage }
}, {
navigationOptions: {
header: <YourHeader />
}
})
export default MainScreen;
TabEvents.js
export default class TabEvents extends Component {
render() {
return (
<View>
<YourHeader />
<MoreStuff/>
</View>
);
}
}
You wil have a more detailed example in the docs ( https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/SimpleTabs.js & https://reactnavigation.org/docs/navigators/tab)

Answer 2

You can wrap your TabNavigator with StackNavigator.
MyTabNavigator.js
const MyTabNavigator = TabNavigator({
ScreenX: { screen: SceenNameX },
ScreenY: { screen: ScreenNameY }
}, {
initialRouteName: 'ScreenX',
tabBarPosition: 'top',
tabBarOptions: {
activeTintColor: '#af0'
}
})
export default MyTabNavigator
MainScreen.js
export default class MainScreen extends Component {
static navigationOptions = {
header: (props) => (
<SearchBar {...props}/>
)
}
render() {
return (
<MyTabNavigator />
)
}
}
MyStackNavigator.js
const MyStackNavigator = StackNavigator({
Main: { screen: MainScreen }
}, {
initialRouteName: 'Main'
})
export default MyStackNavigator
Now you can call MyStackNavigator to load MainScreen which will render the header SearchBar and the body MyTabNavigator.

Answer 3

The way to create a Tab navigator is the following:
tabNavigator.js
import React from 'react'
import { Platform } from 'react-native'
import { TabNavigator, StackNavigator } from 'react-navigation'
const Tabs = TabNavigator({
Home:{ //this is the name of the screen, by default the first screen that you want to show is called Home
screen: component , //this is the component that you want to show in the screen
navigationOptions: {
tabBarLabel: 'some label', //this will be located as a title for the tab
tabBarIcon: ({ tintColor }) => <i> some icon </i>, //this allow you to show a icon in the tab
//the following options are to customize the header, maybe you don't need this.
title: 'some title',
headerStyle:{
backgroundColor: 'blue' // color for the header
},
headerTitleStyle:{
color: 'white' // color for the text on the header
},
header: <YourHeader/>
}
},
// if you need add some other tab repeat the same pattern here OtherScreen:{ ...}
},{
//this are options to customize the tab itself, I added some good ones.
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? primary : white,
style:{
height:40,
backgroundColor: Platform.OS === 'ios' ? white : primary,
shadowRadius: 6,
shadowOpacity: 1,
shadowColor: 'rgba(0,0,0,0.24)',
shadowOffset: {
width: 0,
height: 3
}
}
}
})
export default Tabs
mainScreen.js
import React, { Component} from 'react'
import Tabs from './tabNavigator'
export default class MainScreen extends Component {
render() {
return (
<View>
<Tabs/>
</View>
);
}
}
I hope it helps.