Cada vez que trato de usar la API animada en react-native para hacer que mi escala de texto sea más pequeña y hacia arriba, siempre va hacia la derecha. Aquí están las fotos de la escala

Aquí está mi código, me gustaría tenerlo en línea con el borde del cuadro de texto iniciado. Sin embargo, escalarlo a la izquierda usando translateX no funciona para todos los tamaños de pantalla.

 function OnboardingAnimatedLabel(props: OnboardingAnimatedLabelProps) { const { label, isFocused, value, onFocus } = props; const focusAnim = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.timing(focusAnim, { toValue: isFocused || !!value ? 1 : 0, duration: 250, easing: Easing.bezier(0.4, 0, 0.2, 1), useNativeDriver: true, }).start(); }, [focusAnim, isFocused, value]); let color = onFocus || value !== '' ? '#DADADA' : '#FFF'; return ( <TouchableWithoutFeedback> <Animated.View style={[ styles.labelContainer, { transform: [ { scale: focusAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 0.75], extrapolate: 'clamp', extrapolateLeft: 'clamp', }), }, { translateY: focusAnim.interpolate({ inputRange: [0, 1], outputRange: [30, 10], }), }, // { // translateX: focusAnim.interpolate({ // inputRange: [0, 1], // outputRange: [0, -55], // }), // }, ], }, ]}> <Text style={[styles.label, { color }]}>{label}</Text> </Animated.View> </TouchableWithoutFeedback> ); } const styles = StyleSheet.create({ labelContainer: { backgroundColor: 'transparent', }, label: { fontFamily: 'Avenir-Heavy', fontSize: 20, }, }); export default OnboardingAnimatedLabel;

¡Cualquier ayuda para resolver esto para todos los tamaños de pantalla sería genial! Gracias