lineHeight not distributed evenly in TextInput
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
Description
When you have a TextInput with lineHeight > fontSize the remaining space isn't distributed evenly around the text. For example:
<View style={styles.container}>
<Text style={styles.text}>Text</Text>
<TextInput style={styles.text} value="TextInput" />
</View>
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flexDirection: 'row',
gap: 10,
},
text: {
fontFamily: 'Inter-Regular',
fontSize: 16,
lineHeight: 26,
letterSpacing: -0.01,
color: '#111827',
textAlignVertical: 'top',
padding: 0,
backgroundColor: 'pink',
},
});
Result:
All the extra space in the TextInput case is on top of the text, making it hard to vertically align TextInputs (e.g. with a Text label preceding it on the same line).
React Native Version
0.71.7
Output of npx react-native info
System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1 Pro
Memory: 63.06 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
Yarn: Not Found
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
Watchman: 2023.07.03.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/tibbe/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: 11.0.19 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.7 => 0.71.7
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
Use the above snippet in the iOS simulator.
Snack, screenshot, or link to a repository
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza ejecutando el Snack enlazado en un simulador de iOS y compara los ejemplos de Text y TextInput con un lineHeight mayor que fontSize. Sigue el punto de entrada de TextInput responsable de la colocación vertical del texto y, después, verifica que el espacio restante de la altura de línea se distribuya uniformemente alrededor del texto sin provocar una regresión en el caso de alineación mostrado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 48/100