How to add content (like a flatlist) inside of the tabs?

[Mr-Ingram]

`import React, { Component } from 'react' import { View, StyleSheet } from 'react-native' import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation' import Icon from 'react-native-vector-icons/MaterialIcons'

export default class SimpleBottomNavigation extends Component { render() { return ( <View style={{ flex: 1 }}> <BottomNavigation labelColor="white" rippleColor="white" style={styles.bottomNavigation}

<Tab barBackgroundColor="#37474F" label="Movies & TV" icon={} /> <Tab barBackgroundColor="#00796B" label="Music" icon={} /> <Tab barBackgroundColor="#5D4037" label="Books" icon={} /> <Tab barBackgroundColor="#3E2723" label="Newsstand" icon={} /> ) } }

const styles = StyleSheet.create({ bottomNavigation: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 56 } })`

Basically I want to put a simple flat list in each tab, how can I accomplish this with this simple navigation setup? Thank you!

[timomeh]

If you want to change the screen depending on the active tab, use a library like react-navigation. Please refer to the doc: https://timomeh.gitbook.io/material-bottom-navigation/usage#changing-your-screen

You didn't fill out the issue template (the prefilled text if you open an issue), so I have to guess what your issue is really about. I'm going to close this issue because of that. If you submit a new issue, fill out the issue template.

[Mr-Ingram]

I want it all on one screen while having different content on each tab. For the first tab, it will have Text and on the next tab it will have maybe an Image. Do I put it in between the Tab Components or is there a property for Tab I can use?

[timomeh]

Since renderTab is a render prop, you can use a custom Tab – any custom component you'd like. Check out IconTab for an example.