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:

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