CODEWITHSUNDEEP
javascriptcssreact-nativeanimation
Ryan94
Ryan94

Reputation: 331

React Native Fade In Animation is not smooth

I'm creating an animation similar to www.icloud.com sign in. Which means when user type his/her email, the password box appears with a fade in animation.Below is what I want to achieve.

Animation I want to achieve

My Code

However to do that I created below code.

constructor () {
  super()
  this.animatedValue = new Animated.Value(0)
}

state ={
    hideEmail:false,
} 

animate () {
this.animatedValue.setValue(0)
Animated.timing(
  this.animatedValue,
  {
    toValue: 1,
    duration: 1000,
    easing: Easing.linear
  }
 ).start()
}

render() {

const marginTop = this.animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
})

return (
  <View style={styles.container}>
    <View style={{paddingBottom:10}}>
      <TextInput 
        placeholder='Registered Email' 
        returnKeyType='go'
        style={{borderWidth:0.5}}
        onSubmitEditing = {(event) => this.getData()}>
      </TextInput>
    </View>
    <Animated.View style={{marginTop,opacity:!this.state.hideEmail?0:1}}>
      <TextInput 
        placeholder='Code' 
        style={{borderWidth:0.5}}>
      </TextInput>
    </Animated.View>
  </View>
);

getData = (email) => {
  // Validate and if it's correct email, below code will run
  this.animate();
  this.setState({hideEmail:true});
}

Here I've used hideEmail state to change opacity of Code View to make it hide and visible. However what this does is, when user type the email, it will be validated and rest of the code of getData() will run and start the animation with making Code View visible.

Problems

There are two problems.

Problems of Animation

As you can see, when the email types (I did not validate it properly. Just to show how this works) and enters, code box appears and start to animate. But have two problems.

1) First box (Email Box) also moves with Code box.

2) Animation is not smooth. Borderline appears and disappears. Which is annoying and not beautiful.

So how can I fix them? I tried everything by changing my code, but nothing worked.

Upvotes: 1

Views: 1407

Answers (1)

Samitha Nanayakkara
Samitha Nanayakkara

Reputation: 2497

Since you haven’t posted styles with your code, I guess the container that contains both of your TextInputs must be justified to center.

Just check whether your container contains following code.

JustifyContent: ‘center’

If so, remove it and add a marginTop to your first TextInput box. Movement will as you expected.

Upvotes: 1

Related Questions