Custom switch slide animation, how to make it smooth?

[Luckygirlllll]

0

I need to make switch slide animation, and I almost did it, the slide animation to the right looks really good, but the slide animation to the left doesn't work smooth, any ideas how is possible to fix it?

Here is my code:

import * as Animatable from 'react-native-animatable';

changeLogin = () => { if (!this.state.loginEmail){ this.slideRight() } else { this.slideLeft() } this.setState({ loginEmail: !this.state.loginEmail }) }

handleViewRef = ref => this.view = ref;

slideRight = () => this.view.animate({ 

  0: {
    translateX: 0,
  },
  0.5: {
    translateX: 100,
  },
  1: {
    translateX: 150,
  },
  2: {
    translateX: 300,
}  
  })

  slideLeft = () => this.view.animate({ 
    0: {
      translateX: 0,
    },
    0.5: {
      translateX: -0.3,
    },
    1: {
      translateX: -0.5,
    },
    2: {
      translateX: -1,
  }  
    })  

                <TouchableWithoutFeedback  onPress={this.changeLogin}>
                    <View style={styles.buttonRowTop} >
                    <Animatable.View style={styles.buttonSwitch}
                    ref={this.handleViewRef}
                   >

                    </Animatable.View>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', width: 260, zIndex: 100, marginLeft: -180, marginTop: 5}}>
                        <Text style={[!loginEmail? styles.textSwitchActiveLeft: styles.textSwitchLeft ]}>Phone</Text> 
                        <Text  style={[loginEmail? styles.textSwitchInactive:styles.textSwitch]}>Email</Text> 
                    </View>
                    </View>
                </TouchableWithoutFeedback>  

Here is how it looks right now:

[Luckygirlllll]

I changed slideLeft function, animation looks much smoother now:

slideLeft = () => this.view.animate({ 
        0: {
          translateX: 100,
        },
        0.5: {
          translateX: -0.3,
        },
        1: {
          translateX: -0.5,
        },
        2: {
          translateX: -1,
        }  
        })