react / react/react-native

lineHeight not distributed evenly in TextInput

Aperta
#39,145 22 commenti 13 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Component: TextInput Issue: Author Provided Repro Newer Patch Available
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

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).

both

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

https://snack.expo.dev/UEBid9Vxh

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia eseguendo lo Snack collegato in un simulatore iOS e confronta gli esempi Text e TextInput con un lineHeight maggiore di fontSize. Traccia il punto di ingresso di TextInput responsabile del posizionamento verticale del testo, quindi verifica che lo spazio rimanente dell’altezza della riga sia distribuito uniformemente intorno al testo senza introdurre regressioni nel caso di allineamento mostrato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.