Native Base Footer Nav Tabs - react-native

Question

I am new to React Native and have created a footer with three button tabs. I am now wondering how to render different screens by clicking the buttons. My code:
export default class Uptown extends Component {
render() {
return (
<Container>
<Header>
<Title>Uptown</Title>
</Header>
<Content>
<App />
</Content>
<Footer>
<FooterTab>
<Button>
Contact
</Button>
<Button>
Here
</Button>
<Button>
Me
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
How would I go about changing screens when the buttons are pressed?

Answer 1

You can add conditional rendering instead of static <App/> tag. You can use code as following to render conditionally based on selected footer. (I used state variable to store selected page index. When index changed, render function automatically called by engine)
import First from './Home' // your first screen
import Next from './Next' // your second screen
class Updown extends Component {
constructor(props) {
super(props)
this.state = {index: 0} // default screen index
}
switchScreen(index) {
this.setState({index: index})
}
render() {
let AppComponent = null;
if (this.state.index == 0) {
AppComponent = First
} else {
AppComponent = Second
}
return (
<Container>
<Header><Title> Header... </Title></Header>
<Content> <AppComponent/> </Content>
<Footer>
<Button onPress={() => this.switchScreen(0) }> First </Button>
<Button onPress={() => this.switchScreen(1) }> Second </Button>
</Footer>
</Container>
)
}
}

Answer 2

I think as of native-base v2.3.1 (August 2017) the recommended way is to follow documentation on React Navigation / TabNavigator. Of course this is only if you actually intend to use TabNavigator (which I do) with the benefits of React Navigation (I'm not knowledgeable enough to say what those are).
But if you want the footer tabs to be part of the main navigation structure of your app, instead of an ad-hoc mechanism for one page, this seems to be the way to go.
import React, { Component } from "react";
import LucyChat from "./LucyChat.js";
import JadeChat from "./JadeChat.js";
import NineChat from "./NineChat.js";
import { TabNavigator } from "react-navigation";
import { Button, Text, Icon, Footer, FooterTab } from "native-base";
export default (MainScreenNavigator = TabNavigator(
{
LucyChat: { screen: LucyChat },
JadeChat: { screen: JadeChat },
NineChat: { screen: NineChat }
},
{
tabBarPosition: "bottom",
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
active={props.navigationState.index === 0}
onPress={() => props.navigation.navigate("LucyChat")}>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
active={props.navigationState.index === 1}
onPress={() => props.navigation.navigate("JadeChat")}>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
active={props.navigationState.index === 2}
onPress={() => props.navigation.navigate("NineChat")}>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
));

Answer 3

You need to create a current index and bind the function to switch from a tab to another.
To do it use this :
import First from './First'
import Second from './Second'
class Updown extends Component {
constructor(props) {
super(props)
this.setState({currentIndex: 0}) // default screen index
}
switchScreen(index) {
this.setState({currentIndex: index})
}
render() {
let AppComponent = null;
//Here you can add as many tabs you need
if (this.state.currentIndex == 0) {
AppComponent = First
} else {
AppComponent = Second
}
return (
<Container>
<Header><Title> Header... </Title></Header>
<Content>
{AppComponent} // Load the component like this
</Content>
<Footer>
//HERE don't forget the bind function and pass the appropriate number
<Button onPress={() => this.switchScreen.bind(this,0) }> First </Button>
<Button onPress={() => this.switchScreen.bind(this,1) }> Second </Button>
</Footer>
</Container>
)
}
}
Hope it helps :)

Answer 4

I think that we can check some part of the #Hossein Mobasher code
import First from './Home' // your first screen
import Next from './Next' // your second screen
class Updown extends Component {
constructor(props) {
super(props)
this.state = {index: 0} // default screen index
}
switchScreen(index) {
this.setState({index: index})
}
render() {
let AppComponent = null;
if (this.state.index == 0) {
AppComponent = First
} else {
AppComponent = Second
}
return (
<Container>
<Header><Title> Header... </Title></Header>
<Content>
<AppComponent/> // you can write like this
</Content>
<Footer>
<Button onPress={() => this.switchScreen(0) }> First </Button>
<Button onPress={() => this.switchScreen(1) }> Second </Button>
</Footer>
</Container>
)
}
}