react-nativereact-native-stylesheet

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


Solution

  • TranslateY cannot be a string. Make it a number.

    https://reactnative.dev/docs/transforms