Updated example for 3.0

Example/example/exampleMain.js

@@ -1,55 +1,82 @@
 import React, { Component } from 'react';
 import {
-  StyleSheet,
-  Text,
-  View
+    StyleSheet,
+    Text,
+    View
 } from 'react-native';
 
 import SegmentedControlTab from 'react-native-segmented-control-tab'
 
 class ExampleMain extends Component {
-   constructor(props) {
+    constructor(props) {
         super(props)
-        this.handleSegmentChange = this.handleSegmentChange.bind(this)
         this.state = {
-            secondTab: false
+            selectedIndex: 0,
+            selectedIndices: [0],
+            customStyleIndex: 0,
         }
     }
-  handleSegmentChange(index) {
+
+    handleSingleIndexSelect = (index) => {
         this.setState({
-            secondTab: index == 1
-        })
-         console.log(index)
+            ...this.state,
+            selectedIndex: index,
+        });
     }
-  render() {
-    return (
-      <View style={styles.container}>
-      
-            <Text style={styles.titleText}>Default segmented control</Text>
-            <SegmentedControlTab />
+
+    handleMultipleIndexSelect = (index) => {
+        if (this.state.selectedIndices.includes(index)) {
+            this.setState({
+                ...this.state,
+                selectedIndices: this.state.selectedIndices.filter((i) => i !== index),
+            });
+        }
+        else {
+            this.setState({
+                ...this.state,
+                selectedIndices: [
+                    ...this.state.selectedIndices,
+                    index,
+                ],
+            });
+        }
+    }
+
+    handleCustomIndexSelect = (index) => {
+        this.setState({
+            ...this.state,
+            customStyleIndex: index,
+        });
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text>Default segmented control with single selection</Text>
+                <SegmentedControlTab
+                    selectedIndex={this.state.selectedIndex}
+                    onTabPress={this.handleSingleIndexSelect} />
             <View style={styles.Seperator} />
-            <Text style={styles.titleText}>Default segmented control with Multile tab selection </Text>
-            <SegmentedControlTab multiple />
+                <Text>Default segmented control with multiple selection</Text>
+                <SegmentedControlTab
+                    multiple={true}
+                    selectedIndices={this.state.selectedIndices}
+                    onTabPress={this.handleMultipleIndexSelect} />
             <View style={styles.Seperator} />
-            
-            <Text style={styles.titleText}>Custom segmented control with custom styles</Text>
-            <SegmentedControlTab values={['one', 'two']}
-                onTabPress= {index => this.handleSegmentChange(index) }
-                borderRadius={0}
-                tabsContainerStyle={{height: 50, backgroundColor: '#F2F2F2'}}
-                tabStyle={{backgroundColor: '#F2F2F2', borderWidth: 0}}
-                activeTabStyle={{backgroundColor: 'white', marginTop: 2}}
-                tabTextStyle={{color: '#444444', fontWeight: 'bold'}}
-                activeTabTextStyle={{color: '#888888'}}/>
-                {!this.state.secondTab &&
-                  <Text style={styles.tabViewText}>First tab!!</Text>
-                }
-                 {this.state.secondTab &&
-                  <Text style={styles.tabViewText}>Second tab!!</Text>
-                }
-      </View>
-    );
-  }
+                <Text>Custom segmented control with custom styles</Text>
+                <SegmentedControlTab
+                    values={['one', 'two']}
+                    selectedIndex={this.state.customStyleIndex}
+                    onTabPress={this.handleCustomIndexSelect}
+                    borderRadius={0}
+                    tabsContainerStyle={{ height: 50, backgroundColor: '#F2F2F2' }}
+                    tabStyle={{ backgroundColor: '#F2F2F2', borderWidth: 0 }}
+                    activeTabStyle={{ backgroundColor: 'white', marginTop: 2 }}
+                    tabTextStyle={{ color: '#444444', fontWeight: 'bold' }}
+                    activeTabTextStyle={{ color: '#888888' }} />
+            </View>
+        );
+    }
 }
 
 const styles = StyleSheet.create({
@@ -79,6 +106,8 @@ const styles = StyleSheet.create({
     borderTopColor: '#888888',
     marginTop: 24
   }
-});
+})
+
+
 
 export default ExampleMain