Replace segmented control

ios/Podfile.lock

@@ -1,5 +1,7 @@
 PODS:
   - boost-for-react-native (1.63.0)
+  - BVLinearGradient (2.5.6):
+    - React
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.61.3)
   - FBReactNativeSpec (0.61.3):
@@ -228,6 +230,7 @@ PODS:
   - Yoga (1.14.0)
 
 DEPENDENCIES:
+  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
@@ -266,6 +269,8 @@ SPEC REPOS:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
+  BVLinearGradient:
+    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -327,6 +332,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
+  BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: 5bc5b1606fc9a7ac6956de049f6e30901ed31c49
   FBReactNativeSpec: f7be9bcc5ce259f7c39509f3f4caf59020d11d4c

package.json

@@ -21,6 +21,7 @@
     "react-native-pose": "^0.9.1",
     "react-native-reanimated": "^1.4.0",
     "react-native-screens": "^2.0.0-alpha.7",
+    "react-native-segmented-control-tab": "^3.4.1",
     "react-native-svg": "^9.13.3",
     "react-navigation": "^4.0.10",
     "react-navigation-stack": "^1.10.3",

src/ui/components/Control/SegmentedControl.tsx

@@ -1,36 +1,59 @@
-import SegmentedControlIOS from '@react-native-community/segmented-control';
+import SegmentedControlTab from 'react-native-segmented-control-tab';
 import React from 'react';
+import SegmentedControlStyles from './SegmentedControlStyles';
+import { ThemeColors } from 'react-navigation';
+import theme from 'ui/theme';
 
 interface SegmentedControlProps {
   values?: any;
   selectedIndex?: number;
-  style?: any;
-  momentary?: any;
-  enabled?: any;
-  tintColor?: any;
-  backgroundColor?: any;
+  enabled?: boolean;
+  borderRadius?: number;
+  tabsContainerStyle?: any;
+  tabStyle?: any;
+  firstTabStyle?: any;
+  lastTabStyle?: any;
+  tabTextStyle?: any;
+  activeTabStyle?: any;
+  activeTabTextStyle?: any;
+  allowFontScaling?: any;
+  onTabPress?: () => void;
 }
 
-const SegmentedControl: React.FC<SegmentedControlProps> = ({
-  values,
-  selectedIndex,
-  style,
-  momentary,
-  enabled,
-  tintColor,
-  backgroundColor
-}) => {
-  return (
-    <SegmentedControlIOS
-      values={values}
-      selectedIndex={selectedIndex}
-      style={style}
-      momentary={momentary}
-      enabled={enabled}
-      tintColor={tintColor}
-      backgroundColor={backgroundColor}
-    ></SegmentedControlIOS>
-  );
-};
+interface SegmentedControlState {
+  selectedIndex: number;
+}
+
+class SegmentedControl extends React.Component<
+  SegmentedControlProps,
+  SegmentedControlState
+> {
+  constructor(props: SegmentedControlProps) {
+    super(props);
+    this.state = {
+      selectedIndex: 0
+    };
+  }
+
+  handleSingleIndexSelect = (index: number) => {
+    this.setState(prevState => ({ ...prevState, selectedIndex: index }));
+  };
+
+  render() {
+    const { selectedIndex } = this.state;
+    return (
+      <SegmentedControlTab
+        values={this.props.values}
+        selectedIndex={selectedIndex}
+        onTabPress={this.handleSingleIndexSelect}
+        borderRadius={theme.radius.med}
+        tabStyle={SegmentedControlStyles.tabStyle}
+        tabTextStyle={SegmentedControlStyles.tabTextStyle}
+        activeTabStyle={SegmentedControlStyles.activeTabStyle}
+        activeTabTextStyle={SegmentedControlStyles.activeTabTextStyle}
+      ></SegmentedControlTab>
+    );
+  }
+}
 
 export default SegmentedControl;

