React-Native - How to create tabs dynamically in Native Base?

user_5457417 0
Viewed 1169

I want to use Tabs from the native base library but I don't know how can I create tabs dynamically?

In the official documentation, the tabs are added manually. But how can I add tabs dynamically?

native-base react-native
1 Answers

you need to create array of tabs component using some loop then render the array of components for Example :

export default class ThemeTabsExample extends Component {
    makeTabs = ()=>{
      //make array of components which finally look like this one  :
      //[<CustomeTabComponent tabLabel='One' />,
      // <CustomeTabComponent tabLabel='two' />,
      // <CustomeTabComponent tabLabel='three' />
      // ]
     // hint :
     Output = []
     for ....
         Output.push(<CustomeTabComponent />)
    }
    render() {
        let Tabs = this.makeTabs(....) // you can use 'loop' here instead of calling Function
        return (
            <Container>
                <Content>
                    <Tabs>
                    {Tabs}
                    </Tabs>
                </Content>
            </Container>
        );
    }
}
user_21355160
Related