Multiline TextInput's onContentSizeChange doesn't take horizontal padding into a consideration (IOS)

[Redger1]

Description

If you have multiline <TextInput/> with horizontal padding styles, onContexntSizeChange works as if horizontal padding is 0. So you can't set input's height of nativeEvent.contentSize.height correctly

Version

0.70.5

Output of npx react-native info

System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i3-10100 CPU @ 3.60GHz Memory: 718.71 MB / 3.83 GB Binaries: Node: 16.15.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: ^18.1.0 => 18.1.0 react-native: ^0.70.5 => 0.70.5 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Create <TextInput multiline={true} blurOnSubmit={false}/>
2. Add onContentSizeChange prop and inside log nativeEvent.contentSize.height
3. Type until the line breaks
4. Add horizontal padding and type for line break again

onContentSizeChange logs increased height too late when the input is already on the next line, but without padding it works correctly

Snack, code example, screenshot, or link to a repository

import * as React from "react";
import { TextInput, View, StyleSheet } from 'react-native';

export default function App() {
  const [message, setMessage] = React.useState('')

  return (
    <View style={styles.container}>
      <TextInput
        placeholderTextColor="#909090"
        style={{...styles.input, height: 50}}
        placeholder="Message"
        blurOnSubmit={false}
        scrollEnabled={true}
        onChange={({nativeEvent}) => setMessage(nativeEvent.text)}
        multiline={true}
        value={message}
        onContentSizeChange={({nativeEvent}) => {
            console.log(nativeEvent.contentSize.height)
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    backgroundColor: "#F5F5F5",
    height: '100%',
    fontFamily: "Semibold",
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 10,
    maxHeight: 150,
    fontSize: 14,
    flex: 1,
  },
});

Expo Snack: https://snack.expo.dev/@redger1/multiline-text-input