src/ui/components/Control/SegmentedControlStyles.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import theme from 'ui/theme';
+
+const SegmentedControlStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.color.white,
+    padding: 10
+  },
+  tabStyle: {
+    borderColor: theme.color.primary
+  },
+  tabTextStyle: {
+    color: theme.color.primary,
+    fontFamily: theme.font.ui.regular,
+    borderColor: theme.color.primary
+  },
+  activeTabStyle: {
+    backgroundColor: theme.color.primary,
+    fontFamily: theme.font.ui.bold
+  },
+  activeTabTextStyle: {
+    fontFamily: theme.font.ui.bold
+  }
+});
+
+export default SegmentedControlStyles;

src/ui/screens/Demo/DemoAvatar.tsx

@@ -16,6 +16,12 @@ interface Props {
   navigation: any;
 }
 
+const Layout = styled.View`
+  flex: 1;
+  align-items: center;
+  position: relative;
+`;
+
 const AvatarWrap = styled.View`
   flex: 1;
   justify-content: center;
@@ -38,18 +44,20 @@ const DemoAvatar: React.FC<Props> = ({ navigation }) => {
       </Header>
 
       <ScreenContent>
-        <AvatarWrap>
-          <Avatar
-            image={AvatarImage}
-            imageStyle={{ borderRadius: theme.radius.xlarge }}
+        <Layout>
+          <AvatarWrap>
+            <Avatar
+              image={AvatarImage}
+              imageStyle={{ borderRadius: theme.radius.xlarge }}
+            />
+          </AvatarWrap>
+          <Back
+            size='small'
+            type='border'
+            label='Back'
+            onPress={() => navigation.pop()}
           />
-        </AvatarWrap>
-        <Back
-          size='small'
-          type='border'
-          label='Back'
-          onPress={() => navigation.pop()}
-        />
+        </Layout>
       </ScreenContent>
     </ScreenContainer>
   );

src/ui/screens/Demo/DemoControls.tsx

@@ -14,13 +14,20 @@ interface Props {
   navigation: any;
 }
 
+const Layout = styled.View`
+  flex: 1;
+  align-items: center;
+  position: relative;
+`;
+
 const Text = styled.Text`
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 10px;
 `;
 
 const View = styled.View`
+  width: 95%;
   margin: 20px 16px;
 `;
 
@@ -39,21 +46,18 @@ const DemoControls: React.FC<Props> = ({ navigation }) => {
       </Header>
 
       <ScreenContent>
-        <View style={{ marginBottom: 10 }}>
-          <Text>Segmented Controls</Text>
-          <SegmentedControl
-            values={['Option 1', 'Option 2', 'Option 3']}
-            selectedIndex={0}
-            tintColor='#155AEE'
-            backgroundColor='#FFFFFF'
+        <Layout>
+          <View style={{ marginBottom: 10 }}>
+            <Text>Segmented Controls</Text>
+            <SegmentedControl values={['First', 'Second', 'Third']} />
+          </View>
+          <Back
+            size='small'
+            type='border'
+            label='Back'
+            onPress={() => navigation.pop()}
           />
-        </View>
-        <Back
-          size='small'
-          type='border'
-          label='Back'
-          onPress={() => navigation.pop()}
-        />
+        </Layout>
       </ScreenContent>
     </ScreenContainer>
   );

src/ui/theme.ts

@@ -11,6 +11,7 @@ const theme = {
   },
 
   color: {
+    primary: 'rgb(29, 21, 237)',
     white: 'rgb(255,255,255)'
   },
 

yarn.lock

@@ -6005,6 +6005,11 @@ react-native-screens@^2.0.0-alpha.7:
   dependencies:
     debounce "^1.2.0"
 
+react-native-segmented-control-tab@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-segmented-control-tab/-/react-native-segmented-control-tab-3.4.1.tgz#b6e54b8975ce8092315c9b0a1ab58b834d8ccf8e"
+  integrity sha512-BNPdlE9Unr0Xabewn8W+FhBMLjssXy9Ey7S7AY0hXlrKrEKFdC9z0yT+eEWd5dLam4T6T4IuGL8b7ZF4uGyWNw==
+
 react-native-svg@^9.13.3:
   version "9.13.3"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.13.3.tgz#6414b337d55af169ac2487ab70f3108404434446"