React native animated, absolute positioned view different position for different screen sizes

64 views Asked by At

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,
  },
});
0

There are 0 answers