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:
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,
}
})