Search code examples
animationreact-nativereact-native-ios

Custom switch slide animation React Native, how to make it smooth?


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:

enter image description here


Solution

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