react native how to animate two views side by side

Question

I want to animate two views side by side. But the height of the views is not that what I want. I want to set the height of the visible view.

Here is a video of my problem: https://imgur.com/a/se8Vj

and here is a example of the expo: https://snack.expo.io/ByFSjLt5W

I can't find the problem why the height is not right.

my component card have this code:

<Card
  title='LOGIN'
  wrapperStyle={{
    margin: 0
  }}
  containerStyle={{
    elevation: 20,
    margin: 40,
    borderWidth:0,
    top: -150,
  }}
  titleStyle={{
    textAlign: 'left'
  }}
  dividerStyle={{
    marginTop: 0,
    marginBottom: 0
  }}
>
  <Animated.View
    style={{
      transform: [{
        translateX: this.state.offsetEmail
      }]
    }}
  >
    <FormLabel>Email</FormLabel>
    <FormInput
      focus={true}
      placeholder='Email address...'
      selectionColor='#fff'
      underlineColorAndroid='#0D47A1'
      keyboardType='email-address'
      onChangeText={(email) => this._setEmail.bind(this)(email)}
    />

    {this.state.email.length > 0 &&
      <Button
        title='weiter'
        onPress={() => { Keyboard.dismiss(); this._transitionToPassword(); } }
      />
    }
  </Animated.View>

  <Animated.View
    style={{
      transform: [{
        translateX: this.state.offsetPassword
      }]
    }}
  >
    <FormLabel>Email</FormLabel>
    <FormLabel>{this.state.email}</FormLabel>
    <FormLabel>Password</FormLabel>
    <FormInput
      secureTextEntry
      underlineColorAndroid='#0D47A1'
      placeholder='Password...'
      onChangeText={(password) => this._setPassword.bind(this)(password)}
    />
  </Animated.View>
</Card>

my constructor:

constructor(props) {
  super(props);

  this.state = {
    email: false,
    password: false,
    showPassword: false,
    showSignInButton: false,

    offsetEmail: new Animated.Value(0),
    offsetPassword: new Animated.Value(width)
  };
}

and my function to animate:

_transitionToPassword() {
  Animated.parallel([
    Animated.timing(this.state.offsetEmail, {
      toValue: -width
    }),
    Animated.timing(this.state.offsetPassword, {
      toValue: 0
    })
  ]).start();
}

and my width:

const { width } = Dimensions.get('window');

Answer 1

Your Views are rendered one below the other. Before applying the animation you should first should fix your style to make them render side by side. You can use flex: 1 , flexDirection: row and overflow: hidden to try to achieve it.

Check the docs for more tips about styling and flex layout: https://facebook.github.io/react-native/docs/flexbox.html

Hope it helps.