React native Question posted in
The official React Native documentation can be found here.

How to fix "Transform with key of translateY must be a number" error in React Native?

I’m trying to postion an element correctly using transform property,
but whenever i give percentage values it giving me an error

How can I fix this issue ?

Here is my code

import { Animated,Image,View} from "react-native";

<Animated.View
                style={{
                  position: "absolute",
                  right: 20,
                  top: "50%",
                  transform: [{ translateY: "-50%" }],
                }}
              >
                {captchaImage && (
                  <Image
                    source={{ uri: captchaImage }}
                    style={{
                      width: 50,
                      height: 24,
                      resizeMode: "contain",
                    }}
                  />
                )}
              </Animated.View>

Screenshot of simulator is attached below.
did anyone have faced similar issue ?

screenshot of error

Tags:

2

Answers


  1. 0

    TranslateY cannot be a string. Make it a number.

    https://reactnative.dev/docs/transforms

    Login or Signup to reply.
  2. 0

    TranslateY must be a number. If you want it to be 50% of screen height you can use something like this.

     import {Dimensions} from 'react-native';
 
 const windowDimensions = Dimensions.get('window');

  return (
    <Animated.View
      style={{
        position: 'absolute',
        right: 20,
        top: '50%',
        transform: [{translateY: windowDimensions.height * 0.5}],
      }}>
      {captchaImage && (
        <Image
          source={{uri: captchaImage}}
          style={{
            width: 50,
            height: 24,
            resizeMode: 'contain',
          }}
        />
      )}
    </Animated.View>
  );

    For more info about Dimensions check out the link.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search