react / react/react-native

TextInput onContentSizeChange returns incorrect layout size instead of content size on Android

Ouverte
#29,702 26 commentaires 20 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: TextInput Needs: Triage :mag: Never gets stale Platform: Android
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

The onContentSizeChange prop of the TextInput component does not work on Android as it does on iOS. On Android it seems to be returning the layout height and width of the TextInput view, rather than the height and width of the text.

This same issue has been reported before in https://github.com/facebook/react-native/issues/25487 and https://github.com/facebook/react-native/issues/19696, but does not seem to have been fixed

React Native version:

System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 71.45 MB / 32.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /Users/travisnuttall/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.1
System Images: android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_242-release - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Run the following code on both iOS and Android platforms, note the inconsistency in the logged values from `contentSize:

import React from 'react';

import { View, TextInput } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: 40 }}>
        <TextInput
          defaultValue="test"
          onLayout={ e=> {
            console.warn("single line layout", e.nativeEvent.layout)
          }}
          style={{ width: 200, lineHeight: 30, backgroundColor: '#CCC' }}
          onContentSizeChange={ e=> {
            console.warn(e.nativeEvent.contentSize)
          }}
        />
        <TextInput
          defaultValue="test"
          onLayout={ e=> {
            console.warn(e.nativeEvent.layout)
          }}
          multiline
          style={{ width: 200, lineHeight: 30, backgroundColor: '#CCC' }}
          onContentSizeChange={ e=> {
            console.warn(e.nativeEvent.contentSize)
          }}
        />
      </View>
    )
  }
}

Expected Results

On iOS as you edit text on single or multiline TextInput you get the actual width of the characters entered. I would expect the same behavior on Android. Effectively this functionality is not actually implemented on Android at the moment.

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

See code sample in reproducible steps

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le traitement Android de onContentSizeChange du composant TextInput et reproduisez l’exemple fourni sur une seule ligne et sur plusieurs lignes, en comparant contentSize avec onLayout sur les deux plateformes. Le travail est considéré comme terminé lorsqu’Android signale les dimensions du texte de manière cohérente avec iOS dans les deux cas ; l’issue ne nomme aucun fichier ni test spécifique.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
android, javascript, react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.