TextInput centered align vertically on iOS

Is there any way to center align the text inside the TextInput vertically on iOS? (not the TextInput itself, but its text)

The TextInput has multiline set to true.

I have tried using “textAlignVertical: center”, but it doesn’t work on iOS. I also need the input’s height to be dynamic.

(Please refer to my code below from when reading the section below)

What I’m trying to achieve is prevent the user from seeing any changes in the UI when the Text component transforms into a TextInput.

I’m not sure if my approach of center aligning the text vertically inside the TextInput will work as I expected. Besides, I can’t even find a way to achieve that. So, I’m welcome to hear any new creative ideas to approach this problem.

function TextBlock() {
  const [editing, setEditing] = React.useState(false)
  const [text, setText] = React.useState('')
  const props = {}
  if(!editing) props.onPress = () => setEditing(true)
  return (
    <Pressable {...props}>
      {
        editing ? (
          <TextInput style={styles.text} multiline={true} onBlur={() => setEditing(false)} value={text} onChangeText={t => setText(t)}/>
        ) : (
          <Text style={styles.text}>{text}</Text>
        )
      }
    </Pressable>
  )
}
const styles = StyleSheet.create({
  text: {
    fontSize: 14,
    paddingTop: 0,
    paddingBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    lineHeight: 20,
    marginBottom: 0,
    marginTop: 0,
    marginLeft: 0,
    marginRight: 0,
    textAlignVertical: 'center',
  }
})