Update example-redux

example-redux/src/screens/FirstTabScreen.js

@@ -21,7 +21,8 @@ class FirstTabScreen extends Component {
     navigationBarColor: '#303F9F',
     tabSelectedTextColor: '#FFA000',
     tabNormalTextColor: '#FFC107',
-    tabIndicatorColor: '#FFA000'
+    tabIndicatorColor: '#FFA000',
+    drawUnderTabBar: true
   };
 
   static navigatorButtons = {
@@ -54,6 +55,10 @@ class FirstTabScreen extends Component {
         Alert.alert('NavBar', 'Add button pressed');
         break;
 
+      case 'selectedTabChanged':
+        console.log('selectedTabChanged ' + event.position);
+        break;
+
       default:
         console.log('Unhandled event ' + event.id);
         break;

example-redux/src/screens/PushedScreen.js

@@ -12,6 +12,7 @@ import {connect} from 'react-redux';
 import * as counterActions from '../reducers/counter/actions';
 
 const leftButtons = ['back', 'cancel', 'accept', 'sideMenu'];
+let bottomTabsVisible = true;
 
 // this is a traditional React component connected to the redux store
 class PushedScreen extends Component {
@@ -53,7 +54,6 @@ class PushedScreen extends Component {
   }
 
   onNavigatorEvent(event) {
-    console.log('onNavigatorEvent ' + event.id);
     switch (event.id) {
       case 'cancel':
         Alert.alert('NavBar', 'Cancel button pressed');
@@ -109,6 +109,10 @@ class PushedScreen extends Component {
           <Text style={styles.button}>Change Left Button</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={ this.onToggleBottomTabsPress.bind(this) }>
+          <Text style={styles.button}>Toggle BottomTabs</Text>
+        </TouchableOpacity>
+
         <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}/>
 
         <Text style={{fontWeight: '500'}}>String prop: {this.props.str}</Text>
@@ -206,6 +210,14 @@ class PushedScreen extends Component {
     this.currentBackButton += 1;
     this.currentBackButton = this.currentBackButton % 4;
   }
+
+  onToggleBottomTabsPress() {
+    this.props.navigator.toggleTabs({
+      to: bottomTabsVisible ? 'shown' : 'hidden',
+      animated: true
+    });
+    bottomTabsVisible = !bottomTabsVisible;
+  }
 }
 
 const styles = StyleSheet.create({