Merge pull request #13 from richardvclam/feature/fade-divider

Feature/fade divider

Author: richardvclam

src/Divider/Divider.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
+import { timing } from 'react-native-redash';
+
+import styles from './DividerStyles';
+
+export interface DividerProps {
+  hide?: boolean;
+}
+
+function _Divider({ hide = false }: DividerProps): JSX.Element {
+  const opacity = React.useRef(new Animated.Value<number>(hide ? 0 : 1));
+
+  Animated.useCode(() => {
+    return Animated.set(
+      opacity.current,
+      timing({
+        from: hide ? 0 : 1,
+        to: hide ? 1 : 0,
+        easing: Easing.linear,
+        duration: 200,
+      }),
+    );
+  }, [hide]);
+
+  return (
+    <Animated.View
+      style={[styles.dividerContainer, { opacity: opacity.current }]}
+    >
+      <View style={styles.divider} />
+    </Animated.View>
+  );
+}
+
+export const Divider = React.memo(_Divider);

src/Divider/DividerStyles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  dividerContainer: {
+    paddingTop: 7,
+    paddingBottom: 7,
+    zIndex: 0,
+  },
+  divider: {
+    height: '100%',
+    width: 1,
+    borderWidth: 0,
+    backgroundColor: 'rgba(120, 120, 120, 0.2)',
+  },
+});
+
+export default styles;

src/Divider/index.ts

@@ -0,0 +1 @@
+export * from './Divider';

src/SegmentedControl/SegmentedControl.tsx

@@ -7,6 +7,7 @@ import {
 import Animated, { Easing } from 'react-native-reanimated';
 import { timing } from 'react-native-redash';
 
+import { Divider } from '../Divider';
 import { Segment, SegmentProps } from '../Segment';
 import { SegmentedContext } from '../SegmentedContext';
 import { clamp } from '../utils';
@@ -133,6 +134,8 @@ export const SegmentedControl = ({
     handleChangeValue(name);
   };
 
+  const currentIndex = _map?.[_activeName || ''] ?? -1;
+
   return (
     <SegmentedContext.Provider
       value={{
@@ -169,24 +172,26 @@ export const SegmentedControl = ({
             />
           )}
 
-          {values.map((child, index) => (
-            <React.Fragment key={child.props.name}>
-              {index > 0 && (
-                <View style={styles.dividerContainer}>
-                  <View style={styles.divider} />
-                </View>
-              )}
-              {{
-                ...child,
-                props: {
-                  disabled,
-                  inactiveTintColor,
-                  activeTintColor,
-                  ...child.props,
-                },
-              }}
-            </React.Fragment>
-          ))}
+          {values.map((child, index) => {
+            return (
+              <React.Fragment key={child.props.name}>
+                {index > 0 && (
+                  <Divider
+                    hide={currentIndex !== index && currentIndex !== index - 1}
+                  />
+                )}
+                {{
+                  ...child,
+                  props: {
+                    disabled,
+                    inactiveTintColor,
+                    activeTintColor,
+                    ...child.props,
+                  },
+                }}
+              </React.Fragment>
+            );
+          })}
         </View>
       </PanGestureHandler>
     </SegmentedContext.Provider>

src/SegmentedControl/SegmentedControlStyles.ts

@@ -28,17 +28,6 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.5,
     shadowRadius: 2,
   },
-  dividerContainer: {
-    paddingTop: 7,
-    paddingBottom: 7,
-    zIndex: 0,
-  },
-  divider: {
-    height: '100%',
-    width: 1,
-    borderWidth: 0,
-    backgroundColor: 'rgba(120, 120, 120, 0.2)',
-  },
 });
 
 export default styles;