React Native Animation Basic

Question

Итак, я практикую React Native Reanimated или Анимацию в React Native с Expo. Я пытаюсь открыть экран снизу вверх с помощью Animated.

Когда я нажимаю Text он покажет другой экран поверх моего родительского компонента с анимацией снизу вверх.

Но вот результат, который я получаю:

Вывод, который я хочу получить:

Вот мои коды:

class App extends React.Component {
state = {
 openHome: false
}

animation = new Value(0);

openHome = () => {
  this.setState({
    openHome: true
})
Animated.timing(this.animation, {
  duration: 300,
  toValue: 1
}).start();
}

render () {
const {animation} = this;
const translateY = animation.interpolate({
  inputRange: [0, 1],
  outputRange: [-height, 0],
  easing: Easing.inOut(Easing.ease)
});
return (
  <View style={styles.container}>
    <Text onPress={this.openHome}>Open up Home to start working on your app!</Text>
    {
      <Animated.View style={{ transform: [{ translateY }] }}>
        <Home open={this.state.openHome}/>
      </Animated.View>
    }
  </View>
);
}

}

Код для моего дочернего компонента, который Home.js:

const Home = props => {
if (!props.open) {
    return (
        <View style={styles.firstContainer}>
        </View>
    );
} else {
    return (
        <View style={styles.secondContainer}>
            <Text>Hello</Text>
        </View>
    );
}

}

const styles = StyleSheet.create({
firstContainer: {
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'transparent', 
    width: '100%'
},
secondContainer: {
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    width: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
}
})

Answer 1

Тебе нужно new Animated.Value(0) вместо того new Value(0) в первую очередь, если вы хотите анимировать значение.