Layout on Android does not match iOS

braincore commented 3 years ago

Placeholder text is not vertically centered. Removing paddingVertical does not help.

swushi commented 3 years ago

Can you provide some more details on this? Are you applying any styles to the Input?

braincore commented 3 years ago

Minimal styling, here's a snippet:

const inputStyle = {
    activeColor: theme.dark!.textColor,
    backgroundColor: theme.dark!.mutedBackgroundColor,
    editable: true,
    fontColor: theme.dark!.textColor,
    fontSize: theme.app.fontSize.lg,
  };

  return (
    <View style={styles.loginForm}>
      <InputOutline
        {...inputStyle}
        value={username}
        placeholder="Username"
        assistiveText="You can change it later"
        onChangeText={text => setUsername(text)}
        autoCapitalize="none"
        autoCompleteType="username"
        autoCorrect={false}
        keyboardType="default"
        returnKeyType="next"
        onSubmitEditing={() => nameRef.current?.focus()}
        enablesReturnKeyAutomatically={true}
        trailingIcon={() => <Icon name="user" size={24} color={theme.app.lightTextColor} />}
        error={usernameError}
      />
   ...

swushi commented 3 years ago

Does removing trailingIcon prop recenter the placeholder?

braincore commented 3 years ago

It does not.

swushi commented 3 years ago

Is this still an issue? @braincore

braincore commented 3 years ago

Yes, I upgraded to 1.4 and still observe the same problem (also with InputStandard). Have you tried an example in your own simulator? Just wondering if this is somehow specific to my setup or universal.

fabcall commented 3 years ago

@swushi this is an issue with Android. EditText has an unwanted padding at the bottom. Its clear if you inspect the component on both android emulator and iOS simulator and compare them.

swushi commented 3 years ago

@fabcall @braincore I am unfortunately able to test this effectively as I am on an M1 Macbook, and building on Android is not yet supported. I also do not have a physical Android device to test this. A pull request would be greatly appreciated here. My suggestion would be to add a simple Platform.select call to the styling in question.

piotrkrysiak commented 2 years ago

Unfortunately, the problem is still valid on android

braincore commented 2 years ago

@piotrkrysiak Can you provide a screenshot? This PR hasn't been included in a release yet so you'll need to be pulling straight from the repo.

piotrkrysiak commented 2 years ago

Ok I thought that is implemented in release.

JoyCood commented 1 year ago

this repos still in maintain?this bug still in alive, this PR hasn't include latest release version. @braincore @swushi

OFD16 commented 4 months ago

react-native-input-outline package placeholder center bug solution: Solution.

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

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

swushi / react-native-input-outline

Layout on Android does not match iOS #3