Move tabview to a separate component

ContactAssistApp · May 6, 2020 · 8928b86 · 8928b86
1 parent 5480dde
commit 8928b86
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 22 deletions.
diff --git a/ContactLog/ContactLog.js b/ContactLog/ContactLog.js
@@ -7,7 +7,6 @@ import {
   Image,
   TouchableOpacity,
 } from 'react-native';
-import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
 import colors from '../assets/colors';
 import Locations from './Locations';
 import People from './People';
@@ -17,6 +16,7 @@ import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import Calendar from '../views/Calendar';
+import TabView from '../views/TabView';
 
 class ContactLog extends Component {
   constructor() {
@@ -61,29 +61,10 @@ class ContactLog extends Component {
               value: new Date(day.dateString.replace(/-/g, '/')),
             });
           }}>
-          <ScrollableTabView
-            initialPage={1}
-            renderTabBar={() => {
-              return (
-                <DefaultTabBar
-                  backgroundColor={'white'}
-                  activeTextColor={colors.section_title}
-                  inactiveTextColor={colors.gray_icon}
-                  textStyle={{
-                    fontWeight: '500',
-                    textTransform: 'uppercase'
-                  }}
-                  underlineStyle={{
-                    height: 2,
-                    backgroundColor: colors.primary_theme
-                  }}
-                  tabStyle={{paddingTop: 10}}
-                />
-              );
-            }}>
+          <TabView>
             <Locations tabLabel={'locations'} />
             <People tabLabel={'people'} />
-          </ScrollableTabView>
+          </TabView>
         </Calendar>
       </>
     );
@@ -116,6 +97,17 @@ const styles = StyleSheet.create({
     color: colors.section_title,
     fontWeight: '500',
   },
+  tabBarText: {
+    fontWeight: '500',
+    textTransform: 'uppercase',
+  },
+  tabBarUnderline: {
+    height: 2,
+    backgroundColor: colors.primary_theme,
+  },
+  tabBar: {
+    paddingTop: 10,
+  },
 });
 
 ContactLog.propTypes = {

diff --git a/views/TabView.js b/views/TabView.js
@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
+import colors from '../assets/colors';
+
+class TabView extends Component {
+  render() {
+    return (
+      <ScrollableTabView
+        initialPage={0}
+        renderTabBar={() => {
+          return (
+            <DefaultTabBar
+              backgroundColor={'white'}
+              activeTextColor={colors.section_title}
+              inactiveTextColor={colors.gray_icon}
+              textStyle={styles.tabBarText}
+              underlineStyle={styles.tabBarUnderline}
+              tabStyle={styles.tabBar}
+            />
+          );
+        }}>
+        {this.props.children}
+      </ScrollableTabView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tabBarText: {
+    fontWeight: '500',
+    textTransform: 'uppercase',
+  },
+  tabBarUnderline: {
+    height: 2,
+    backgroundColor: colors.primary_theme,
+  },
+  tabBar: {
+    paddingTop: 10,
+  },
+});
+
+export default TabView;