I creating a post component for an app I am working on, I am having an issue with the react-native TextInput element.

The issue arises when applying the style to the TextInput component. the style applies just fine to the placeholder, but the style is not applied on the text that I am typing in.

I am running an iOS, Android, and web version all through expo go, and this issue only arises on the iphone version.

I am assuming this problem occurs because iOS handles styling for the placeholder and text input differently than android and web.

I have looked into the issue and tried applying the textAlignVertical, and textAlign, that does not work.

Another weird issue that may or may not be related, when I do not apply style to the text input component, the placeholder is cut off instead of the text input.

If anybody could explain what is happening here or help me find a fix I would really appreciate it.

<TextInput
  textAlignVertical="center"
  textAlign="center"
  placeholder="ggggggg"
  placeholderTextColor={Colors.gray.g300}
  style={styles.textInput}
/>

const styles = StyleSheet.create({
  textInput: {
    fontFamily: "Inter",
    fontSize: 16,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 24 /* 120% */,
  },
});

In my new app I just released the user needs to input some values to add his peaks to the list. Which is done by a text input. I am already using react native paper for the fields and a little shadow to let it look more 3D but I still got the feeling it looks like my first website in 2004 when I would add a „fancy“ background color.

Do I need to play more with the styling, background color, text color…. I have the feeling I spend way too much time for it to still look so basic.

Really appreciate any feedback and if you want to check out the app for android it is completely ad and tracking free: https://play.google.com/store/apps/details?id=com.pazago.gipfelapp_light

Ios is currently pending.