added code for to avoid one frame delay to calculate intiallaytout for react native tab views

Author: Jasan Singh

app/containers/TabBarB/TabBarBContainer.js

@@ -1,10 +1,14 @@
 import React, { Component } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Dimensions } from 'react-native';
 import { TabViewAnimated, TabBar } from 'react-native-tab-view';
 import { ListsContainer } from '~/containers'
 import TabBarBottom from './TabBarBottom'
 import Icon from 'react-native-vector-icons/Ionicons'
 
+const initialLayout = {
+  height: 0,
+  width: Dimensions.get('window').width,
+}
 
 export default class TabViewExample extends Component {
   state = {
@@ -17,7 +21,6 @@ export default class TabViewExample extends Component {
   };
 
   handleChangeTab = (index) => {
-    console.log('Top TABBAR index: ', index)
     this.setState({ index });
   };
 
@@ -26,7 +29,6 @@ export default class TabViewExample extends Component {
   };
 
   renderScene = ({ route }) => {
-    console.log('Top TABBAR key: ', route.key)
     switch (route.key) {
     case '1':
       return <TabBarBottom />
@@ -62,6 +64,7 @@ export default class TabViewExample extends Component {
         renderScene={this.renderScene}
         renderHeader={this.renderHeader}
         onRequestChangeTab={this.handleChangeTab}
+        initialLayout={initialLayout}
       />
     );
   }

app/containers/TabBarB/TabBarBottom.js

@@ -1,8 +1,14 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Platform  } from 'react-native';
+import { View, StyleSheet, Platform, Dimensions  } from 'react-native';
 import { TabViewAnimated, TabBar, TabViewPagerScroll, TabViewPagerPan } from 'react-native-tab-view';
 import Icon from 'react-native-vector-icons/Ionicons'
 
+const initialLayout = {
+  height: 0,
+  width: Dimensions.get('window').width,
+}
+
+
 export default class TabBarBottom extends Component {
   state = {
     index: 0,
@@ -13,7 +19,6 @@ export default class TabBarBottom extends Component {
   };
 
   handleChangeTab = (index) => {
-    console.log('Bottom TABBAR index: ', index)
     this.setState({ index });
   };
 
@@ -22,7 +27,6 @@ export default class TabBarBottom extends Component {
   };
 
   renderScene = ({ route }) => {
-    console.log('Bottom TABBAR key: ', route.key)
     switch (route.key) {
     case '1':
       return <View style={[ styles.page, { backgroundColor: '#96ceb4' } ]} />;
@@ -55,6 +59,7 @@ export default class TabBarBottom extends Component {
         swipeEnabled ={false}
         animationEnabled ={false}
         renderPager={this.renderPager}
+        initialLayout={initialLayout}
       />
     );
   }