I am trying to animate a view into the screen. However, the view appears in a different position depending on how big the screen is. How can I set the final position of the view to be the same on all devices?
const ScreenTop = dimensions.SCREEN_HEIGHT;
const textAnimation = useRef(new Animated.Value(ScreenTop)).current;
const slideIn = () => {
Animated.spring(textAnimation, {
toValue: ScreenTop * 0.55,
useNativeDriver: false,
}).start();
};
return (
<IntroLayout>
<ImageBackground
source={patrolMan}
resizeMode="contain"
imageStyle={{
resizeMode: 'cover',
alignSelf: 'flex-end',
}}
style={styles.image}>
<Animated.View
style={{
width: '100%',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
bottom: textAnimation,
}}>
...
</Animated.View>
</ImageBackground>
</IntroLayout>
);
};
const styles = StyleSheet.create({
image: {
width: '100%',
height: 350,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 40,
position: 'absolute',
bottom: 40,
},
});