Fix placeholder vertical positioning on Android.

braincore commented 3 years ago

Description

Fixes #3.

swushi commented 3 years ago

Awesome, thanks for doing this 👍

OFD16 commented 4 months ago

I fix this problem with package source code.

1) Go to node_modules > react-native-input-outline > src > components > InputOutline.tsx at 287 line

2) Add initialPlaceholderTranslateY function

// Centered position of the placeholder

    const initialPlaceholderTranslateY = useMemo(() => {
      return (
        (paddingVertical + (fontSize * 1.2) / 2) / 2
      ); // Adjust based on your needs
    }, [paddingVertical, fontSize]);

3) Update animatedPlaceholderStyles function as below (change 0 value of initialPlaceholderTranslateY to transform's array)

const animatedPlaceholderStyles = useAnimatedStyle(() => ({
      transform: [
        {
          translateY: interpolate(
            placeholderMap.value,
            [0, 1],
            [initialPlaceholderTranslateY, -(paddingVertical + fontSize * 0.7)]
          ),
        },
        //...last things
                       ],
    }));

You can save code and restart app. Placeholder will be centered.

swushi / react-native-input-outline

Fix placeholder vertical positioning on Android. #16

Description