feat: Animate segment selection on Android (#77)

Author: marekpiechut

js/SegmentedControl.js

@@ -5,7 +5,7 @@
 'use strict';
 
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Animated, Easing, StyleSheet, View} from 'react-native';
 import {SegmentedControlTab} from './SegmentedControlTab';
 
 import type {SegmentedControlProps} from './types';
@@ -27,6 +27,9 @@ const SegmentedControl = ({
   backgroundColor,
   fontSize,
 }: SegmentedControlProps) => {
+  const [segmentWidth, setSegmentWidth] = React.useState(0);
+  const animation = React.useRef(new Animated.Value(0)).current;
+
   const handleChange = (index: number) => {
     // mocks iOS's nativeEvent
     const event: any = {
@@ -38,14 +41,49 @@ const SegmentedControl = ({
     onChange && onChange(event);
     onValueChange && onValueChange(values[index]);
   };
+
+  React.useEffect(() => {
+    if (animation && segmentWidth) {
+      Animated.timing(animation, {
+        toValue: segmentWidth * (selectedIndex || 0),
+        duration: 300,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [animation, segmentWidth, selectedIndex]);
+
   return (
     <View
       style={[
         styles.default,
         style,
         backgroundColor && {backgroundColor},
         !enabled && styles.disabled,
-      ]}>
+      ]}
+      onLayout={({
+        nativeEvent: {
+          layout: {width},
+        },
+      }) => {
+        const newSegmentWidth = values.length ? width / values.length : 0;
+        if (newSegmentWidth !== segmentWidth) {
+          animation.setValue(newSegmentWidth * (selectedIndex || 0));
+          setSegmentWidth(newSegmentWidth);
+        }
+      }}>
+      {selectedIndex != null && segmentWidth ? (
+        <Animated.View
+          style={[
+            styles.slider,
+            {
+              transform: [{translateX: animation}],
+              width: segmentWidth,
+              backgroundColor: tintColor || 'white',
+            },
+          ]}
+        />
+      ) : null}
       {values &&
         values.map((value, index) => {
           return (
@@ -70,6 +108,8 @@ const SegmentedControl = ({
 
 const styles = StyleSheet.create({
   default: {
+    overflow: 'hidden',
+    position: 'relative',
     flexDirection: 'row',
     justifyContent: 'space-evenly',
     alignContent: 'center',
@@ -80,6 +120,12 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.4,
   },
+  slider: {
+    position: 'absolute',
+    left: 0,
+    height: '100%',
+    borderRadius: 5,
+  },
 });
 
 export default SegmentedControl;

js/SegmentedControlTab.js

@@ -42,22 +42,12 @@ export const SegmentedControlTab = ({
   };
   const color = getColor();
 
-  const getBackgroundColor = () => {
-    if (selected && tintColor) {
-      return tintColor;
-    }
-    return 'white';
-  };
   return (
     <TouchableOpacity
       style={styles.container}
       disabled={!enabled}
       onPress={onSelect}>
-      <View
-        style={[
-          styles.default,
-          selected && {backgroundColor: getBackgroundColor()},
-        ]}>
+      <View style={[styles.default]}>
         <Text
           style={[
             {color},