Add a view in a body of the tab - react-native

Question

I am new to react native. I have a tab but could not figure out how to add a view inside the body of a specific tab. For instance I want a list in tab "first", how can I add this component here? Thankyou in advance.
import Tabs from 'react-native-tabs';
class Example extends Component {
constructor(props){
super(props);
this.state = {page:'second'};
}
render() {
var self = this;
return (
<View style={styles.container}>
<Tabs selected={this.state.page} style={{backgroundColor:'white'}}
selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
<Text name="first">First</Text>
<Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
<Text name="third">Third</Text>
<Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
<Text name="fifth">Fifth</Text>
</Tabs>
<Text style={styles.welcome}>
Welcome to React Native
</Text>
<Text style={styles.instructions}>
Selected page: {this.state.page}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Example', () => Example);

Answer 1

The react-native-tabs package takes each child of the <Tabs> tag and wraps it into a separate component that will only be shown when the tab is selected. So what you have to do is the following:
render() {
var self = this;
return (
<View style={styles.container}>
<Tabs selected={this.state.page} style={{backgroundColor:'white'}}
selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
<View name="view">
<Text>Text Wrapped inside a view</Text>
</View>
<View name="custom component" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>
<MyCustomComponent/>
</View>
<Text name="third">Third</Text>
<Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
<Text name="fifth">Fifth</Text>
</Tabs>
</View>
);
Everything rendered outside the <Tabs> tag will appear no matter which tab is selected.