react-native-tabbed-control

Demo

Installation

$ npm install react-native-tabbed-control --save

Example Without Attached Views

...
import TabbedControl from 'react-native-tabbed-control';

const tabs = [{title: 'South Africa'} , {title: 'Zambia'}];

updateIndex(selectedIndex) {
  this.setState({selectedIndex: selectedIndex});
}
  
render() {
  return (
    <View>
      <TabbedControl tabs={tabs} color={'#024b30'} onIndexChange={this.updateIndex}/>
    </View>
  );
};

Example With Static Views Attached

...
import TabbedControl from 'react-native-tabbed-control';

const One = () => { return <Text>This is first view</Text>; };
const Two = () => { return <Text>This is second view</Text>; };

const tabs = [
  {
    title: 'One',
    view: One
  },
  {
    title: 'Two',
    view: Two
  }
];

render() {
  return (
    <View style={styles.container}>
      <TabbedControl tabs={tabs} color={'#024b30'} />
    </View>
  );
};

Tab Properties

| Property | Type | isRequired | | --- | --- | --- | | title | String | YES | | view | View | NO |

TabbedControl Properties

| Property | Type | isRequired | | --- | --- | --- | | tabs | Tab Array | NO | | color | Color | NO | | onIndexChange | Function | NO |

How can I support the developers?

• Star our GitHub repo ⭐
• Create pull requests, submit bugs, suggest new features or documentation updates 🔧
• Follow me on Twitter
• Follow me on Instagram
• Buy me coffee or Donate

More from the developers

• Rona Mobile App - Covid19 Global Pandemic Statistics Tracker
• Luno API Playground - A Swift playground on the Public Luno API.
• VALR API Playground - A Swift playground on the VALR Public API
• DemoProject
• Fin24

License

MIT license.

From Developers

Made with ♥ by Manenga. Support me by making a donation.

TO-DO's:

• [X] onIndexChange when a tab is tapped
• [ ] Add icons as tab titles
• [ ] Update selected index on scroll