v1.0.8

Author: kusalshrestha

Example/AnimatedSegmentControl/App.js

@@ -11,8 +11,8 @@ class App extends Component {
     return (
       <View style={styles.container}>
         <SegmentControl
-          values={['Segment1', 'Segment2', 'Segment3']}
-          selectedIndex={0}
+          values={['Segment1', 'Segment2', 'Segment3', 'Segment4',]}
+          selectedIndex={1}
           onChange={this.onSegmentValueChange}
         />
       </View>

Example/AnimatedSegmentControl/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "16.8.3",
     "react-native": "0.59.10",
-    "react-native-animated-segment-control": "^1.0.7"
+    "react-native-animated-segment-control": "^1.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-animated-segment-control",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A custom `SegmentControl` component, pretty much similar to native's SegmentControl but with animation",
   "main": "index.js",
   "scripts": {

src/SegmentControl/index.android.js

@@ -39,7 +39,7 @@ class SegmentControl extends React.Component {
     this.setState(
       prevState => ({
         selectedIndex: index,
-        activeSegmentPosition: { x: prevState.segmentDimension.width * (index - 1), y: 0 }
+        activeSegmentPosition: { x: -(this.state.segmentDimension.width * (this.props.values.length / 2 - 0.5)) + this.state.segmentDimension.width * index, y: prevState.activeSegmentPosition.y }
       }),
       animate
     )
@@ -56,7 +56,7 @@ class SegmentControl extends React.Component {
 
     const animate = () => {
       Animated.timing(this.state.positionAnimationValue, {
-        toValue: segmentWidth * (this.state.selectedIndex - 1),
+        toValue: -(segmentWidth * (this.props.values.length / 2 - 0.5)) + segmentWidth * this.state.selectedIndex,
         duration: 100
       }).start()
     }