So I am practicing the React Native Reanimated or the Animation in React Native with Expo. I'm trying to open a screen from bottom to top using Animated.
When I press the Text it will show another screen on top of my Parent Component with Animation from bottom to top.
But this is the output I get:
Output I want to get:
Here are my codes:
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>
);
}
}
Code for my Child Component which is 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
}
})
