React-native: NullPointerException: tentez d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)'

Face au même problème.

Idem ici [email protected]

com.facebook.react.views.textinput.ReactEditText.onTouchEvent
ReactEditText.java - line 163
java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1
android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild DrawableContainer.java:884
2
android.graphics.drawable.DrawableContainer.selectDrawable DrawableContainer.java:466
3
android.graphics.drawable.StateListDrawable.onStateChange StateListDrawable.java:104
4
android.graphics.drawable.Drawable.setState Drawable.java:736
5
android.graphics.drawable.DrawableWrapper.onStateChange DrawableWrapper.java:331
6
android.graphics.drawable.Drawable.setState Drawable.java:736
7
android.view.View.drawableStateChanged View.java:19223
8
android.widget.TextView.drawableStateChanged TextView.java:4673
9
android.view.View.refreshDrawableState View.java:19292
10
android.view.View.setPressed View.java:9135
11
android.view.View.setPressed View.java:9113
12
android.view.View.onTouchEvent View.java:12357
13
android.widget.TextView.onTouchEvent TextView.java:10095
14
com.facebook.react.views.textinput.ReactEditText.onTouchEvent ReactEditText.java:163

Même problème

Même problème. Même logtrace

Idem ici sur RN 44.0

+1 anotha un

Les gars qui redémarrent le conditionneur et effacent le cache ont fonctionné pour moi!

Même problème pour moi. J'utilise RN 0.51.0 et react-native-material-textfield 0.12.0.

Je suis également confronté à ces problèmes. La chose étrange est qu'il est très difficile de suivre l'erreur car la trace de pile ne contient aucune information utile. Je ne sais même pas où pourrait être l'erreur.
Mettra à jour ici si je trouve la solution

Même erreur sur RN 0.52.0.

Merci d'avoir publié ceci! Il semble que vous n'utilisiez peut-être pas la dernière version de React Native, v0.53.0, publiée en janvier 2018. Pouvez-vous vous assurer que ce problème peut toujours être reproduit dans la dernière version?

Je vais fermer cela, mais n'hésitez pas à ouvrir un nouveau problème si vous êtes en mesure de confirmer qu'il s'agit toujours d'un problème dans la version 0.53.0 ou plus récente.

_{Comment contribuer • À quoi s'attendre des responsables de la maintenance}

Même problème sur 0.53.3

Même problème

@ react-native-bot Besoin de rouvrir le problème

face au même problème avec Android 8

Pareil ici. React natif 0.53.3, SM-T550, niveau d'API 25 (Android 7.0)

ce problème vient de surgir avec moi, React native 0.53.3 - Android 8.1.

React native 0.53.3, Android 8, même problème

Même problème, react-native 0.53.0 et Android 8. Il est étrange que cette erreur semble apparaître au hasard. Je ne trouve aucune étape exacte pour le reproduire.

Avoir une application de production exécutant RN 0.54.2 et cela semble affecter quelques utilisateurs exécutant Android 8.0.0 au démarrage de l'application.

Pourquoi ce problème est-il clos? Certains d'entre nous sont confrontés à ce problème dans l'environnement de production, donc "redémarrer le conditionneur" n'est pas une solution acceptable.

Ce problème doit être rouvert car il affecte la version actuelle.

Je suis également confronté à des traces de pile qui pourraient être liées:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:16791)
       at android.view.View.setBackgroundDrawable(View.java:21710)
       at android.view.View.setBackground(View.java:21603)
       at android.view.View.<init>(View.java:5547)
       at android.widget.TextView.<init>(TextView.java:1135)
       at android.widget.EditText.<init>(EditText.java:107)
       at android.widget.EditText.<init>(EditText.java:103)
       at android.widget.EditText.<init>(EditText.java:99)
       at android.widget.EditText.<init>(EditText.java:95)
       at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:92)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:94)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:65)
       at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:46)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:218)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:150)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:923)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:895)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:136)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:107)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
       at android.view.Choreographer.doCallbacks(Choreographer.java:723)
       at android.view.Choreographer.doFrame(Choreographer.java:655)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
       at android.os.Handler.handleCallback(Handler.java:789)
       at android.os.Handler.dispatchMessage(Handler.java:98)
       at android.os.Looper.loop(Looper.java:164)
       at android.app.ActivityThread.main(ActivityThread.java:6938)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.DrawableContainer$DrawableContainerState$ConstantStateFuture.get(android.graphics.drawable.DrawableContainer$DrawableContainerState)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:823)
       at android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:452)
       at android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)
       at android.graphics.drawable.Drawable.setState(Drawable.java:680)
       at android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:279)
       at android.graphics.drawable.Drawable.setState(Drawable.java:680)
       at android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1381)
       at android.graphics.drawable.Drawable.setState(Drawable.java:680)
       at android.view.View.drawableStateChanged(View.java:17003)
       at android.widget.TextView.drawableStateChanged(TextView.java:3984)
       at android.view.View.refreshDrawableState(View.java:17067)
       at android.view.View.setPressed(View.java:7914)
       at android.view.View.setPressed(View.java:7892)
       at android.view.View.access$2900(View.java:708)
       at android.view.View$CheckForTap.run(View.java:21187)
       at android.os.Handler.handleCallback(Handler.java:739)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at android.os.Looper.loop(Looper.java:148)
       at android.app.ActivityThread.main(ActivityThread.java:5451)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

@grabbou pouvons-nous rouvrir ce numéro?

Même problème ici Android 8.0 api 26

Idem sur 0.54.2.

Je l'ai réduit à un <TextInput> rendu dans une FlatList. Lorsque je remplace cela par un <Text> , le problème disparaît.

Veuillez reproduire avec la dernière version disponible maintenant et je vais la rouvrir.

Même chose ici @ radko93

API Android 8.1 27

"dépendances": {
"réagir": "16.3.1",
"react-native": "0,55,1",
"react-native-linear-gradient": "^ 2.4.0",
"react-native-vector-icons": "^ 4.6.0",
"react-navigation": "^ 1.5.11"
},

Tentative d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
createAllFutures
DrawableContainer. java: 875
getOpacity
DrawableContainer. java: 1158
getOpacity
DrawableContainer. java: 433
getOpacity
InsetDrawable. java: 258
computeOpaqueFlags
Vue. java: 15698
setBackgroundDrawable
Vue. java: 20502
setBackground
Vue. java: 20395

Vue. java: 5238

Affichage. java: 826

Éditer le texte. java: 88

Éditer le texte. java: 84

Éditer le texte. java: 80

Éditer le texte. java: 76
setThemedContext
ReactTextInputShadowNode. java: 80
createView
UIImplementation. java: 282
createView
UIManagerModule. java: 366
invoquer
Method.java
invoquer
JavaMethodWrapper. java: 372
invoquer
JavaModuleWrapper. java: 160
courir
NativeRunnable.java
handleCallback
Handler. java: 790
expéditionMessage
Handler. java: 99
expéditionMessage
MessageQueueThreadHandler. java: 29
boucle
Looper. java: 164
courir
MessageQueueThreadImpl. java: 192
courir
Fil. java: 764

Même problème

package.json
"dépendances": {
"réagir": "16.3.1",
"natif réactif": "0,55,2",
},

build.gradle
compileSdkVersion 26
buildToolsVersion "26.0.2"
minSdkVersion 16

Même problème.

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
    at android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:888)
    at android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466)
    at android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104)
    at android.graphics.drawable.Drawable.setState(Drawable.java:735)
    at android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331)
    at android.graphics.drawable.Drawable.setState(Drawable.java:735)
    at android.view.View.drawableStateChanged(View.java:18038)
    at android.widget.TextView.drawableStateChanged(TextView.java:4108)
    at android.view.View.refreshDrawableState(View.java:18107)
    at android.view.View.setPressed(View.java:8536)
    at android.view.View.setPressed(View.java:8514)
    at android.view.View.onTouchEvent(View.java:11262)
    at android.widget.TextView.onTouchEvent(TextView.java:8489)
    at com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:162)
    at android.view.View.dispatchTouchEvent(View.java:10054)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2663)
    at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2336)
    at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:432)
    at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1841)
    at android.app.Activity.dispatchTouchEvent(Activity.java:3233)
    at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:394)
    at android.view.View.dispatchPointerEvent(View.java:10286)
    at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4514)
    at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4370)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3883)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3953)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3911)
    at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4053)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3919)
    at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4110)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3883)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3953)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3911)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3919)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3883)
    at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:6359)
    at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:6333)
    at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:6288)
    at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:6469)
    at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:193)
    at android.os.MessageQueue.nativePollOnce(Native Method)
    at android.os.MessageQueue.next(MessageQueue.java:323)
    at android.os.Looper.loop(Looper.java:136)
    at android.app.ActivityThread.main(ActivityThread.java:6295)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:900)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:790)

Android: 7.1.1
React-Native ： 0,48,3

Même problème.

même problème, dans l'environnement de production ， mon appareil est HUAWEI (LLD-AL10) 8.0.0, j'utilise actuellement React Native 0.46.2, merci

Obtention du même problème lors de l'utilisation de la dernière version de react-native (0.55.3). Le problème semble être lié à TextInput dans une FlatList comme mentionné ci-dessus. Obtenir l'erreur dans Android 8.0 et 8.1. Des solutions de contournement pour éviter ce problème?

Je peux reproduire ce bogue en créant un nouveau projet React Native avec init react-native et en changeant App.js en

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    const inputs = Array.apply(null, Array(256)).map((_, i) => i)
    return (
      <View>
        {inputs.map(i => <TextInput key={i} />)}
      </View>
    );
  }
}

J'exécutais ceci sur un Galaxy S8 avec Android 8.0.0 à partir de MacOS 10.13.3.

"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.3"
},

Je ne sais pas si l'erreur n'est pas directement liée au nombre de TextInputs, mais c'est la seule façon dont je pourrais reproduire ce bogue de manière assez fiable. Avec 128 entrées, je n'ai pas eu cette erreur à chaque redémarrage, mais après quelques recharges, elle s'est produite. À 256 TextInputs nus, je ne pense pas avoir été en mesure de démarrer l'application sans obtenir l'erreur. J'ai également remarqué que l'ajout d'éléments entre les TextInputs semblait réduire la probabilité d'obtenir cette erreur, il n'est donc probablement pas directement lié au nombre de TextInputs. J'ai essayé cela dans mon application actuelle et l'ajout de centaines de TextInputs à l'écran de démarrage a également déclenché cette erreur, mais mes autres vues avec des quantités similaires de TextInputs enveloppées dans d'autres éléments ne semblent pas toujours déclencher cette erreur car j'en ai dans mon application .

J'ai le même problème. J'exécutais ceci sur un Huawei P10 avec Android 8.0.0.
"react": "^16.2.0", "react-native": "^0.55.0",
Capture d'écran

Il semble que le problème réside dans les TextInputs. Cela se produit sur mon Huawei P10 (Android 8.0.0). Y a-t-il déjà un correctif pour cela?

Android: 7.1.1
"natif de réaction": "0,53,3",

Merci d'avoir publié ceci! Il semble que votre problème fasse référence à une ancienne version de React Native. Pouvez-vous reproduire le problème dans la dernière version, v0.55 ?

Merci pour vos contributions.

Je suis confronté au même problème. Il est lié au composant TextInput. Même un seul TextInput rendu dans un écran est à l'origine de cette erreur. Existe-t-il des solutions de contournement?

natif de réaction: 0,55
réagir: 16.3.1

Je change le constructeur ReactEditText "super", ça ne semble pas arriver,
mais commentez "underlineColorAndroid"
https://github.com/yuanboGeng/react-native/commit/36f7949f9a3e9c1f3b10df43a9f495f9f8712a1f
natif de réaction: 0,53,3
réagir: 16.2.0

Cela a commencé à se produire pour moi après la mise à niveau de mon émulateur au niveau API 26 à partir du niveau API 21

J'ai eu cette erreur apparaissant sans raison lors du développement. J'ai nettoyé mes dossiers / build et exécuté à nouveau un run-android . Le problème a disparu. Vraiment bizarre. J'espère pour certains d'entre vous qu'une version propre résoudra ce problème.

Avoir ce même problème. Une petite différence - dans la mienne, j'emboîte TextInputs à l'intérieur d'une VirtualizedList (le parent de FlatList) et je ne reçois le problème que lorsque je commence à faire défiler cette liste, même si je ne l'obtiens que par intermittence plutôt que tout le temps. Comme pour d'autres, cela se produit dans un environnement de production, donc le redémarrage du conditionneur n'est pas une option.

D'après quelques recherches, il semble lié à un ancien problème dans Android lui-même: https://issuetracker.google.com/issues/37068452
Si tel est le problème sous-jacent, cela serait résolu en mettant simplement à niveau les versions de compileSdk et de bibliothèque de support dans le projet RN. Aucune idée de la LoE à ce sujet, cependant.

Mise à jour: essayer de forcer les sous-projets à utiliser une version supérieure des outils de construction et compileSdk n'a pas résolu ce problème pour mon projet, comme expliqué dans cet article SO . Je ne sais pas si j'ai juste appliqué ces versions supérieures de manière incorrecte, si ma configuration de construction ne traite pas RN comme un sous-projet de cette manière, ou si ce n'était en fait pas une solution valide pour le problème ici.

EDIT 2: Il semble que ReactEditText n'utilise même pas la version de la bibliothèque de support d'EditText (qui serait AppCompatEditText), ce qui explique pourquoi la mise à niveau de la bibliothèque de support n'a rien fait. J'examine ceci - il faudra quelques mises à jour de plus que la simple modification de l'héritage pour que cela fonctionne, mais cela pourrait être la bonne solution à ce problème.

EDIT 3: Ce n'était pas la solution. Je ne suis plus convaincu que ce problème est le même que celui lié à l'AOSP.
Je peux dire que le type de ScrollView dans lequel vous insérez votre texte ne semble pas avoir d'importance - j'ai pu reproduire à la fois dans VirtualizedList et ScrollView, et beaucoup dans ce fil l'ont fait avec une FlatList.

j'ai la même chose en production

Je suis également confronté à ce problème. Lancer cd android ; ./gradlew clean ; cd .. ; react-native run-android fonctionne pour moi comme l' a souligné

Génial, mais qu'en est-il des applications en production avec de vrais clients? : |

Désolé @ahanusek , je ne dis pas que cela résout le problème, je dis simplement qu'en développement, cela a fonctionné pour moi (dans l'espoir que cela aidera également quelqu'un d'autre).

Mais même pour le développement, ce n'est pas une solution. Ok, vous nettoyez votre build, redémarrez l'application, mais si vous utilisez des entrées "à peine", vous pouvez toujours obtenir cette erreur.

@ahanusek Oui, je suis d'accord avec vous et je ne

Voir également ceci, v0.55.4:

Assez certain que je n'ai pas de TextField dans une FlatList ou une VirtualizedList, fwiw. Cela se produit dans notre version de production.

Voir ce problème dans v0.55.4 . Et oui, nous utilisons un TextInput dans une liste.

Se produit en réaction 0,55. Suivant

Se produit également dans react native 0.55, en utilisant l'entrée dans une liste plate.

Créer un message ici au cas où les gens ne verront pas mon commentaire modifié:

Je peux dire que le type de ScrollView dans lequel vous insérez votre texte ne semble pas avoir d'importance - j'ai pu reproduire à la fois dans VirtualizedList et ScrollView, et beaucoup dans ce fil l'ont fait avec une FlatList.
Ou, pour le formuler différemment, le problème se résume à
RN Crashes when loading a very large number of TextInputs. Usually this happens in a ScrollView (or some descended component class of one), but one person got it to happen in a plain View

Même problème

Je suis également confronté au même problème.

Curieusement, cela n'a commencé à m'arriver que hier soir et j'ai rendu TextInputs de la même manière depuis plus d'un mois maintenant en développement.

Version Android 9
Réagir "16.3.1"
React-Native "~ 0,55,2"

Nous avions également été confrontés à un problème similaire dans notre code

Crash logs:
Exception fatale: java.lang.NullPointerException: tentative d'invocation de la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
à android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
à android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
à android.view.View.computeOpaqueFlags (View.java:16791)
à android.view.View.setBackgroundDrawable (View.java:21710)
à android.view.View.setBackground (View.java:21603)
sur android.view.View.(Vue.java:5547)
sur android.widget.TextView.(TextView.java:1135)
sur android.widget.EditText.(EditText.java:107)
sur android.widget.EditText.(EditText.java:103)
sur android.widget.EditText.(EditText.java:99)
sur android.widget.EditText.(EditText.java:95)
à com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:92)

Quel semble être le problème ici?
J'ai essayé quelques enquêtes:
- plus de 1000 edittext fonctionnent dans une application Android pure
- quelque 200 ReactTextInput échouent comme indiqué ici

• Une analyse du problème a révélé un curieux scénario multithreading sortant de SparseArray
  - SparseArray n'est pas threadsafe et en même temps il y a une logique de gc () à l'intérieur
  - SparseArray est utilisé pour DrawableContainerState et un nouveau DrawableContainerState peut être créé en utilisant les futurs dessinables d'un état constant existant (c'est SparseArray) par clonage
  - Ce qui précède est une recette pour une exception de pointeur null multi-thread et cela se passe comme ci-dessous
  - Le thread de module natif travaillant sur la création du nœud d'ombre React Edit Text et son cycle de vie fait un nouveau EditText (reactthemedcontext) qui à son tour aboutit à un dessin en arrière-plan à définir et enfin à appeler le code non sécurisé du thread SparseArray
  - Le thread d'interface utilisateur peut quant à lui être utilisé pour créer l'affichage EditText d'un autre RTI en même temps menant au même code non sécurisé de thread SparseArray
  - Une exception Nullpointer se produit lorsque gc () est invoqué et que simultanément le clonage (ce clone se produit en interne dans la classe Drawable *) est effectué pour le même objet donnant naissance à un objet partiellement gc-ed. Quelque chose comme un élément du tableau de valeurs a été supprimé et nul, mais l'indicateur noOfItems n'a pas encore été mis à jour, donc l'objet cloné a un élément de moins que spécifié dans l'indicateur noOfItems et l'itération peut provoquer une exception de pointeur nul pour l'index supprimé.

Comment avons-nous résolu ou fait fonctionner cela?
[1] Déplacez également le nouvel appel EditText (context) sur le thread de l'interface utilisateur et prenez la mesure de ShadowNode async mais en attendant que cet objet EditText ait été créé sur le thread de l'interface utilisateur - réécrit fondamentalement le nœud d'ombre setThemedContext et mesurez les fonctions
Points faibles: commutateur de fil pour chaque RTI

[2] Créez EditText à l'aide de la mise en page inflater sur le module natif tout en spécifiant null pour l'arrière-plan et créez une seule fois l'arrière-plan dessinable en créant un EditText sur le thread d'interface utilisateur et en mettant en cache son arrière-plan dessinable au niveau shadowNode. Ce dessinable est utilisé pour définir l'arrière-plan des dummyEditTexts créés à l'aide du gonfleur de mise en page pour que la mesure tienne compte des rembourrages borderline dessinés. Dans ce cas, la mesure n'a besoin d'attendre qu'une seule fois la création de Drawable

J'ai testé les deux et ils fonctionnent bien pour 1024 ReactTextInput.

Remarque: Basé sur une enquête, cela ne semble pas vraiment être la solution la plus élégante, mais cela fonctionne avec des changements minimes et prouve l'analyse du problème.

Les suggestions et critiques sont les bienvenues!

Code du nœud d'ombre:

`paquet.richtextinput;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.EditText;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.uimanager.Spacing;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.UIViewOperationQueue;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.text.ReactBaseTextShadowNode;
import com.facebook.react.views.text.ReactTextUpdate;
import com.facebook.react.views.textinput.ReactTextInputLocalData;
import com.facebook.react.views.view.MeasureUtil;
import com.facebook.yoga.YogaMeasureFunction;
import com.facebook.yoga.YogaMeasureMode;
import com.facebook.yoga.YogaMeasureOutput;
import com.facebook.yoga.YogaNode;
importer.R;

import javax.annotation.Nullable;
// NOTE: Cette classe n'est pas très différente de ReactTextInputShadowNode attendue dans le mécanisme de
// définition du contexte du thème et mesure de la performance
Classe publique ReactTextInputShadowNode étend ReactBaseTextShadowNode implémente YogaMeasureFunction
{
@VisibleForTesting
public static final String PROP_TEXT = "texte";
Private static Drawable sDummyEditTextBackgroundDrawable = null;

private int mMostRecentEventCount = UNSET;
private <strong i="13">@Nullable</strong> EditText mDummyEditText;
private <strong i="14">@Nullable</strong> ReactTextInputLocalData mLocalData;
// Represents the {<strong i="15">@code</strong> text} property only, not possible nested content.
private <strong i="16">@Nullable</strong> String mText = null;

public ReactRichTextInputShadowNode()
{
    mTextBreakStrategy = (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) ?
            0 : Layout.BREAK_STRATEGY_SIMPLE;
    setMeasureFunction(this);
}

<strong i="17">@Override</strong>
public void setThemedContext(final ThemedReactContext themedContext)
{
    super.setThemedContext(themedContext);

    // Inflating with layout using background as null because new EditText(context) call
    // can cause NullPointer Exception during a race scenario of UI thread performing EditText
    // creation with background at the same time
    //   BACKGROUND:
    // ---------------
    // SparseArray is not threadsafe and at the same time there is logic of gc() inside it
    // SparseArray is used by DrawableContainerState and new DrawableContainerState may get
    // created using the an existing constant state's drawable futures(this is SparseArray) by
    // cloning
    // The above is a recipe for a multi-threaded null pointer exception and it happens as below
    //    - Native module thread working on RTI shadow node creation and its lifecycle does a
    //      new EditText(reactThemedContext) which in turn results in background drawable to be
    //      set and finally invoking the SparseArray thread unsafe code
    //    - UI thread meanwhile could be used to create the display EditText of some other RTI
    //      at the same time leading up to the same SparseArray thread unsafe code
    //    - Null pointer exception happens when the gc() is invoked and simultaneously clone is
    //      being done for the same object giving rise to a partially gc-ed object. Something
    //      like an item from values array was removed and null-ed but the noOfItems flag is yet
    //      to be updated, so cloned object has one item less than specified in noOfItems flag
    //      and iteration can cause null pointer exception for the deleted index.
    //
    //   Solution:
    // ------------
    // Create EditText using layout inflater on Native module while specifying null for
    // background and create only once the background drawable by creating an EditText on UI
    // thread and caching its background drawable at shadowNode level. In this case measure only
    // needs to wait once for the Drawable creation
    //      Shortcomings: Ideally we would like to create the Drawable on the same Native module
    //                    thread but not able to access android.internal stylable ids to
    //                    approach this solution

    LayoutInflater sInflater =
            (LayoutInflater) themedContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    EditText editText  =
            (EditText) sInflater.inflate(R.layout.dummy_edit_text, null, false);

    // creating the EditText theme background on UI thread async to prevent above mentioned race
    // scenario
    if (sDummyEditTextBackgroundDrawable == null) {
        themedContext.runOnUiQueueThread(new Runnable() {
            <strong i="18">@Override</strong>
            public void run() {
                sDummyEditTextBackgroundDrawable = new EditText(themedContext).getBackground();
            }
        });
    }

    mDummyEditText = editText;
}

<strong i="19">@Override</strong>
public long measure(YogaNode node, float width, YogaMeasureMode widthMode, float height,
        YogaMeasureMode heightMode)
{
    // measure() should never be called before setThemedContext()
    EditText editText = Assertions.assertNotNull(mDummyEditText);

    if (mLocalData == null || sDummyEditTextBackgroundDrawable == null)
    {
        // No local data or edit text background drawable, no intrinsic size.
        return YogaMeasureOutput.make(0, 0);
    }

    // {<strong i="20">@code</strong> EditText} has by default a border at the bottom of its view
    // called "underline". To have a native look and feel of the TextEdit
    // we have to preserve it at least by default.
    // The border (underline) has its padding set by the background image
    // provided by the system (which vary a lot among versions and vendors
    // of Android), and it cannot be changed.
    // So, we have to enforce it as a default padding.
    // Sharing the same background drawable is not working in measure and Edit Text features.
    // Hence, cloning.
    editText.setBackground(sDummyEditTextBackgroundDrawable.getConstantState().newDrawable());
    setDefaultPadding(Spacing.START, editText.getPaddingStart());
    setDefaultPadding(Spacing.TOP, editText.getPaddingTop());
    setDefaultPadding(Spacing.END, editText.getPaddingEnd());
    setDefaultPadding(Spacing.BOTTOM, editText.getPaddingBottom());

    // We must measure the EditText without paddings, so we have to reset them.
    editText.setPadding(0, 0, 0, 0);

    // This is needed to fix an android bug since 4.4.3 which will throw an NPE in measure,
    // setting the layoutParams fixes it: https://code.google.com/p/android/issues/detail?id=75877
    editText.setLayoutParams(
          new ViewGroup.LayoutParams(
                  ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

    mLocalData.apply(editText);
    editText.measure(
          MeasureUtil.getMeasureSpec(width, widthMode),
          MeasureUtil.getMeasureSpec(height, heightMode));
    return YogaMeasureOutput.make(editText.getMeasuredWidth(), editText.getMeasuredHeight());
}

<strong i="21">@Override</strong>
public boolean isVirtualAnchor()
{
    return true;
}

<strong i="22">@Override</strong>
public boolean isYogaLeafNode()
{
    return true;
}

<strong i="23">@Override</strong>
public void setLocalData(Object data)
{
    Assertions.assertCondition(data instanceof ReactTextInputLocalData);
    mLocalData = (ReactTextInputLocalData) data;
    // Telling to Yoga that the node should be remeasured on next layout pass.
    dirty();
    // Note: We should NOT mark the node updated (by calling {<strong i="24">@code</strong> markUpdated}) here
    // because the state remains the same.
}
@ReactProp(name = "mostRecentEventCount")
public void setMostRecentEventCount(int mostRecentEventCount)
{
    mMostRecentEventCount = mostRecentEventCount;
}

@ReactProp(name = PROP_TEXT)
public void setText(<strong i="25">@Nullable</strong> String text)
{
    mText = text;
    markUpdated();
}

public <strong i="26">@Nullable</strong> String getText()
{
    return mText;
}

<strong i="27">@Override</strong>
public void setTextBreakStrategy(<strong i="28">@Nullable</strong> String textBreakStrategy)
{
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M)
    {
        return;
    }
    if (textBreakStrategy == null || "simple".equals(textBreakStrategy))
    {
        mTextBreakStrategy = Layout.BREAK_STRATEGY_SIMPLE;
    }
    else if ("highQuality".equals(textBreakStrategy))
    {
        mTextBreakStrategy = Layout.BREAK_STRATEGY_HIGH_QUALITY;
    }
    else if ("balanced".equals(textBreakStrategy))
    {
        mTextBreakStrategy = Layout.BREAK_STRATEGY_BALANCED;
    }
    else
    {
        throw new JSApplicationIllegalArgumentException("Invalid textBreakStrategy: " +
                textBreakStrategy);
    }
}

<strong i="29">@Override</strong>
public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue)
{
    if (mMostRecentEventCount != UNSET)
    {
        ReactTextUpdate reactTextUpdate =
            new ReactTextUpdate(
                    spannedFromShadowNode(this, getText()),
                    mMostRecentEventCount,
                    mContainsImages,
                    getPadding(Spacing.LEFT),
                    getPadding(Spacing.TOP),
                    getPadding(Spacing.RIGHT),
                    getPadding(Spacing.BOTTOM),
                    mTextAlign,
                    mTextBreakStrategy);
        uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), reactTextUpdate);
    }
}

<strong i="30">@Override</strong>
public void setPadding(int spacingType, float padding)
{
    super.setPadding(spacingType, padding);
    markUpdated();
}

} `

Fichier de mise en page de texte d'édition factice

<?xml version="1.0" encoding="utf-8"?> <EditText xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dummy_edit_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" />

@sayantanbugs avez-vous un morceau de code pour cette solution? Merci!

Mise à jour de mon dernier commentaire pour inclure le code ShadowNode et la mise en page utilisée pour gonfler un edittext factice

@sayantanbugs - C'est un excellent travail 🕵️! Nous allons l'essayer dans notre projet et faire un rapport! Merci!

Même problème
ReactNatif: 0,55,4
Android: 8,0

@sayantanbugs pouvez-vous s'il vous plaît fournir un diff / patch?

Même problème. Rapporté via Crashlytics sans beaucoup d'autres détails, donc vraiment difficile à dépanner.

RN 55,3
Android 8

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:16791)
       at android.view.View.setBackgroundDrawable(View.java:21710)
       at android.view.View.setBackground(View.java:21603)
       at android.view.View.<init>(View.java:5547)
       at android.widget.TextView.<init>(TextView.java:1135)
       at android.widget.EditText.<init>(EditText.java:107)
       at android.widget.EditText.<init>(EditText.java:103)
       at android.widget.EditText.<init>(EditText.java:99)
       at android.widget.EditText.<init>(EditText.java:95)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext(ReactTextInputShadowNode.java:80)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:282)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:366)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:789)
       at android.os.Handler.dispatchMessage(Handler.java:98)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
       at android.os.Looper.loop(Looper.java:164)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
       at java.lang.Thread.run(Thread.java:764)

C'est la principale cause du plantage de notre application en production. Quand / comment cela peut-il arriver?

Même chose ici dans la version de production.
Se produit lors de l'édition de texte. C'est aléatoire.

réagir: 16,3,0
réactif natif: 0,54,4
même problème, comment le résoudre?

^^^ Davantage de personnes devraient essayer de résoudre le problème avec la solution @sayantanbugs . Localisez simplement votre fichier ReactTextInputShadowNode.java dans votre dossier react-native et échangez le code qu'il a fourni dans son message. Vous pourriez être agréablement surpris.

Une semaine plus tard, je suis heureux d'annoncer que l'erreur ne s'est reproduite qu'une seule fois. MAIS cette fois, c'était différent. J'ai pu redémarrer l'application et la faire fonctionner normalement sans avoir à réinstaller l'application via react-native run-android ce qui était vraiment pénible car avant je perdrais littéralement l'accès à quelques écrans qui rendu ces TextInputs. Je continuerai à prendre note de l'erreur si elle apparaît à nouveau, mais jusqu'à présent, je pense que cela fonctionne presque parfaitement de mon côté. Excellent débogage, @sayantanbugs!

@ Friendly-Robot imo ce n'est pas une solution. C'est au mieux une solution de contournement. Cela se produit dans le code de production où nous ne pouvons pas simplement corriger une solution non testée qui, vous l'admettez même, ne la corrige pas.

Si c'est ennuyeux pour les développeurs, bien sûr, par tous les moyens. Mais je ne pense pas qu'il soit sage de motiver les gens à l'utiliser comme solution. Peut-être comme base pour un PR.

D'accord avec @ Friendly-Robot (néanmoins, merci @sayantanbugs ). Quelqu'un de RN ici? Pensez-vous que le correctif peut atteindre le repo RN et être testé?

Ok, j'ai finalement pu tester l' approche de ReactEditText avec une méthode drawableStateChanged() corrigée:

  <strong i="9">@Override</strong>
  protected void drawableStateChanged() {
    try {
      super.drawableStateChanged();
    } catch (Exception e) {
      Timber.e("Prevented Drawable crash!");
    }
  }

C'est littéralement juste un patch, mais au moins l'application ne plantera pas. La saisie de texte est toujours réactive et fonctionne comme prévu, pour autant que je sache.

Lors de la reproduction du crash (maintenant corrigé), j'ai pu voir que cette exception réelle s'est produite plusieurs fois de suite rapidement.

ÉDITER:
Hmmm ... alors que tout semble fonctionner, il semble que l'état Drawable a été corrompu de façon permanente. Même après avoir créé une vue complètement nouvelle avec de nouvelles entrées de texte, toucher n'importe quelle entrée de texte fera réapparaître le message. Heureusement, cela ne s'affiche que lorsque vous cliquez sur l'entrée et non lors de la saisie de texte.

J'ai joué avec ma vue et ma transition ce soir, j'ai eu cette erreur une vingtaine de fois ... Je ne faisais rien d'autre que de cliquer sur mes navigations pour tester les transitions entre les vues. Je suppose que c'est un gros problème: /

Merci @ Friendly-Robot pour avoir testé la solution!

J'accepte que la plupart des points de vue sur ma solution soient un patch et je l'ai mentionné dans mon article d'origine qui inclut la solution. La raison pour laquelle il pourrait encore être utilisé dans mon projet est que nous avons créé de notre côté un RTI plus riche en fonctionnalités, étendant le RN RTI. Nous pourrions donc utiliser ma solution dans l'implémentation ShadowNode de mon RTI personnalisé. En fait, dans notre projet, nous maintenons une version modifiée de RN pour corriger de nombreux bogues / cas d'utilisation RN, et par conséquent, nous pouvons également intégrer ces modifications.

Je prévois de donner un second regard sur d'autres possibilités, car j'ai dû résoudre le problème brûlant en quelques jours pendant cette période.

Merci à tous pour vos commentaires!

@davidmontemayor , si ce problème d'état drawable est remarqué avec mon correctif, vous pouvez modifier le shadowNode pour simplement faire un nouvel EditText () toujours mais en déplaçant cet appel vers UIthread et donc ne pas gérer le drawable de toute façon. Cela réglerait définitivement le problème. Je ne voulais pas faire cela car ce serait un moyen inefficace de changer de thread lorsque le véritable objectif du nœud Shadow était simplement d'obtenir le rembourrage de la bordure de l'arrière-plan, mais le mécanisme utilisé par RN ne se comporte pas ainsi mais a un effet secondaire.
Cela nous fait penser que nous pourrions réécrire nous-mêmes le ShadowNode de sorte que nous n'ayons pas besoin de l'objet EditText de la manière dont il est utilisé à ce stade autre que l'utilisation de la fonction de mesure.

Cela m'arrive aussi. J'utilise ScrollView.
J'ai divers contrôles (radio, liste, edittext, etc.) dans un scrollview. Je dirais que j'ai un maximum de 10 contrôles, donc pas une liste énorme.
C'est difficile à reproduire cependant. Cela semble se produire à des moments aléatoires, mais je pense que je suis en train de le suivre pour mettre l'application au premier plan à partir de l'arrière-plan lorsque j'ai ScrollView à l'écran (avec des commandes edittext).
Pas sûr à 100%
Je me demande si cela est lié à la version lib de support Android.

Allez FB, corrige ce bug.
Il est difficile de créer des applications de qualité de production lorsque nous avons des plantages aléatoires comme celui-ci.

com.facebook.react.views.textinput.ReactEditText
RN 0,54
SDK Android 27
Téléphone 8.1

J'ai également ce problème, en utilisant également ScrollViews. @davidmontemayor , pourriez-vous diriger son RN newb vers quel fichier vous avez édité par la structure de répertoires? J'ai une application sur le marché que le crash affecte de manière irritante et j'espérais attraper l'erreur comme vous l'avez fait jusqu'à ce qu'une solution se produise. Avez-vous un exemple du fichier que vous avez utilisé?

Même:

NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference

@Squidski - Malheureusement, le EditText . Pour le contexte, il existe de deux manières différentes que ce problème se manifeste:

• Lorsque le ReactEditText est instancié ( android.widget.EditText.<init>(EditText.java:95) )
• Lorsque ReactEditText interagit avec ( android.widget.TextView.onTouchEvent(TextView.java:8467) )

L'essentiel est de remplacer la vue créée dans ReactTextInputShadowNode . Au lieu de le laisser faire new EditText(getThemedContext()) , créez votre propre classe qui s'étend de EditText . Vous pouvez alors intercepter l'exception provoquée par le deuxième chemin dans drawableStateChanged() .

La partie la plus difficile est de corriger les erreurs d'initialisation. Pour cela, vous devez créer une classe "Drawable Wrapper" qui peut être utilisée pour envelopper n'importe quel ancien dessinable qui est passé dans EditText.setBackground() . Ce wrapper doit ensuite intercepter les exceptions levées par le délégué.

Ce problème se produit toujours de manière aléatoire avec mon application avec la dernière version de React Native + le dernier JSC + le dernier gradle au 25 juillet 2018

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.3
      CPU: x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
      Memory: 26.19 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.4.1 => 16.4.1
      react-native: ^0.56.0 => 0.56.0
    npmGlobalPackages:
      react-native-cli: 2.0.1

JSC: org.webkit:android-jsc:r224109
Gradle: 4.8.1

J'ai commencé à voir ce problème avec Android 8.0.0 et avec RN 0.55.3. Y a-t-il des solutions de contournement pour ceci ou un PR peut-être?

Avoir le même problème au hasard aussi avec une FlatList de TextInputs 😞

• React-Native: 0,55,4

java.lang.NullPointerExceptionMainActivity

java.lang.NullPointerException Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference 
    DrawableContainer.java:875 android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures
    DrawableContainer.java:1158 android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity
    DrawableContainer.java:433 android.graphics.drawable.DrawableContainer.getOpacity
    InsetDrawable.java:258 android.graphics.drawable.InsetDrawable.getOpacity
    View.java:15842 android.view.View.computeOpaqueFlags
    View.java:20658 android.view.View.setBackgroundDrawable
    View.java:20551 android.view.View.setBackground
    View.java:5290 android.view.View.<init>
    TextView.java:832 android.widget.TextView.<init>
    EditText.java:88 android.widget.EditText.<init>
    EditText.java:84 android.widget.EditText.<init>
    EditText.java:80 android.widget.EditText.<init>
    EditText.java:76 android.widget.EditText.<init>
    ReactTextInputShadowNode.java:80 com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext
    UIImplementation.java:282 com.facebook.react.uimanager.UIImplementation.createView
    UIManagerModule.java:366 com.facebook.react.uimanager.UIManagerModule.createView
    Method.java:-2 java.lang.reflect.Method.invoke
    JavaMethodWrapper.java:372 com.facebook.react.bridge.JavaMethodWrapper.invoke
    JavaModuleWrapper.java:160 com.facebook.react.bridge.JavaModuleWrapper.invoke
    NativeRunnable.java:-2 com.facebook.react.bridge.queue.NativeRunnable.run
    Handler.java:790 android.os.Handler.handleCallback
    Handler.java:99 android.os.Handler.dispatchMessage
    MessageQueueThreadHandler.java:29 com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage
    Looper.java:164 android.os.Looper.loop
    MessageQueueThreadImpl.java:192 com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run
    Thread.java:764 java.lang.Thread.run

Sur la base de la lecture et du débogage, j'ai décidé d'essayer ce qui suit ce week-end ...

1. Supprimer tous les appels underlineColorAndroid de mon code (j'utilise react-native-elements 0.19)

   • l'application doit revenir à l'utilisation de transparent pour les contrôles EditText
   • essayez également de forcer à la transparence

2. Mettez à jour mes styles Android pour les suivre. Cela forcera tous les contrôles EditText à avoir un arrière-plan transparent

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="15">@android</strong>:color/transparent</item>
    </style>

</resources>

1. Test - Test - Test. Le problème est difficile à reproduire. Bien qu'un client soit tombé dessus ce matin.

2. En tant que solution de secours, implémentez le correctif de @sayantanbugs
   4.1 Mettre à jour les éléments react-native-elements vers 1.0xx beta

Lectures
https://issuetracker.google.com/issues/37068452
https://github.com/facebook/react-native/issues/18214

RN 0,54
React-native-elements 0.19

Se produit sur RN 0.56.0 Android 8.1.0
Vous vous demandez s'il est prévu de le faire avancer.

Essayez de remplacer toutes les instances de
underlineColorAndroid={"transparent"}
avec
underlineColorAndroid={"#00000000"}

Avoir ce problème. Résolvez-le avec quelque chose de délicat. Créez un bouton qui gère le rendu de l'entrée actuelle. Nous avons donc FlatList de boutons et seulement TextInput que nous éditons en ce moment. Sans ref, nous devons double-cliquer pour commencer l'entrée d'édition

handleShowInput(key) {
    const { inputKeyToShow } = this.state;

    if (!inputKeyToShow) {
        this.setState({
            inputKeyToShow: key,
        }, () => this.textInput.focus());
    } else {
        this.setState({
            inputKeyToShow: null,
        });
    }
}

{inputKeyToShow !== key ?
    (
        <TouchableOpacity
            ...
            onPress={() => this.handleShowInput(key)}
        >
            <Text>{value}</Text>
        </TouchableOpacity>
    ) :
    (
        <TextInput
            ...
            ref={ref => (this.textInput = ref)}
            value={value}
            onEndEditing={() => this.handleShowInput(key)}
        />
    )
}

@WilliamAlexander @paulroy Votre solution a-t-elle fonctionné?

@xstreamcl, la solution que j'ai publiée fonctionne jusqu'à présent. Plus de 2 semaines et je n'ai pas vu le problème.
Besoin de plus de tests cependant;)

Ce problème a également fait planter notre application en production. C'est un vilain bogue, car il est vraiment difficile à reproduire. Nous avons trouvé une solution prometteuse pour notre application, et j'aimerais partager nos résultats ici pour, espérons-le, gagner du temps et de la frustration aux autres.

Spécifications et versions

Ce bogue a provoqué le crash de notre application sur les appareils Samsung, Google et LG Android. Nous avons reçu des rapports d'erreur des versions Android suivantes:

• 8.0.0
• 8.1.0
• 7.1.1

Notre application fonctionne:

• react-native : 0,53,0
• react : 16.2.0

Qu'est-ce qui cause le crash

Comme d'autres l'ont noté dans ce fil, le problème semble être déclenché par le rendu d'une combinaison de composants TextInput , FlatList et ScrollView . Dans notre cas, nous avons un écran contenant un seul TextInput rendu au-dessus d'un FlatList . Lorsque l'un des éléments du FlatList est touché, l'application accède à un nouvel écran contenant un formulaire. Le composant racine de ce formulaire est un ScrollView qui contient un certain nombre de composants TextInput (ainsi que des boutons et d'autres composants personnalisés). Notre application se bloque lorsque l'utilisateur appuie sur l'un de ces éléments FlatList (notez que cela n'arrive pas toutes les fois).

Reproduire ce problème est difficile. En fait, nous n'avons pas pu le faire. Mais nous savons que le plantage se produit à ce stade du flux de travail en regardant nos enregistrements de session Appsee.

Parce que nous ne pouvons pas reproduire le problème, nous avons dû nous fier aux journaux de plantage d'Appsee pour le déboguer. J'ai copié la trace de pile des rapports de plantage ci-dessous (et omis certaines sections bruyantes). C'est plus ou moins identique aux traces de pile publiées dans ce fil par d'autres:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

Source du problème

Après avoir lu ce fil et effectué quelques heures ou quelques recherches, j'ai trouvé le gestionnaire de prop underlineColorAndroid dans le fichier ReactTextInputManager.java :

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="10">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

Le rapport de bogue lié dans le commentaire contient la trace de pile suivante:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

Cela correspond à la trace de pile que nous rencontrons dans notre application. Je ne prétends pas comprendre pleinement le problème sous-jacent, mais il semble probable que la cause du plantage de notre application en production soit due au déclenchement du bogue Drawable.mutate() . Cela se produit lorsque nous essayons de définir le prop underlineColorAndroid sur notre composant TextInput (et invoquons ainsi la méthode ReactTextInputManager.setUnderlineColor ).

Notre application rendait un TextInput avec les accessoires suivants, dont l'un était underlineColorAndroid="transparent" :

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

Comment nous l'avons réparé

Nous devions définir cet accessoire afin de supprimer le soulignement des composants TextInput de notre application. Mais sur la base de nos résultats, son gestionnaire d'accessoires semblait déclencher un bogue Android qui provoquait parfois un crash de l'application.

Heureusement, il existe un autre moyen de supprimer les soulignements des composants TextInput sur Android. Vous pouvez ajouter une ligne au fichier android/app/src/main/res/values/styles.xml :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="16">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="17">@android</strong>:color/transparent</item>
    </style>
</resources>

Notez que j'ai également vu ce qui suit suggéré, mais cela n'a pas supprimé les soulignements pour nous:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="22">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="23">@android</strong>:color/transparent</item>
+   </style>
</resources>

Cela ne résout pas le problème sous-jacent. Il s'agit simplement d'une solution de contournement qui consiste à éviter l'utilisation de la underlineColorAndroid sur les composants TextInput .

Je ne peux pas encore dire avec certitude que cela fonctionne réellement, car je n'ai pas pu reproduire le problème localement. Nous déploierons ce changement dans une mise à jour de notre application dans les semaines à venir. Après cela, nous devrons attendre un moment pour voir si cela se produit plus. Je vais essayer de faire rapport avec nos conclusions.

Bonne chance à tous ceux qui luttent contre ce problème frustrant! J'espère que ça aide.

Merci @Hopding, apparemment, votre solution fonctionne!

@Hopding
Oui, merci beaucoup

Pour nous, ce problème et tous les problèmes similaires où vous découvrez une méthode d'appel sur une référence nulle dans Android sont causés par le fait que l'application ne dispose pas du style approprié .

Le fait est que la plupart des composants react-native - sinon tous - s'étendent à partir des composants appcompat ; ie . Par conséquent, avoir un style comme celui-ci est obligatoire:

At somewhere like: /android/app/src/main/res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
</resources>

Cela se produit parce que le composant appcopmat n'est pas rendu en premier lieu et donc le view.getDrawable() renvoie une valeur nulle à partir de laquelle vous ne pouvez appeler aucune méthode comme: setUnderlineColor ou setColorTint (Les commutateurs ont également ce problème).

Dans notre cas, parce que nous utilisions react-native pour créer des bibliothèques natives qui seront installées plus tard dans des applications natives, nous ne pouvons pas contrôler que les styles sont présents dans l'application finale. Au moins maintenant, nous sommes conscients de ce problème et nous avons amélioré notre documentation;)

J'espère que cela aide!

@sospedra Votre commentaire a du sens, mais j'ai vérifié mon code et j'ai trouvé que appcompat existe déjà dans mon style. Si vous vérifiez la solution de contournement de Hopding, il a déjà appcompat .

@Hopding
Ce style fonctionne très bien:

@WilliamAlexander , je n'ai pas réussi à faire fonctionner votre suggestion. Pouvez-vous inclure tout le style qui vous convient?
L'autre problème auquel je suis confronté est que lors de l'application du correctif de

Mise à jour: le style de @Hopding doit être écrit de cette manière

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
     <item name="android:background"><strong i="11">@android</strong>:color/transparent</item>
     <item name="android:paddingTop">??dp</item>
     <item name="android:paddingBottom">??dp</item>
    </style>

J'ai dû ajouter le rembourrage pour corriger la rupture de mise en page.

@ gavin-gmlab.

C'est ici.
»

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/colorPrimary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/colorAccent</item>

    <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->

    <item name="android:windowIsTranslucent">true</item>
</style>

 <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="android:background"><strong i="9">@android</strong>:color/transparent</item>
</style>

»

Supprimé underlineColorAndroid = "transparent"

et changé style.xml

ça marche pour moi

aucune des solutions ci-dessus n'a fonctionné pour moi, mais apparemment, la fermeture de l'application, le packager et la réexécution l'ont fait.

Effacez simplement les données de votre application et réexécutez

Merci @WilliamAlexander et @Hopding pour leur solution, mais lorsque je change de fond, cela supprime également le remplissage de mon InputText. Au lieu de cela, j'ai utilisé backgroundTint et cela fonctionne bien sans aucun changement de rembourrage

`` ``

<style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="backgroundTint"><strong i="12">@android</strong>:color/transparent</item>
</style>

`` ``

Ok, y a-t-il une solution à cela pour les utilisateurs de l'Expo, à l'exception de l'éjection?

@Twishka Malheureusement, vous devrez également vous éjecter vers le raw react-native, car Expokit a les mêmes problèmes.

Je ne mets même pas en place underlineColorAndroid n'importe où dans mon application, mais j'ai toujours ce journal dans ma console Firebase. Et je ne sais pas comment reproduire à nouveau ce problème.

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:15945)
       at android.view.View.setBackgroundDrawable(View.java:20887)
       at android.view.View.setBackground(View.java:20780)
       at android.view.View.(View.java:5311)
       at android.widget.TextView.(TextView.java:850)
       at android.widget.EditText.(EditText.java:95)
       at android.widget.EditText.(EditText.java:91)
       at android.widget.EditText.(EditText.java:87)
       at android.widget.EditText.(EditText.java:83)
       at com.facebook.react.views.textinput.ReactEditText.(SourceFile:92)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(SourceFile:100)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(SourceFile:60)
       at com.facebook.react.uimanager.ViewManager.createView(SourceFile:42)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(SourceFile:260)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(SourceFile:200)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(SourceFile:1085)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(SourceFile:1056)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(SourceFile:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(SourceFile:134)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(SourceFile:105)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:918)
       at android.view.Choreographer.doCallbacks(Choreographer.java:732)
       at android.view.Choreographer.doFrame(Choreographer.java:661)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:906)
       at android.os.Handler.handleCallback(Handler.java:790)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:187)
       at android.app.ActivityThread.main(ActivityThread.java:7025)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:514)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:888)

En parlant de couleurs, j'ai placeHolderTextColor et borderColor à #acacac et lorsqu'un problème de validation se produit, borderColor à red . A part ça, je ne règle même pas underlineColorAndroid .

Toute aide est appréciée.

@mddanishansari Puisque rn 0.56 underlineColorAndroid est défini par défaut , vous avez donc besoin du correctif mentionné ci-dessus.

@mddanishansari Puisque rn 0.56 underlineColorAndroid est défini par défaut , vous avez donc besoin du correctif mentionné ci-dessus.

Merci beaucoup. Je ne m'attendais pas à une réponse aussi rapide. Le problème est que tous les autres arrière-plans natifs d'origine EditText sont également transparents, ce qui semble étrange. Certains écrans de mon application sont également en natif d'origine (Java).

Je me demandais simplement comment résoudre ce problème. La solution fournie n'est qu'un simple hack. Droite?

Salut les gars. Ainsi, l'utilisation de underlineColorAndroid déclenche en quelque sorte ce plantage.
Mais maintenant, en plus, underlineColorAndroid est défini par défaut.
Comment éviter d'utiliser cela et revenir à styles.xml.?

Cordialement

Juste au cas où cela aiderait quelqu'un. Dans mon cas, j'envoyais accidentellement NaN au lieu de la valeur de couleur réelle, cela m'est arrivé dans 'borderBottomLeftRadius' Je n'ai eu aucun problème avec l'iPhone juste Android.

les solutions de ce fil ne fonctionnent pas pour moi. Même en définissant le underlineColorAndroid pour toutes mes entrées de texte sur quelque chose de non transparent (j'ai testé avec '#f00' ), je rencontre toujours ce problème.

Pour moi, le problème ne se produit pas systématiquement. J'ai un tas de TextInputs dans un ScrollView, et je dois ouvrir et fermer l'écran plusieurs fois pour que cela se produise

Ce n'est pas la transparence qui cause l'erreur, c'est le changement de
couleur native de l'accessoire natif de réaction. C'est juste que presque tout le monde
rend le soulignement natif transparent avec l'accessoire.

Le mer.6 février 2019, 22:23 Adrien Pyke [email protected] a écrit:

les solutions de ce fil ne fonctionnent pas pour moi. Même lors du réglage du
underlineColorAndroid pour toutes mes entrées de texte dans quelque chose de non transparent
(J'ai testé avec '# f00'), je rencontre toujours ce problème.

Pour moi, le problème ne se produit pas systématiquement. J'ai un tas de TextInputs
dans un ScrollView, et je dois ouvrir et fermer l'écran plusieurs fois
pour que cela se produise

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/facebook/react-native/issues/17530#issuecomment-461283498 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AOG_BAlfs-GKED4gOuvtKlMD0vwEH-_zks5vK6ozgaJpZM4RaUHf
.

OK je vois.

Juste par curiosité, j'ai essayé de supprimer la valeur par défaut de transparent d'ici

https://github.com/facebook/react-native/commit/a3a98eb1c7fa0054a236d45421393874ce8ce558

Fait intéressant, l'erreur se produit toujours pour moi

Je viens de rencontrer ce bug sur RN 58.3 android. Il n'y avait aucune rime ou raison apparente, sauf que chaque fois que je rendais un composant TextInput l'erreur était levée. Même si je rendais un TextInput sans accessoires ni modifications, il planterait toujours.

J'ai essayé de redémarrer Metro et de réinitialiser le cache mais cela n'a pas fonctionné. En fait, j'ai dû ouvrir Android Studio et reconstruire l'application, auquel cas elle a commencé à fonctionner. Cela pourrait-il être un problème avec gradle qui ne regroupe pas correctement les dépendances ou quelque chose? Cela semble long car je développais pendant 4 bonnes heures sans rien redémarrer avant de rencontrer ce problème, mais je ne peux vraiment pas penser à ce qui pourrait le causer.

J'ai rencontré cette erreur dans RN 58.0 sur les appareils:
Redmi Note 6 Pro - Android 8.1
Mi A2 Lite - Android 9
WAS-LX1A - Android 8

Apparaît parfois en regardant Sentry, j'espère que cela aide.

Les développeurs vont-ils résoudre ce problème? la solution de contournement ne nous convient pas!

j'ai la même chose en production

Nous avons la même trace de pile que deux rapportées ci-dessus, sur React 0.59

(avec DrawableContainerState.createAllFutures sur la 2ème ligne de la trace de pile)

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags(View.java:15718)
       at android.view.View.setBackgroundDrawable(View.java:20528)
       at android.view.View.setBackground(View.java:20421)
       at android.view.View.<init>(View.java:5248)
       at android.widget.TextView.<init>(TextView.java:826)
       at android.widget.EditText.<init>(EditText.java:88)
       at android.widget.EditText.<init>(EditText.java:84)
       at android.widget.EditText.<init>(EditText.java:80)
       at android.widget.EditText.<init>(EditText.java:76)
       at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:89)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:102)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:62)
       at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:47)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:256)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:200)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1109)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1080)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1027)
       at android.view.Choreographer.doCallbacks(Choreographer.java:841)
       at android.view.Choreographer.doFrame(Choreographer.java:769)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1015)
       at android.os.Handler.handleCallback(Handler.java:794)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:176)
       at android.app.ActivityThread.main(ActivityThread.java:6635)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:823)

Je viens de recevoir le même stacktrace que ci-dessus après la mise à niveau de la version de production de 0.58.6 à 0.59.1 il y a quelques heures à peine. J'ai peur que ce ne soit un problème sérieux.

Une solution à ce problème?

@sunnylqm existe-t-il un moyen de définir underlineColorAndroid sur null, car il est défini par défaut?

@pedrosimao @tamdao
Vous devez supprimer manuellement cette ligne via un outil de patch comme configuration xml .
Donc, le point clé est de not set any value to underlineColorAndroid anywhere jusqu'à ce qu'un héros trouve un moyen de corriger cela.

J'ai eu cette erreur aujourd'hui
Cela fonctionne bien avant mais après une certaine construction, l'erreur s'est produite sur mon appareil
La solution de contournement pour ce problème pour moi est de désinstaller l'application sur l'appareil, puis de réinstaller l'application via react-native run-android
Après cela, le problème est parti

Btw je n'utilise pas les accessoires underlineColorAndroid, donc cela ne fonctionne pas quelle que soit la valeur que j'ai définie ou annulée pour ces accessoires

Cela se produit de manière aléatoire lorsque vous utilisez des entrées de texte dans une vue de défilement. underlineColorAndroid est toujours utilisé car il est défini par défaut .

Cela m'est aussi arrivé aujourd'hui, sur Expo.

Si vous êtes sur Expo, vous devrez fermer complètement le serveur expo, votre application et l'application Expo. Et rouvrez-les.

Sinon, l'erreur ne disparaîtrait pas.

Cela m'est arrivé, sur Expo.

Pour une raison quelconque, il y avait deux instances de mon application en arrière-plan. Lorsque j'ai cliqué sur le bouton carré Android, appelé "Vue d'ensemble", pour voir les applications en mémoire, j'ai vu ces deux instances de mon application. Lorsque je les ai fermées et exécutées à nouveau, cette erreur n'a pas été affichée.

Donc, comme les gars l'ont dit précédemment, fermez tout et recommencez devrait être réparé

J'ai passé 3 heures à essayer de comprendre cette erreur sans résultat, puis j'ai réinstallé mon application sur mon émulateur Android et l'erreur a disparu.

Essayez 0.59.4 pour voir si vous rencontrez toujours ce plantage.

@sunnylqm Je rencontre toujours ce problème sur 0.59.5.

Android: 8.0.0
Android Build: R16NW
Manufacturer: samsung
Model: SM-G955F

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
  at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
  at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
  at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
  at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
  at android.view.View.computeOpaqueFlags(View.java:16791)
  at android.view.View.setBackgroundDrawable(View.java:21710)
  at android.view.View.setBackground(View.java:21603)
  at android.view.View.<init>(View.java:5547)
  at android.widget.TextView.<init>(TextView.java:1135)
  at android.widget.EditText.<init>(EditText.java:107)
  at android.widget.EditText.<init>(EditText.java:103)
  at android.widget.EditText.<init>(EditText.java:99)
  at android.widget.EditText.<init>(EditText.java:95)
  at com.facebook.react.views.textinput.c.<init>
  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance
  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance
  at com.facebook.react.uimanager.ViewManager.createView
  at com.facebook.react.uimanager.k.a
  at com.facebook.react.uimanager.aq$e.a
  at com.facebook.react.uimanager.aq$h.c
  at com.facebook.react.uimanager.aq$h.a
  at com.facebook.react.uimanager.e.b
  at com.facebook.react.modules.core.e$b.b
  at com.facebook.react.modules.core.a$a$1.doFrame
  at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
  at android.view.Choreographer.doCallbacks(Choreographer.java:723)
  at android.view.Choreographer.doFrame(Choreographer.java:655)
  at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
  at android.os.Handler.handleCallback(Handler.java:789)
  at android.os.Handler.dispatchMessage(Handler.java:98)
  at android.os.Looper.loop(Looper.java:164)
  at android.app.ActivityThread.main(ActivityThread.java:6938)
  at java.lang.reflect.Method.invoke(Method.java:-2)
  at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

J'ai cette erreur avec un composant qui rend plusieurs TextInputs,
Lorsque je redémarre la compilation ou l'application, elle disparaît et elle revient lorsque je relance pour la deuxième fois.

Android: 9
Téléphone: SAMSUNG Galaxy note 9
Modèle: SM-N960F / DS
version native de réaction "0.58.5"

Tentative d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
createAllFutures
DrawableContainer. java: 875
getOpacity
DrawableContainer. java: 1158
getOpacity
DrawableContainer. java: 433
getOpacity
InsetDrawable. java: 258
computeOpaqueFlags
Vue. java: 18165
setBackgroundDrawable
Vue. java: 23335
setBackground
Vue. java: 23228

Vue. java: 5952

Affichage. java: 1108

Éditer le texte. java: 106

Éditer le texte. java: 102

Éditer le texte. java: 98

Éditer le texte. java: 94
setThemedContext
ReactTextInputShadowNode. java: 73
createView
UIImplementation. java: 288
createView
UIManagerModule. java: 449
invoquer
Method.java
invoquer
JavaMethodWrapper. java: 372
invoquer
JavaModuleWrapper. java: 158
courir
NativeRunnable.java
handleCallback
Handler. java: 873
expéditionMessage
Handler. java: 99
expéditionMessage
MessageQueueThreadHandler. java: 29
boucle
Looper. java: 214
courir
MessageQueueThreadImpl. java: 192
courir
Fil. java: 764

J'ai également le même problème sur Samsung Note 8, Android version 9 et React native 0.57.0

Même problème ici. React Native 0.59.0. Le problème apparaît simplement au hasard lors de l'utilisation de l'application. Impossible de voir un motif pour qu'il apparaisse. Se produit à la fois en mode développement et en production.

Ce problème a également fait planter notre application en production. C'est un vilain bogue, car il est vraiment difficile à reproduire. Nous avons trouvé une solution prometteuse pour notre application, et j'aimerais partager nos résultats ici pour, espérons-le, gagner du temps et de la frustration aux autres.

Spécifications et versions

Ce bogue a provoqué le crash de notre application sur les appareils Samsung, Google et LG Android. Nous avons reçu des rapports d'erreur des versions Android suivantes:

• 8.0.0
• 8.1.0
• 7.1.1

Notre application fonctionne:

• react-native : 0,53,0
• react : 16.2.0

Qu'est-ce qui cause le crash

Comme d'autres l'ont noté dans ce fil, le problème semble être déclenché par le rendu d'une combinaison de composants TextInput , FlatList et ScrollView . Dans notre cas, nous avons un écran contenant un seul TextInput rendu au-dessus d'un FlatList . Lorsque l'un des éléments du FlatList est touché, l'application accède à un nouvel écran contenant un formulaire. Le composant racine de ce formulaire est un ScrollView qui contient un certain nombre de composants TextInput (ainsi que des boutons et d'autres composants personnalisés). Notre application se bloque lorsque l'utilisateur appuie sur l'un de ces éléments FlatList (notez que cela n'arrive pas toutes les fois).

Reproduire ce problème est difficile. En fait, nous n'avons pas pu le faire. Mais nous savons que le plantage se produit à ce stade du flux de travail en regardant nos enregistrements de session Appsee.

Parce que nous ne pouvons pas reproduire le problème, nous avons dû nous fier aux journaux de plantage d'Appsee pour le déboguer. J'ai copié la trace de pile des rapports de plantage ci-dessous (et omis certaines sections bruyantes). C'est plus ou moins identique aux traces de pile publiées dans ce fil par d'autres:

0     java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1     at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2     at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3     at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4     at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5     at android.view.View.computeOpaqueFlags(View.java:16900)
6     at android.view.View.setBackgroundDrawable(View.java:21824)
7     at android.view.View.setBackground(View.java:21717)
8     at android.view.View.<init>(View.java:5577)
9     at android.widget.TextView.<init>(TextView.java:1144)
...
13    at android.widget.EditText.<init>(EditText.java:96)
14    at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15    at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16    at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

Source du problème

Après avoir lu ce fil et effectué quelques heures ou quelques recherches, j'ai trouvé le gestionnaire de prop underlineColorAndroid dans le fichier ReactTextInputManager.java :

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="42">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

Le rapport de bogue lié dans le commentaire contient la trace de pile suivante:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

Cela correspond à la trace de pile que nous rencontrons dans notre application. Je ne prétends pas comprendre pleinement le problème sous-jacent, mais il semble probable que la cause du plantage de notre application en production soit due au déclenchement du bogue Drawable.mutate() . Cela se produit lorsque nous essayons de définir le prop underlineColorAndroid sur notre composant TextInput (et invoquons ainsi la méthode ReactTextInputManager.setUnderlineColor ).

Notre application rendait un TextInput avec les accessoires suivants, dont l'un était underlineColorAndroid="transparent" :

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

Comment nous l'avons réparé

Nous devions définir cet accessoire afin de supprimer le soulignement des composants TextInput de notre application. Mais sur la base de nos résultats, son gestionnaire d'accessoires semblait déclencher un bogue Android qui provoquait parfois un crash de l'application.

Heureusement, il existe un autre moyen de supprimer les soulignements des composants TextInput sur Android. Vous pouvez ajouter une ligne au fichier android/app/src/main/res/values/styles.xml :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="65">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="66">@android</strong>:color/transparent</item>
    </style>
</resources>

Notez que j'ai également vu ce qui suit suggéré, mais cela n'a pas supprimé les soulignements pour nous:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="71">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="72">@android</strong>:color/transparent</item>
+   </style>
</resources>

Cela ne résout pas le problème sous-jacent. C'est juste une solution de contournement qui consiste à éviter l'utilisation de la underlineColorAndroid sur les composants TextInput .

Je ne peux pas encore dire avec certitude que cela fonctionne réellement, car je n'ai pas pu reproduire le problème localement. Nous déploierons ce changement dans une mise à jour de notre application dans les semaines à venir. Après cela, nous devrons attendre un moment pour voir si cela se produit plus. Je vais essayer de faire rapport avec nos conclusions.

Bonne chance à tous ceux qui luttent contre ce problème frustrant! J'espère que ça aide.

Je sais reproduire cette situation. Cliquez à nouveau dans le formulaire comme vous l'avez dit, puis cliquez sur l'élément dans la liste plate pour entrer le formulaire. Répétez une dizaine de fois, et un peu plus vite, cette erreur se produira. Vous pouvez reproduire l'erreur selon ce que j'ai dit.

@Hopding
Je sais reproduire cette situation. Cliquez à nouveau dans le formulaire comme vous l'avez dit, puis cliquez sur l'élément dans la liste plate pour entrer le formulaire. Répétez une dizaine de fois, et un peu plus vite, cette erreur se produira. Vous pouvez reproduire l'erreur selon ce que j'ai dit.

@Hopding
J'ai supprimé underlineColorAndroid, mais je vais le reproduire.

@ react-native-bot ce problème est très important

J'utilise RN 59.5 et j'ai également ce problème.

Tentative d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
createAllFutures
DrawableContainer. java: 875
getOpacity
DrawableContainer. java: 1158
getOpacity
DrawableContainer. java: 433
getOpacity
InsetDrawable. java: 258
computeOpaqueFlags
Vue. java: 16594
setBackgroundDrawable
Vue. java: 21577
setBackground
Vue. java: 21470

Vue. java: 5498

Affichage. java: 875

Éditer le texte. java: 88

Éditer le texte. java: 84

Éditer le texte. java: 80

Éditer le texte. java: 76
setThemedContext
ReactTextInputShadowNode. java: 76
createView
UIImplementation. java: 294
createView
UIManagerModule. java: 462
invoquer
Method.java
invoquer
JavaMethodWrapper. java: 372
invoquer
JavaModuleWrapper. java: 158
courir
NativeRunnable.java
handleCallback
Handler. java: 873
expéditionMessage
Handler. java: 99
expéditionMessage
MessageQueueThreadHandler. java: 29
boucle
Looper. java: 193
courir
MessageQueueThreadImpl. java: 232
courir
Fil. java: 764

Quelqu'un a déjà résolu cela ?? Je suis avec ce problème dans RN 52, je suis passé à 56 mais toujours l'erreur. J'ai essayé les étapes pour le reproduire, mais je ne peux pas. Certains appareils tirent toujours cela au hasard.

une chance avec ce problème?

je reçois ce problème RN 0.59.5

Ce problème a également fait planter notre application en production. C'est un vilain bogue, car il est vraiment difficile à reproduire. Nous avons trouvé une solution prometteuse pour notre application, et j'aimerais partager nos résultats ici pour, espérons-le, gagner du temps et de la frustration aux autres.

Spécifications et versions

Ce bogue a provoqué le crash de notre application sur les appareils Samsung, Google et LG Android. Nous avons reçu des rapports d'erreur des versions Android suivantes:

• 8.0.0
• 8.1.0
• 7.1.1

Notre application fonctionne:

• react-native : 0,53,0
• react : 16.2.0

Qu'est-ce qui cause le crash

Comme d'autres l'ont noté dans ce fil, le problème semble être déclenché par le rendu d'une combinaison de composants TextInput , FlatList et ScrollView . Dans notre cas, nous avons un écran contenant un seul TextInput rendu au-dessus d'un FlatList . Lorsque l'un des éléments du FlatList est touché, l'application accède à un nouvel écran contenant un formulaire. Le composant racine de ce formulaire est un ScrollView qui contient un certain nombre de composants TextInput (ainsi que des boutons et d'autres composants personnalisés). Notre application se bloque lorsque l'utilisateur appuie sur l'un de ces éléments FlatList (notez que cela n'arrive pas toutes les fois).
Reproduire ce problème est difficile. En fait, nous n'avons pas pu le faire. Mais nous savons que le plantage se produit à ce stade du flux de travail en regardant nos enregistrements de session Appsee.
Parce que nous ne pouvons pas reproduire le problème, nous avons dû nous fier aux journaux de plantage d'Appsee pour le déboguer. J'ai copié la trace de pile des rapports de plantage ci-dessous (et omis certaines sections bruyantes). C'est plus ou moins identique aux traces de pile publiées dans ce fil par d'autres:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

Source du problème

Après avoir lu ce fil et effectué quelques heures ou quelques recherches, j'ai trouvé le gestionnaire de prop underlineColorAndroid dans le fichier ReactTextInputManager.java :

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="43">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

Le rapport de bogue lié dans le commentaire contient la trace de pile suivante:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

Cela correspond à la trace de pile que nous rencontrons dans notre application. Je ne prétends pas comprendre pleinement le problème sous-jacent, mais il semble probable que la cause du plantage de notre application en production soit due au déclenchement du bogue Drawable.mutate() . Cela se produit lorsque nous essayons de définir le prop underlineColorAndroid sur notre composant TextInput (et invoquons ainsi la méthode ReactTextInputManager.setUnderlineColor ).
Notre application rendait un TextInput avec les accessoires suivants, dont l'un était underlineColorAndroid="transparent" :

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

Comment nous l'avons réparé

Nous devions définir cet accessoire afin de supprimer le soulignement des composants TextInput de notre application. Mais sur la base de nos résultats, son gestionnaire d'accessoires semblait déclencher un bogue Android qui provoquait parfois un crash de l'application.
Heureusement, il existe un autre moyen de supprimer les soulignements des composants TextInput sur Android. Vous pouvez ajouter une ligne au fichier android/app/src/main/res/values/styles.xml :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="66">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="67">@android</strong>:color/transparent</item>
    </style>
</resources>

Notez que j'ai également vu ce qui suit suggéré, mais cela n'a pas supprimé les soulignements pour nous:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="72">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="73">@android</strong>:color/transparent</item>
+   </style>
</resources>

Cela ne résout pas le problème sous-jacent. C'est juste une solution de contournement qui consiste à éviter l'utilisation de la underlineColorAndroid sur les composants TextInput .
Je ne peux pas encore dire avec certitude que cela fonctionne réellement, car je n'ai pas pu reproduire le problème localement. Nous déploierons ce changement dans une mise à jour de notre application dans les semaines à venir. Après cela, nous devrons attendre un moment pour voir si cela se produit plus. Je vais essayer de faire rapport avec nos conclusions.
Bonne chance à tous ceux qui luttent contre ce problème frustrant! J'espère que ça aide.

Je sais reproduire cette situation. Cliquez à nouveau dans le formulaire comme vous l'avez dit, puis cliquez sur l'élément dans la liste plate pour entrer le formulaire. Répétez une dizaine de fois, et un peu plus vite, cette erreur se produira. Vous pouvez reproduire l'erreur selon ce que j'ai dit.

On dirait que ça corrige le problème.

Pour ceux qui se demandent comment le reproduire: nous l'avons reproduit en ajoutant 100 <TextInput ...> s à un <ScrollView ...> . À ce stade, nous avons pu reproduire l'erreur avec un taux de réussite estimé de 75% à 90%. Assez pour essayer des solutions. 50 champs ne suffisaient pas.

La solution de contournement de @Hopding a fonctionné pour nous. La solution alternative de "teinte" proposée (par d'autres) ne fonctionne pas. L'effet secondaire malheureux de la solution de contournement est que le remplissage est supprimé des entrées de texte.

Pareil ici.

Exception fatale: java.lang.NullPointerException: tentative d'invocation de la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
à android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
à android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
à android.view.View.computeOpaqueFlags (View.java:18188)
à android.view.View.setBackgroundDrawable (View.java:23358)
à android.view.View.setBackground (View.java:23251)
sur android.view.View.(Vue.java:5948)
sur android.widget.TextView.(TextView.java:1118)
sur android.widget.EditText.(EditText.java:106)
sur android.widget.EditText.(EditText.java:102)
sur android.widget.EditText.(EditText.java:98)
sur android.widget.EditText.(EditText.java:94)
à com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:89)
à com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:105)
à com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:65)
à com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:47)
à com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:256)
à com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute (UIViewOperationQueue.java:200)
à com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:1109)
à com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:1080)
à com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:29)
à com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreographer.java:166)
à com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame (ChoreographerCompat.java:84)
à android.view.Choreographer $ CallbackRecord.run (Choreographer.java:947)
à android.view.Choreographer.doCallbacks (Choreographer.java:761)
à android.view.Choreographer.doFrame (Choreographer.java:693)
à android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:935)
à android.os.Handler.handleCallback (Handler.java:873)
à android.os.Handler.dispatchMessage (Handler.java:99)
à android.os.Looper.loop (Looper.java:214)
à android.app.ActivityThread.main (ActivityThread.java:7045)
à java.lang.reflect.Method.invoke (Method.java)
à com.android.internal.os.RuntimeInit $ MethodAndArgsCaller.run (RuntimeInit.java:493)
à com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)

une solution de contournement?

Voici un code où l'erreur est reproduite RN 0.59.8

> import React, { Component } from 'react';
> import { StyleSheet, Text, View, TextInput, FlatList, TouchableOpacity } from 'react-native';
> 
> export default class App extends Component {
>   state = { Valor: [] }
>   componentDidMount() {
>     for (i = 0; i < 90000; i++) {
>       var te = { ID: i }
>       this.state.Valor.push(te)
>     }
>   }
> 
>   keyExtractor = (item, index) => item.ID.toString();
>   renderList = () => {
>     return (
>       <FlatList
>         keyExtractor={this.keyExtractor}
>         data={this.state.Valor}
>         renderItem={({ item }) => (
>           <TouchableOpacity
>             activeOpacity={0.5}
>             onPress={() => alert("hola")} >
>             <View style={{ flex: 1 }}>
>               <Text>Muestra</Text>
>               <TextInput
>                 underlineColorAndroid={"transparent"}
>                 placeholder={"Ingrese"}
>                 keyboardType="phone-pad"
>               />
>             </View>
>           </TouchableOpacity>
>         )}
>       >
>       </FlatList>
>     );
>   };
> 
>   render() {
>     return (
>       <View style={styles.container}>
>         {this.renderList()}
>       </View>
>     );
>   }
> }
> 
> const styles = StyleSheet.create({
>   container: {
>     flex: 1,
>     justifyContent: 'flex-start',
>     alignItems: 'flex-start',
>     backgroundColor: '#F5FCFF',
>   },
>   welcome: {
>     fontSize: 20,
>     textAlign: 'center',
>     margin: 10,
>   },
>   instructions: {
>     textAlign: 'center',
>     color: '#333333',
>     marginBottom: 5,
>   }
> });
> 

Vidéo: https://www.youtube.com/watch?v=FJ6YvXrevMQ&feature=youtu.be

Solution plz.

Ce numéro a été ouvert le 11 janvier 2018 et nous sommes en mai 2019 maintenant, pourquoi personne de l'équipe officielle ne s'en occupe-t-il?
FYI, les solutions de contournement ne fonctionnent pas.

Idem ici 0,59,6

Exception fatale: java.lang.NullPointerException: tentative d'invocation de la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
à android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
à android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
à android.view.View.computeOpaqueFlags (View.java:18188)
à android.view.View.setBackgroundDrawable (View.java:23358)
à android.view.View.setBackground (View.java:23251)
sur android.view.View. (View.java:5948)
à android.widget.TextView. (TextView.java:1118)
à android.widget.EditText. (EditText.java:106)
à android.widget.EditText. (EditText.java:102)
à android.widget.EditText. (EditText.java:98)
à android.widget.EditText. (EditText.java:94)
à com.facebook.react.views.textinput.ReactEditText. (ReactEditText.java:89)
à com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:105)
à com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:65)
à com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:47)
à com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:256)
à com.facebook.react.uimanager.UIViewOperationQueue $ CreateViewOperation.execute (UIViewOperationQueue.java:200)
à com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:1109)
à com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.doFrameGuarded (UIViewOperationQueue.java:1080)
à com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:29)
à com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreographer.java:166)
à com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame (ChoreographerCompat.java:84)
à android.view.Choreographer $ CallbackRecord.run (Choreographer.java:947)
à android.view.Choreographer.doCallbacks (Choreographer.java:761)
à android.view.Choreographer.doFrame (Choreographer.java:693)
à android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:935)
à android.os.Handler.handleCallback (Handler.java:873)
à android.os.Handler.dispatchMessage (Handler.java:99)
à android.os.Looper.loop (Looper.java:214)
à android.app.ActivityThread.main (ActivityThread.java:7045)
à java.lang.reflect.Method.invoke (Method.java)
à com.android.internal.os.RuntimeInit $ MethodAndArgsCaller.run (RuntimeInit.java:493)
à com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)

@knspatel Notre solution de contournement était de superposer l'écran avec un modal qui positionnait une zone de saisie de texte sur l'original avec une légère opacité d'arrière-plan pour guérir l'effet de transition. Si la coordonnée y est hors de vue ou inaccessible, la zone de saisie de texte se trouve juste au-dessus du clavier.

Laissez-moi récapituler:
Le point clé est de ne définir aucune valeur sur underlineColorAndroid n'importe où . Mais comme 0.57 underlineColorAndroid est défini par défaut , vous devez donc supprimer manuellement cette ligne via un outil de patch comme
Et si vous voulez toujours rendre le soulignement invisible, vous devez le définir dans une configuration xml .

Et voici quelques informations que j'ai trouvées jusqu'à présent:
Un blog chinois (peut essayer google translate si vous ne pouvez pas lire) a mentionné un problème très similaire à celui-ci. Il a dit que certaines classes dessinables personnalisées sans implémentation getConstantState peuvent provoquer un crash dans certains scénarios.

J'ai trouvé que parfois l'entrée de texte (ReactEditText) était recréée (plus de textinputs plus de possibilités, type de recyclage?), Et il sera de nouveau setBackground , qui va ensuite à https://github.com/aosp-mirror/ platform_frameworks_base / blob / master / graphics / java / android / graphics / drawable / DrawableContainer.java # L922 , où ConstantState est nul.

La seule classe dessinée personnalisée que j'ai trouvée est ReactViewBackgroundDrawable et n'a pas implémenté getConstantState qui retournera null par défaut.
J'ai essayé de le remplacer par une classe vide et cela peut faire une différence (ce crash disparaît tandis que d'autres émergent).

J'espère que cela peut aider quelqu'un à creuser davantage.

J'ai trouvé que les tests manuels étaient très aléatoires, j'ai donc écrit un composant pour tester automatiquement certains des scénarios que les gens ont signalés ci-dessus. Vous trouverez le composant ci-dessous. Il vous suffit de le rendre quelque part pour qu'il fasse son travail.

En faisant cela, j'ai trouvé qu'il vous suffit d'ajouter ce qui suit à l'AppTheme dans styles.xml, comme suggéré par @Hopding
<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

Rien d'autre n'était requis, et il n'y avait _pas besoin_ d'éviter de définir underlineColorAndroid , donc peu importe que React Native le définisse maintenant par défaut.

Le principal inconvénient de ce correctif est que vous devez modifier le style de vos TextInputs pour tenir compte de la perte de remplissage qui en résulte, et vous perdez également le comportement de soulignement réel, ce qui pour nous était un avantage car nous le définissons toujours "transparent" pour être cohérent avec iOS. Si vous en avez besoin, vous pouvez créer un composant wrapper qui regarde onFocus et onBlur et créer votre propre soulignement.

Ma version de React Native est 0.57.3

Voici quelques autres choses que j'ai trouvées en utilisant mon composant de test:

1. Je ne pouvais pas du tout provoquer le crash sur ma tablette Android à faible spécification. C'était assez facile à reproduire cependant sur mon téléphone Samsung S6 Edge sous Android 7. Je suppose qu'il y a une condition de concurrence qui nécessite un appareil plus rapide pour la provoquer.
2. Faire défiler les entrées de texte ne faisait aucune différence et je pouvais facilement reproduire le problème sans même utiliser un ScrollView.
3. La saisie de texte n'était pas nécessaire. Le simple fait de changer la mise au point était suffisant pour provoquer le crash.
4. La couleur sur laquelle vous définissez le soulignement n'a fait aucune différence, même undefined causé le plantage, mais vous vous attendez peut-être à ce que puisque RN le règle par défaut sur "transparent"
5. Avoir un bon nombre de TextInputs affichés à la fois a fait une différence, le crash se produisant plus rapidement avec 100, que seulement 10 à l'écran.
6. Je n'ai pas pu reproduire le plantage avec displayForMs: 0 suggérant qu'il ne se produit que lorsque les TextInputs n'ont été créés que récemment.

Si vous ne voulez pas traîner pendant les tests, vous pouvez capturer la sortie de adb logcat et rechercher les messages de console produits par le composant et le rapport de plantage.

Voici mon composant de test si vous souhaitez l'utiliser. Les paramètres de test sont définis pour provoquer un crash généralement en moins de 30 secondes pour moi.

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

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

// These are the test parameters
const params = {
  underlineColors: ["red", undefined, "transparent", "rgba(0, 0, 0, 0)"],  // The colors to test
  numberOfInputs: 100, // How many TextInput to render at a time
  focusIntervalMs: 200, // How often to change focus between them
  displayForMs: 3000, // How long to display them (set to 0 for indefinite)
  delayDisplayForMs: 10, // How long to delay between displays
  withScrollView: false // Whether to use a ScrollView
};

const testText = index =>
  `Testing underlineColor = ${params.underlineColors[index] || "undefined"}`;

class AndroidTextInputTest extends React.Component{
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log(`Testing with params = `, JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
      if (this.focussedInputIndex >= this.textInputRefs.length) {
        this.focussedInputIndex = 0;
      }
      const textInputRef = this.textInputRefs[this.focussedInputIndex];
      const textInput = this.refs[textInputRef];
      if (textInput) {
        this.focussedInputIndex++;
        this.refs[textInputRef].focus();
      }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
      console.log(testText(this.state.underlineColorIndex));
      this.setState({ showInputs: true });
      if (params.displayForMs) {
        setTimeout(this._unshowInputs, params.displayForMs);
      }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
      let next = this.state.underlineColorIndex + 1;
      if (next === params.underlineColors.length) {
        next = 0;
      }
      this.setState({
        underlineColorIndex: next,
        showInputs: false,
        startKey: this.state.startKey + params.numberOfInputs
      });
      setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

    if (this.state.showInputs) {
      for (let i = 0; i < params.numberOfInputs; i++) {
        const key = this.state.startKey + i + "";
        refs.push(key);
        textInputs.push(
          <TextInput
            ref={key}
            key={key}
            placeholder={key}
            underlineColorAndroid={underlineColor}
            style={styles.textInput}
          />
        );
      }
      if (!this.textInputRefs) {
        this.textInputRefs = refs;
      }
    }

    return (
      <View style={styles.mainView}>
        <Text>{testText(underlineColorIndex)}</Text>
        {params.withScrollView ? (
          <React.Fragment>
            <Text>With ScrollView</Text>
            <ScrollView>{textInputs}</ScrollView>
          </React.Fragment>
        ) : (
          <React.Fragment>{textInputs}</React.Fragment>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center"
  },
  textInput: {
    backgroundColor: "white",
    margin: 5,
    width: 300
  }
});

export default AndroidTextInputTest;

Pour tous ceux qui recherchent une solution, je peux également confirmer ce réglage@android : couleur / transparent dans styles.xml a corrigé le problème.

FYI: Nous utilisons React-Native Paper et leur composant TextInput et nous avons pu définir en toute sécurité <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> sans aucun effet sur RN-Paper TextInput et n'avons plus connu le crash depuis.

Voir en production sur 0.59.9 .

Crashlytics:

Samsung Galaxy S7 Edge
Android 8.0

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures + 875(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity + 1158(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity + 433(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity + 258(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags + 16809(View.java:16809)
       at android.view.View.setBackgroundDrawable + 21728(View.java:21728)
       at android.view.View.setBackground + 21621(View.java:21621)
       at android.view.View.<init> + 5553(View.java:5553)
       at android.widget.TextView.<init> + 1135(TextView.java:1135)
       at android.widget.EditText.<init> + 107(EditText.java:107)
       at android.widget.EditText.<init> + 103(EditText.java:103)
       at android.widget.EditText.<init> + 99(EditText.java:99)
       at android.widget.EditText.<init> + 95(EditText.java:95)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext + 76(ReactTextInputShadowNode.java:76)
       at com.facebook.react.uimanager.UIImplementation.createView + 294(UIImplementation.java:294)
       at com.facebook.react.uimanager.UIManagerModule.createView + 462(UIManagerModule.java:462)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke + 372(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke + 158(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback + 789(Handler.java:789)
       at android.os.Handler.dispatchMessage + 98(Handler.java:98)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage + 29(MessageQueueThreadHandler.java:29)
       at android.os.Looper.loop + 164(Looper.java:164)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run + 232(MessageQueueThreadImpl.java:232)
       at java.lang.Thread.run + 764(Thread.java:764)

Changer cela:

state = {
  data: []
}

pour ça:

constructor(props) {
  super(props);
  this.state = {
    data: []
  };
}

a corrigé le problème pour moi. Vous ne savez pas pourquoi, car définir l'état en tant que variable de classe devrait être correct? N'importe qui?

@wbodron Non, c'est sans rapport. Le crash est aléatoire, vous pouvez donc penser qu'il est parti, mais en réalité pas. Et le point clé que j'ai expliqué ci-dessus https://github.com/facebook/react-native/issues/17530#issuecomment -500865260

cc @cpojer @shergin @sahrens

Supprimer le dossier de construction d'Android.
Votre_Projet> android> application> build

Après l'avoir supprimé, exécutez react-native run-android

devrait bien fonctionner.
A travaillé pour moi: D

J'ai déjà essayé ceci et en supprimant underlineColorAndroid mais toujours avec le problème. Quelqu'un avec une autre solution de contournement?

Ce problème a également fait planter notre application en production. C'est un vilain bogue, car il est vraiment difficile à reproduire. Nous avons trouvé une solution prometteuse pour notre application, et j'aimerais partager nos résultats ici pour, espérons-le, gagner du temps et de la frustration aux autres.

Spécifications et versions

Ce bogue a provoqué le crash de notre application sur les appareils Samsung, Google et LG Android. Nous avons reçu des rapports d'erreur des versions Android suivantes:

• 8.0.0
• 8.1.0
• 7.1.1

Notre application fonctionne:

• react-native : 0,53,0
• react : 16.2.0

Qu'est-ce qui cause le crash

Comme d'autres l'ont noté dans ce fil, le problème semble être déclenché par le rendu d'une combinaison de composants TextInput , FlatList et ScrollView . Dans notre cas, nous avons un écran contenant un seul TextInput rendu au-dessus d'un FlatList . Lorsque l'un des éléments du FlatList est touché, l'application accède à un nouvel écran contenant un formulaire. Le composant racine de ce formulaire est un ScrollView qui contient un certain nombre de composants TextInput (ainsi que des boutons et d'autres composants personnalisés). Notre application se bloque lorsque l'utilisateur appuie sur l'un de ces éléments FlatList (notez que cela n'arrive pas toutes les fois).
Reproduire ce problème est difficile. En fait, nous n'avons pas pu le faire. Mais nous savons que le plantage se produit à ce stade du flux de travail en regardant nos enregistrements de session Appsee.
Parce que nous ne pouvons pas reproduire le problème, nous avons dû nous fier aux journaux de plantage d'Appsee pour le déboguer. J'ai copié la trace de pile des rapports de plantage ci-dessous (et omis certaines sections bruyantes). C'est plus ou moins identique aux traces de pile publiées dans ce fil par d'autres:

0   java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
1   at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:875)
2   at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1158)
3   at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:433)
4   at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:258)
5   at android.view.View.computeOpaqueFlags(View.java:16900)
6   at android.view.View.setBackgroundDrawable(View.java:21824)
7   at android.view.View.setBackground(View.java:21717)
8   at android.view.View.<init>(View.java:5577)
9   at android.widget.TextView.<init>(TextView.java:1144)
...
13  at android.widget.EditText.<init>(EditText.java:96)
14  at com.facebook.react.views.textinput.ReactEditText.<init>(ReactEditText.java:91)
15  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:91)
16  at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance(ReactTextInputManager.java:61)
...
35  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

Source du problème

Après avoir lu ce fil et effectué quelques heures ou quelques recherches, j'ai trouvé le gestionnaire de prop underlineColorAndroid dans le fichier ReactTextInputManager.java :

@ReactProp(name = "underlineColorAndroid", customType = "Color")
public void setUnderlineColor(ReactEditText view, <strong i="44">@Nullable</strong> Integer underlineColor) {
  // Drawable.mutate() can sometimes crash due to an AOSP bug:
  // See https://code.google.com/p/android/issues/detail?id=191754 for more info
  Drawable background = view.getBackground();
  Drawable drawableToMutate = background.getConstantState() != null ?
    background.mutate() :
    background;

  if (underlineColor == null) {
    drawableToMutate.clearColorFilter();
  } else {
    drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
  }
}

Le rapport de bogue lié dans le commentaire contient la trace de pile suivante:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable()' on a null object reference
    at android.graphics.drawable.LayerDrawable$ChildDrawable.<init>(LayerDrawable.java:1723)
    at android.graphics.drawable.LayerDrawable$LayerState.<init>(LayerDrawable.java:1792)
    at android.graphics.drawable.LayerDrawable.createConstantState(LayerDrawable.java:152)
    at android.graphics.drawable.LayerDrawable.mutate(LayerDrawable.java:1652)

Cela correspond à la trace de pile que nous rencontrons dans notre application. Je ne prétends pas comprendre pleinement le problème sous-jacent, mais il semble probable que la cause du plantage de notre application en production soit due au déclenchement du bogue Drawable.mutate() . Cela se produit lorsque nous essayons de définir le prop underlineColorAndroid sur notre composant TextInput (et invoquons ainsi la méthode ReactTextInputManager.setUnderlineColor ).
Notre application rendait un TextInput avec les accessoires suivants, dont l'un était underlineColorAndroid="transparent" :

<TextInput
  ref={this.handleRef}
  value={this.props.value}
  autoCorrect={false}
  autoCapitalize="none"
  underlineColorAndroid="transparent"
  onSubmitEditing={this.handleSubmit}
  onChangeText={this.props.onChangeText}
  onFocus={this.handleFocused}
  onBlur={this.handleBlur}
  clearButtonMode="always"
/>

Comment nous l'avons réparé

Nous devions définir cet accessoire afin de supprimer le soulignement des composants TextInput de notre application. Mais sur la base de nos résultats, son gestionnaire d'accessoires semblait déclencher un bogue Android qui provoquait parfois un crash de l'application.
Heureusement, il existe un autre moyen de supprimer les soulignements des composants TextInput sur Android. Vous pouvez ajouter une ligne au fichier android/app/src/main/res/values/styles.xml :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="67">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground"><strong i="68">@android</strong>:color/transparent</item>
    </style>
</resources>

Notez que j'ai également vu ce qui suit suggéré, mais cela n'a pas supprimé les soulignements pour nous:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation"><strong i="73">@android</strong>:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

+   <!-- This did *not* work for us... -->
+   <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
+     <item name="android:background"><strong i="74">@android</strong>:color/transparent</item>
+   </style>
</resources>

Cela ne résout pas le problème sous-jacent. C'est juste une solution de contournement qui consiste à éviter l'utilisation de la underlineColorAndroid sur les composants TextInput .
Je ne peux pas encore dire avec certitude que cela fonctionne réellement, car je n'ai pas pu reproduire le problème localement. Nous déploierons ce changement dans une mise à jour de notre application dans les semaines à venir. Après cela, nous devrons attendre un moment pour voir si cela se produit plus. Je vais essayer de faire rapport avec nos conclusions.
Bonne chance à tous ceux qui luttent contre ce problème frustrant! J'espère que ça aide.

Je sais reproduire cette situation. Cliquez à nouveau dans le formulaire comme vous l'avez dit, puis cliquez sur l'élément dans la liste plate pour entrer le formulaire. Répétez une dizaine de fois, et un peu plus vite, cette erreur se produira. Vous pouvez reproduire l'erreur selon ce que j'ai dit.

Que puis-je faire? Im face à ce problème aussi!

pareil ici. Faire face à la production

@ jake41 J'ai essayé de le redémarrer et cela a fonctionné, avez-vous essayé de le redémarrer? Je suis confronté à ce problème après avoir mis à jour mon expo cli, je pense que c'est le problème de version.

@agrass Je vais essayer votre méthode. Cela semble prometteur.
Mais, mon application plante très rarement avec cette cause. Ce problème fait-il planter l'application à chaque fois? ou parfois?
La DAU de notre application est d'environ 8k, et cela se produit environ une fois par jour. Donc, c'est négligeable, mais j'espère guérir le crash.

Quelqu'un a-t-il trouvé un correctif de travail approprié? Cela se produit très rarement et uniquement dans le composant où se trouve un champ de texte.

Le problème persiste avec React Native 0.60

Réagir Natif: 0,59,8
Android: 8.1.0
Appareil: Redmi 5 Plus

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures + 875(DrawableContainer.java:875)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity + 1158(DrawableContainer.java:1158)
       at android.graphics.drawable.DrawableContainer.getOpacity + 433(DrawableContainer.java:433)
       at android.graphics.drawable.InsetDrawable.getOpacity + 258(InsetDrawable.java:258)
       at android.view.View.computeOpaqueFlags + 15726(View.java:15726)
       at android.view.View.setBackgroundDrawable + 20536(View.java:20536)
       at android.view.View.setBackground + 20429(View.java:20429)
       at android.view.View.(View.java:5256)
       at android.widget.TextView.(TextView.java:826)
       at android.widget.EditText.(EditText.java:88)
       at android.widget.EditText.(EditText.java:84)
       at android.widget.EditText.(EditText.java:80)
       at android.widget.EditText.(EditText.java:76)
       at com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:89)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance + 105(ReactTextInputManager.java:105)
       at com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance + 65(ReactTextInputManager.java:65)
       at com.facebook.react.uimanager.ViewManager.createView + 47(ViewManager.java:47)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.createView + 256(NativeViewHierarchyManager.java:256)
       at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute + 200(UIViewOperationQueue.java:200)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations + 1109(UIViewOperationQueue.java:1109)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded + 1080(UIViewOperationQueue.java:1080)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame + 29(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame + 166(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame + 84(ChoreographerCompat.java:84)
       at android.view.Choreographer$CallbackRecord.run + 1027(Choreographer.java:1027)
       at android.view.Choreographer.doCallbacks + 841(Choreographer.java:841)
       at android.view.Choreographer.doFrame + 769(Choreographer.java:769)
       at android.view.Choreographer$FrameDisplayEventReceiver.run + 1015(Choreographer.java:1015)
       at android.os.Handler.handleCallback + 794(Handler.java:794)
       at android.os.Handler.dispatchMessage + 99(Handler.java:99)
       at android.os.Looper.loop + 176(Looper.java:176)
       at android.app.ActivityThread.main + 6651(ActivityThread.java:6651)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run + 547(RuntimeInit.java:547)
       at com.android.internal.os.ZygoteInit.main + 824(ZygoteInit.java:824)

J'ai le même problème ici
RN: 0,59,9
Appareil: Pixel 2
Android: 9.0

S'il s'agit d'un écran de formulaire, vous attendez peut-être de définir des valeurs dans les entrées, cela a fonctionné pour moi.

J'ai trouvé une solution. Je ne sais pas s'il s'agit d'une solution à long terme, mais cela vous permettra de travailler jusqu'à ce qu'une solution permanente soit trouvée.
Effacez simplement votre argent: npm start - --reset-cache
Et redémarrez le projet.
Cela a fonctionné pour moi.
FYI, je n'ai pas encore éjecté mon projet.
Mes dépendances:

"devDependencies": {
"@ types / react": "^ 16.8.23",
"@ types / react-native": "^ 0.57.65",
"babel-preset-expo": "^ 6.0.0",
"dactylographié": "^ 3.4.5"
},

Utilisateur d'ExpoKit (SDK 34) pesant ici. J'ai eu ce problème sur toutes les versions d'ExpoKit, y compris la dernière. J'ai essayé d'appliquer ces correctifs, avec quelques modifications, et, jusqu'à présent, tout va bien.

Le changement de style a fini par être un peu différent de celui de @Hopding - essentiellement le contraire a fonctionné pour moi. J'ai changé le style ExponentEditText dans styles.xml comme tel:

<style name="ExponentEditText" parent="<strong i="9">@android</strong>:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">#000000</item>
    <item name="android:background"><strong i="10">@android</strong>:color/transparent</item>
  </style>

car le changement de android:editTextBackground n'a pas fonctionné (peut-être que cela a quelque chose à voir avec ce style ExponentEditText déjà présent). Fait intéressant, je n'ai pas eu à patcher le prop par défaut en définissant underlineColorAndroid sur transparent . J'ai eu le problème de rembourrage; cependant, j'ai eu l'impression que c'était en fait une amélioration, car je n'avais plus à gérer le remplissage intrinsèque du TextInput lorsqu'il est vide et j'essaie de positionner d'autres composants à proximité.

Auparavant, j'étais en mesure de déclencher l'erreur de manière fiable grâce à un bouton de diagnostic que j'avais ajouté à notre application qui ajoutait 500 TextInputs à une SectionList. Je dirais que cela déclenche 60% du temps au premier essai, 90% au deuxième et 100% au troisième selon mon expérience. Je l'ai essayé au moins 10 fois sans erreur après avoir effectué le changement.

J'ai le même problème ici
RN: 0,55,4
Appareil: MI 8 Lite
Android: 8.1.0

java.lang.NullPointerException: Tentative d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
à android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
à android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)
à android.view.View.computeOpaqueFlags (View.java:15748)
à android.view.View.setBackgroundDrawable (View.java:20558)
à android.view.View.setBackground (View.java:20451)
sur android.view.View.(Vue.java:5255)
sur android.widget.TextView.(TextView.java:826)
sur android.widget.EditText.(EditText.java:88)
sur android.widget.EditText.(EditText.java:84)
sur android.widget.EditText.(EditText.java:80)
sur android.widget.EditText.(EditText.java:76)
à com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext (ReactTextInputShadowNode.java:80)
à com.facebook.react.uimanager.UIImplementation.createView (UIImplementation.java:282)
à com.facebook.react.uimanager.UIManagerModule.createView (UIManagerModule.java:366)
à java.lang.reflect.Method.invoke (Method.java)
à com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
à com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:160)
à com.facebook.react.bridge.queue.NativeRunnable.run (NativeRunnable.java)
à android.os.Handler.handleCallback (Handler.java:790)
à android.os.Handler.dispatchMessage (Handler.java:99)
à com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:29)
à android.os.Looper.loop (Looper.java:164)
à com.facebook.react.bridge.queue.MessageQueueThreadImpl $ 3.run (MessageQueueThreadImpl.java:192)
à java.lang.Thread.run (Thread.java:764)

Exception fatale: java.lang.NullPointerException
Tentative d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle

vivo 1804
Version Android: 9

Ça arrive pour moi. React Native version 0.60.4 fonctionnant sous Android 9. Très intermittent et rare, cependant.

Ça arrive pour moi. React Native version 0.60.4 fonctionnant sous Android 9. Très intermittent et rare, cependant.

Pareil pour moi aussi ...

Idem ici, React Native 0.60.4 sur Android 9

J'utilise React Native avec Expo et j'ai eu ce problème ce matin.
J'ai d'abord essayé de mettre cette ligne dans mon AppTheme styles.xml comme ceci

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:editTextBackground"><strong i="9">@android</strong>:color/transparent</item>
</style>

Cela n'a pas fonctionné, alors j'ai cherché un autre endroit, et je l'ai finalement mis là:

<style name="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"
       parent="@style/Theme.ReactNative.AppCompat.Light">
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
  <item name="android:editTextBackground"><strong i="16">@android</strong>:color/transparent</item>
</style>

Semble fonctionner parfaitement bien maintenant

Ce crash est tellement aléatoire. Même trace de pile, v0.60.4. Même erreur. Y a-t-il une solution? Quelqu'un a suggéré de supprimer le dossier de construction mais je ne vois pas ce que cela a à voir avec un pointeur nul? La solution semble toujours être une reconstruction / réexécution

@armagedan @jacobbeasley et al le problème _is_ est intermittent, vous voudrez peut-être essayer le composant intégré fourni dans mon commentaire ci-dessus pour le reproduire. Ce commentaire fournit également une analyse du problème et une solution qui fonctionne pour moi et pour beaucoup d'autres.

@wxjer j'essaie d'effacer les données de l'application sur le réglage et cela fonctionne! pouvez-vous l'essayer

Idem ici, React Native 0.60.4 sur Android 9 et Android 8

Toute solution?

Au cas où quelqu'un aurait un bon œil pour le débogage Android, voici notre erreur de sentinelle qui vient d'être signalée.

natif de réaction 0,60,4

https://sentry.io/share/issue/e0c581e2e99a4ca48199647b8bd3f497/

Idem ici, React Native 0.60.5 sur Android 9

salut! Nous avons résolu ce problème en supprimant la propriété underlineColorAndroid de notre TextInput et en ajoutant cette ligne à styles.xml à l'intérieur (android / src / main / res / values ​​/ styles.xml)

<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item>

Est-ce un rapport de bogue?

Oui

Avez-vous lu les directives de contribution ?

oui, je suis désolé de ne pas pouvoir offrir plus d'informations sur cette exception à l'exception de cette trace de pile car le rapport de plantage a été collecté à partir de google analytics, je n'ai aucune idée de réapparaître cette exception.

Environnement

Environnement:
Système d'exploitation: macOS Sierra 10.12.6
Nœud: 8.4.0
Fil: 0.27.5
npm: 5.4.0
Studio Android: 3.0

Paquets: (voulu => installé)
natif de réaction: 0,51,0 => 0,51,0
réagir: 16.0.0-alpha.12 => 16.0.0-alpha.12

Plateforme cible: Android (7.1.1)
mobile: MIX 2
Android: 7.1.1
java.lang.NullPointerException:
tentez d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle à
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild (DrawableContainer.java:888) à
android.graphics.drawable.DrawableContainer.selectDrawable (DrawableContainer.java:466) à
android.graphics.drawable.StateListDrawable.onStateChange (StateListDrawable.java:104) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.graphics.drawable.DrawableWrapper.onStateChange (DrawableWrapper.java:331) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.graphics.drawable.LayerDrawable.onStateChange (LayerDrawable.java:1488) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.view.View.drawableStateChanged (View.java:18002) à
android.widget.TextView.drawableStateChanged (TextView.java:4097) à
android.view.View.refreshDrawableState (View.java:18071) sur
android.view.View.setPressed (View.java:8543) à
android.view.View.setPressed (View.java:8521) à
android.view.View.onTouchEvent (View.java:11218) sur
android.widget.TextView.onTouchEvent (TextView.java:8467) à
com.facebook.react.views.textinput.ReactEditText.onTouchEvent (ReactEditText.java:150)

React-native 0,60,4 moi aussi

A commencé à rencontrer ce crash récemment, RN 0.60.5, principalement sur Android 8/9 (peut-être 10 aussi, n'a pas encore testé cela de manière approfondie).

https://github.com/facebook/react-native/issues/17530#issuecomment -504044357 semble faire l'affaire pour moi. En règle générale, le crash se présenterait dans les ~ 5 premières itérations que le composant de test subit. Après avoir ajouté cette ligne, il a fonctionné pendant environ 200 itérations sans crash avant de l'arrêter.

edit: En utilisant le composant de test, je suis également en mesure de reproduire cela de manière fiable sur Android 6, même si encore une fois, le correctif suggéré semble résoudre le problème.

Idem ici sur RN 0.61

Salut les gars, la solution

Ce problème existe toujours et il a cassé mon application - tout fonctionnait bien, j'ai ajouté un appel de récupération et maintenant, même lorsque je le commente, je ne peux pas relancer l'application: pleurer: j'utilise Expo btw

EDIT: J'ai résolu mon problème pour expo en réinstallant l'application expo sur mon appareil

Ran dans cette erreur également (RN: 0.61.1, Android 10 api 29). «npm start --reset-cache» semble être corrigé.

@johnbowdenatfacet, vous souhaiterez peut-être essayer le composant de test mon commentaire ci-dessus pour confirmer le correctif.

Même problème.

React-Native 0.59.10
Android

java.lang.NullPointerException: Tentative d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer.java:875)
à android.graphics.drawable.DrawableContainer $ DrawableContainerState.getOpacity (DrawableContainer.java:1158)
à android.graphics.drawable.DrawableContainer.getOpacity (DrawableContainer.java:433)
à android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258)

Même problème.

salut! Nous avons résolu ce problème en supprimant la propriété underlineColorAndroid de notre TextInput et en ajoutant cette ligne à styles.xml à l'intérieur (android / src / main / res / values ​​/ styles.xml)

<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

J'ai résolu mon problème, merci beaucoup.

Je viens de courir (react-native run-android), cela a résolu le problème avec moi

Même problème sur 0.61.3

Je suis toujours confronté au problème. Certains utilisateurs signalent des plantages d'applications Android, mais cela se produit de manière si aléatoire que je ne peux pas me reproduire.

+1, ça m'est arrivé aussi

@pedrosimao, vous souhaiterez peut-être essayer le composant de test mon commentaire ci-dessus pour reproduire de manière fiable l'erreur. Ce commentaire indique également une solution au problème.

J'ai réduit le problème en entrée pour moi qui est importé de la base native.

Mis à jour:
J'ai redémarré mon PC et mon téléphone, puis j'ai recommencé, cela a fonctionné comme du charme :)

J'avais ça aussi. J'ai résolu le problème en relançant expo via expo r -c

Signaler le même problème pour RN 0.59.10

J'ai trouvé que les tests manuels étaient très aléatoires, j'ai donc écrit un composant pour tester automatiquement certains des scénarios que les gens ont signalés ci-dessus. Vous trouverez le composant ci-dessous. Il vous suffit de le rendre quelque part pour qu'il fasse son travail.

En faisant cela, j'ai trouvé qu'il vous suffit d'ajouter ce qui suit à l'AppTheme dans styles.xml, comme suggéré par @Hopding
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

Rien d'autre n'était requis, et il n'y avait _pas besoin_ d'éviter de définir underlineColorAndroid , donc peu importe que React Native le définisse maintenant par défaut.

Le principal inconvénient de ce correctif est que vous devez modifier le style de vos TextInputs pour tenir compte de la perte de remplissage qui en résulte, et vous perdez également le comportement de soulignement réel, ce qui pour nous était un avantage car nous le définissons toujours "transparent" pour être cohérent avec iOS. Si vous en avez besoin, vous pouvez créer un composant wrapper qui regarde onFocus et onBlur et créer votre propre soulignement.

Ma version de React Native est 0.57.3

Voici quelques autres choses que j'ai trouvées en utilisant mon composant de test:

1. Je ne pouvais pas du tout provoquer le crash sur ma tablette Android à faible spécification. C'était assez facile à reproduire cependant sur mon téléphone Samsung S6 Edge sous Android 7. Je suppose qu'il y a une condition de concurrence qui nécessite un appareil plus rapide pour la provoquer.
2. Faire défiler les entrées de texte ne faisait aucune différence et je pouvais facilement reproduire le problème sans même utiliser un ScrollView.
3. La saisie de texte n'était pas nécessaire. Le simple fait de changer la mise au point était suffisant pour provoquer le crash.
4. La couleur sur laquelle vous définissez le soulignement n'a fait aucune différence, même undefined causé le plantage, mais vous vous attendez peut-être à ce que puisque RN le règle par défaut sur "transparent"
5. Avoir un bon nombre de TextInputs affichés à la fois a fait une différence, le crash se produisant plus rapidement avec 100, que seulement 10 à l'écran.
6. Je n'ai pas pu reproduire le plantage avec displayForMs: 0 suggérant qu'il ne se produit que lorsque les TextInputs n'ont été créés que récemment.

Si vous ne voulez pas traîner pendant les tests, vous pouvez capturer la sortie de adb logcat et rechercher les messages de console produits par le composant et le rapport de plantage.

Voici mon composant de test si vous souhaitez l'utiliser. Les paramètres de test sont définis pour provoquer un crash généralement en moins de 30 secondes pour moi.

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

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

// These are the test parameters
const params = {
  underlineColors: ["red", undefined, "transparent", "rgba(0, 0, 0, 0)"],  // The colors to test
  numberOfInputs: 100, // How many TextInput to render at a time
  focusIntervalMs: 200, // How often to change focus between them
  displayForMs: 3000, // How long to display them (set to 0 for indefinite)
  delayDisplayForMs: 10, // How long to delay between displays
  withScrollView: false // Whether to use a ScrollView
};

const testText = index =>
  `Testing underlineColor = ${params.underlineColors[index] || "undefined"}`;

class AndroidTextInputTest extends React.Component{
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log(`Testing with params = `, JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
      if (this.focussedInputIndex >= this.textInputRefs.length) {
        this.focussedInputIndex = 0;
      }
      const textInputRef = this.textInputRefs[this.focussedInputIndex];
      const textInput = this.refs[textInputRef];
      if (textInput) {
        this.focussedInputIndex++;
        this.refs[textInputRef].focus();
      }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
      console.log(testText(this.state.underlineColorIndex));
      this.setState({ showInputs: true });
      if (params.displayForMs) {
        setTimeout(this._unshowInputs, params.displayForMs);
      }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
      let next = this.state.underlineColorIndex + 1;
      if (next === params.underlineColors.length) {
        next = 0;
      }
      this.setState({
        underlineColorIndex: next,
        showInputs: false,
        startKey: this.state.startKey + params.numberOfInputs
      });
      setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

    if (this.state.showInputs) {
      for (let i = 0; i < params.numberOfInputs; i++) {
        const key = this.state.startKey + i + "";
        refs.push(key);
        textInputs.push(
          <TextInput
            ref={key}
            key={key}
            placeholder={key}
            underlineColorAndroid={underlineColor}
            style={styles.textInput}
          />
        );
      }
      if (!this.textInputRefs) {
        this.textInputRefs = refs;
      }
    }

    return (
      <View style={styles.mainView}>
        <Text>{testText(underlineColorIndex)}</Text>
        {params.withScrollView ? (
          <React.Fragment>
            <Text>With ScrollView</Text>
            <ScrollView>{textInputs}</ScrollView>
          </React.Fragment>
        ) : (
          <React.Fragment>{textInputs}</React.Fragment>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center"
  },
  textInput: {
    backgroundColor: "white",
    margin: 5,
    width: 300
  }
});

export default AndroidTextInputTest;

J'ai essayé mais le clavier n'apparaissait pas sur TextInputs. Des solutions?

Merci d'avoir essayé mon composant @saketkumar.

Je ne me souviens pas si le clavier doit apparaître pour ce test, même si je m'attendrais à ce qu'il apparaisse lorsque la saisie de texte est focalisée. Utilisez-vous un appareil réel ou un émulateur?

Pouvez-vous voir le curseur apparaître dans les entrées de texte au fur et à mesure de leur mise au point, et le composant a-t-il pu reproduire le crash pour vous?

Le même

Se produit en réaction 0,59 sur une variété de téléphones Android.

Se produit de manière aléatoire dans les composants avec TextInput imbriqués dans Flatlist

J'ai essayé de définir underlineColorAndroid={null} atrribute sur TextInput comme indiqué dans ce fil, mais l'erreur persiste

J'ai dû redémarrer mon téléphone et réinstaller EXPO pour qu'il soit réparé. Si cela ne fonctionne pas pour vous, j'essaierais de vider votre cache et de vider le cache de l'application EXPO elle-même.

Je n'ai aucune idée de la façon dont cette ERREUR s'est produite en premier lieu. Je ne pouvais pas le recréer ni trouver comment l'empêcher que cela se reproduise.
Cela a juste commencé et peu importe ce que j'ai changé dans mon code, cela ne l'a pas corrigé. C'est certainement le problème avec EXPO APP car je vois l'ERREUR dans l'APP mais pas dans ma console ou ailleurs.

+1 Une erreur existe toujours dans RN 0.59.9. rapporté par firebase crashlytics

premier à obtenir cette erreur sur RN 0.61?

Obtenir la même erreur dans RN 0.61, la solution de @diegotsi l'a corrigée.
C'est un problème sérieux, comme cela m'est arrivé pour la première fois dans un environnement de pré-production, et je n'aurais jamais pu le retracer sans crashlytics, car un comportement erratique le rend difficile à reproduire.

Est-ce un rapport de bogue?

Oui

Avez-vous lu les directives de contribution ?

oui, je suis désolé de ne pas pouvoir offrir plus d'informations sur cette exception à l'exception de cette trace de pile car le rapport de plantage a été collecté à partir de google analytics, je n'ai aucune idée de réapparaître cette exception.

Environnement

Environnement:
Système d'exploitation: macOS Sierra 10.12.6
Nœud: 8.4.0
Fil: 0.27.5
npm: 5.4.0
Studio Android: 3.0

Paquets: (voulu => installé)
natif de réaction: 0,51,0 => 0,51,0
réagir: 16.0.0-alpha.12 => 16.0.0-alpha.12

Plateforme cible: Android (7.1.1)
mobile: MIX 2
Android: 7.1.1
java.lang.NullPointerException:
tentez d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle à
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild (DrawableContainer.java:888) à
android.graphics.drawable.DrawableContainer.selectDrawable (DrawableContainer.java:466) à
android.graphics.drawable.StateListDrawable.onStateChange (StateListDrawable.java:104) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.graphics.drawable.DrawableWrapper.onStateChange (DrawableWrapper.java:331) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.graphics.drawable.LayerDrawable.onStateChange (LayerDrawable.java:1488) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.view.View.drawableStateChanged (View.java:18002) à
android.widget.TextView.drawableStateChanged (TextView.java:4097) à
android.view.View.refreshDrawableState (View.java:18071) sur
android.view.View.setPressed (View.java:8543) à
android.view.View.setPressed (View.java:8521) à
android.view.View.onTouchEvent (View.java:11218) sur
android.widget.TextView.onTouchEvent (TextView.java:8467) à
com.facebook.react.views.textinput.ReactEditText.onTouchEvent (ReactEditText.java:150)

Est-ce un rapport de bogue?

Oui

Avez-vous lu les directives de contribution ?

oui, je suis désolé de ne pas pouvoir offrir plus d'informations sur cette exception à l'exception de cette trace de pile car le rapport de plantage a été collecté à partir de google analytics, je n'ai aucune idée de réapparaître cette exception.

Environnement

Environnement:
Système d'exploitation: macOS Sierra 10.12.6
Nœud: 8.4.0
Fil: 0.27.5
npm: 5.4.0
Studio Android: 3.0

Paquets: (voulu => installé)
natif de réaction: 0,51,0 => 0,51,0
réagir: 16.0.0-alpha.12 => 16.0.0-alpha.12

Plateforme cible: Android (7.1.1)
mobile: MIX 2
Android: 7.1.1
java.lang.NullPointerException:
tentez d'appeler la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle à
android.graphics.drawable.DrawableContainer $ DrawableContainerState.getChild (DrawableContainer.java:888) à
android.graphics.drawable.DrawableContainer.selectDrawable (DrawableContainer.java:466) à
android.graphics.drawable.StateListDrawable.onStateChange (StateListDrawable.java:104) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.graphics.drawable.DrawableWrapper.onStateChange (DrawableWrapper.java:331) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.graphics.drawable.LayerDrawable.onStateChange (LayerDrawable.java:1488) à
android.graphics.drawable.Drawable.setState (Drawable.java:735) à
android.view.View.drawableStateChanged (View.java:18002) à
android.widget.TextView.drawableStateChanged (TextView.java:4097) à
android.view.View.refreshDrawableState (View.java:18071) sur
android.view.View.setPressed (View.java:8543) à
android.view.View.setPressed (View.java:8521) à
android.view.View.onTouchEvent (View.java:11218) sur
android.widget.TextView.onTouchEvent (TextView.java:8467) à
com.facebook.react.views.textinput.ReactEditText.onTouchEvent (ReactEditText.java:150)

Cela se produit lorsque je change quelque chose de style comme la suppression de justifyContent ou smthng comme celui-ci et que le redémarrage de l'application fonctionne temporairement.

@cinocai , @Sargnec et al, ce fil de commentaires devient si long que je pense que les gens manquent le composant de test que j'ai publié ci-dessus

Plusieurs personnes ci-dessus l'ont utilisé pour reproduire avec succès ce problème et vérifier la solution, qui est également mentionnée dans ce commentaire.

@ glenn-axsy: Un excellent travail avec le composant de test, a été très utile pour mieux comprendre le problème.
Mais j'ai du mal à trouver une solution.

Comme vous l'avez suggéré lors de la configuration de displayForMs: 0 il ne plante pas. Si je ne me trompe pas, ce faisant, les 100 TextInputs ne se démontent jamais (uniquement des mises à jour), pas de nouvelles non plus.

J'ai essayé de définir displayForMs: 3000 lui-même et j'ai apporté 2 autres modifications, qui ont gardé tous les 100 montés (mise à jour uniquement) sur chaque état d'ensemble.

Changements

• clé const = this.state.startKey + i + ""; ---> clé const = ${i} ;
• Contrôle désactivé if (this.state.showInputs) { intérieur du rendu.

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

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

// These are the test parameters
const params = {
    underlineColors: ['red', undefined, 'transparent', 'rgba(0, 0, 0, 0)'], // The colors to test
    numberOfInputs: 100, // How many TextInput to render at a time
    focusIntervalMs: 200, // How often to change focus between them
    displayForMs: 3000, // How long to display them (set to 0 for indefinite)
    delayDisplayForMs: 10, // How long to delay between displays
    withScrollView: false, // Whether to use a ScrollView
};

const testText = index =>
    `Testing underlineColor = ${params.underlineColors[index] || 'undefined'}`;

class AndroidTextInputTest extends React.Component {
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0,
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log('Testing with params = ', JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
        if (this.focussedInputIndex >= this.textInputRefs.length) {
            this.focussedInputIndex = 0;
        }
        const textInputRef = this.textInputRefs[this.focussedInputIndex];
        const textInput = this.refs[textInputRef];
        if (textInput) {
            this.focussedInputIndex++;
            this.refs[textInputRef].focus();
        }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
        console.log(testText(this.state.underlineColorIndex));
        this.setState({ showInputs: true });
        if (params.displayForMs) {
            setTimeout(this._unshowInputs, params.displayForMs);
        }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
        let next = this.state.underlineColorIndex + 1;
        if (next === params.underlineColors.length) {
            next = 0;
        }
        this.setState({
            underlineColorIndex: next,
            showInputs: false,
            startKey: this.state.startKey + params.numberOfInputs,
        });
        setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

// CHANGE 2
    // if (this.state.showInputs) {
    for (let i = 0; i < params.numberOfInputs; i++) {
        const key = `${i}`; // CHANGE 1
        refs.push(key);
        textInputs.push(
            <textinput i="23"/>
        );
    }
    if (!this.textInputRefs) {
        this.textInputRefs = refs;
    }
    // }

    return (
        <view i="24">
            <text i="25">{testText(underlineColorIndex)}</text>
            {params.withScrollView ? (
                <react.fragment i="26">
                    <text i="27">With ScrollView</text>
                    <scrollview i="28">{textInputs}</scrollview>
                </react.fragment>
            ) : (
                <react.fragment i="29">{textInputs}</react.fragment>
            )}
        </view>
    );
  }
}

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        alignItems: 'center',
    },
    textInput: {
        backgroundColor: 'white',
        margin: 5,
        width: 300,
    },
});

export default AndroidTextInputTest;

Les deux changements garantissaient que l'appel de _showInputs et _unshowInputs ne remontera pas les TextInputs, ni n'en montera aucun nouveau (max 100).
Et il ne plante pas comme prévu.

Enfin, assurez-vous que c'est bien le remontage (un grand nombre de TextInputs) qui cause le problème. J'ai essayé de le reproduire dans l'application sur laquelle je travaille, dans laquelle le crash a été signalé.

Dans l'application, il y a 2 écrans, l'un avec 2 TextInputs et l'autre avec 4, j'ai continué à naviguer dans les deux sens, ce qui bien sûr remonte tout le contenu de l'écran, et finalement, après un certain temps, j'ai pu obtenir le crash.

Avec cela, je pourrais en déduire que ne pas laisser TextInput démonter n'est pas une solution viable. Mais toujours aucune idée de ce qui cause exactement cela!

REMARQUE

• Je ne pense pas que cela soit lié à la propriété underlineColorAndroid , car j'ai essayé de le remplacer par <item name="android:editTextBackground"><strong i="18">@android</strong>:color/transparent</item> , et aucune différence. [Modifié: il résout le problème pour le moment]
• J'ai également pu avoir un crash sans utiliser un ScrollView .
• Et se concentrer sur les TextInput n'était pas non plus nécessaire pour obtenir un crash, le simple remontage de ces 100 TextInputs entraînait un crash.

Merci!

@rimzici Oui, c'est vrai. Le crash est lié au remontage / instanciation d'un edittext parfois les dessinables d'arrière-plan sont nuls. Mais curieusement, lorsque vous définissez <item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> cela ne se produira pas. Il semble que les drawables ont été recyclés après le clonage et lorsqu'ils sont définis comme arrière-plan, ils peuvent avoir une valeur par défaut?

Merci @rimzici.

Il est décevant d'entendre que le simple réglage de <item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> ne l'a pas résolu pour vous. Au moins, vous avez maintenant un moyen de reproduire facilement l'erreur et pouvez essayer d'autres choses.

Veuillez poster toute autre observation que vous pourriez avoir.

Merci @sunnylqm et @ glenn-axsy! Vous avez raison, définir <item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item> corrige effectivement.

J'ai oublié que j'avais un thème de démarrage défini sur mon activité principale, pour couvrir l'écran blanc pendant le chargement de JS.

Maintenant, je peux confirmer que le travail autour est efficace pour éviter les plantages.

Mettra à jour avec plus d'informations.

react-native 0.61.5 <- est là aussi!

react-native 0.62.0.rc-1 <- est là aussi!

Même erreur sur [email protected]

Frapper de nombreuses occurrences de la même erreur capturée par Sentry: https://sentry.io/share/issue/ac1e7c55f1594b118f0faaf8d11de5c4/

Sur RN 0.59.9

Même erreur sur RN 0.55.4

Même problème sur RN 2.0.1

ne définissez pas les accessoires 'underlineColorAndroid' sur un TextInput et supprimez tout l'arrière-plan d'entrée de texte par des styles natifs.

goto android \ app \ src \ main \ res \ values ​​\ styles.xml

changez cela comme ci-dessous:

Idem sur RN 0.61.5

J'ai trouvé que les tests manuels étaient très aléatoires, j'ai donc écrit un composant pour tester automatiquement certains des scénarios que les gens ont signalés ci-dessus. Vous trouverez le composant ci-dessous. Il vous suffit de le rendre quelque part pour qu'il fasse son travail.

En faisant cela, j'ai trouvé qu'il vous suffit d'ajouter ce qui suit à l'AppTheme dans styles.xml, comme suggéré par @Hopding
<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

Rien d'autre n'était requis, et il n'y avait _pas besoin_ d'éviter de définir underlineColorAndroid , donc peu importe que React Native le définisse maintenant par défaut.

Le principal inconvénient de ce correctif est que vous devez modifier le style de vos TextInputs pour tenir compte de la perte de remplissage qui en résulte, et vous perdez également le comportement de soulignement réel, ce qui pour nous était un avantage car nous le définissons toujours "transparent" pour être cohérent avec iOS. Si vous en avez besoin, vous pouvez créer un composant wrapper qui regarde onFocus et onBlur et créer votre propre soulignement.

Ma version de React Native est 0.57.3

Voici quelques autres choses que j'ai trouvées en utilisant mon composant de test:

1. Je ne pouvais pas du tout provoquer le crash sur ma tablette Android à faible spécification. C'était assez facile à reproduire cependant sur mon téléphone Samsung S6 Edge sous Android 7. Je suppose qu'il y a une condition de concurrence qui nécessite un appareil plus rapide pour la provoquer.
2. Faire défiler les entrées de texte ne faisait aucune différence et je pouvais facilement reproduire le problème sans même utiliser un ScrollView.
3. La saisie de texte n'était pas nécessaire. Le simple fait de changer la mise au point était suffisant pour provoquer le crash.
4. La couleur sur laquelle vous définissez le soulignement n'a fait aucune différence, même undefined causé le plantage, mais vous vous attendez peut-être à ce que puisque RN le règle par défaut sur "transparent"
5. Avoir un bon nombre de TextInputs affichés à la fois a fait une différence, le crash se produisant plus rapidement avec 100, que seulement 10 à l'écran.
6. Je n'ai pas pu reproduire le plantage avec displayForMs: 0 suggérant qu'il ne se produit que lorsque les TextInputs n'ont été créés que récemment.

Si vous ne voulez pas traîner pendant les tests, vous pouvez capturer la sortie de adb logcat et rechercher les messages de console produits par le composant et le rapport de plantage.

Voici mon composant de test si vous souhaitez l'utiliser. Les paramètres de test sont définis pour provoquer un crash généralement en moins de 30 secondes pour moi.

/**
 * A test component to reproduce the crash reported at
 * https://github.com/facebook/react-native/issues/17530
 */

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

// These are the test parameters
const params = {
  underlineColors: ["red", undefined, "transparent", "rgba(0, 0, 0, 0)"],  // The colors to test
  numberOfInputs: 100, // How many TextInput to render at a time
  focusIntervalMs: 200, // How often to change focus between them
  displayForMs: 3000, // How long to display them (set to 0 for indefinite)
  delayDisplayForMs: 10, // How long to delay between displays
  withScrollView: false // Whether to use a ScrollView
};

const testText = index =>
  `Testing underlineColor = ${params.underlineColors[index] || "undefined"}`;

class AndroidTextInputTest extends React.Component{
  state = {
    underlineColorIndex: 0,
    showInputs: true,
    startKey: 0
  };
  mounted = false;
  focusInterval = undefined;
  textInputRefs = undefined;
  focussedInputIndex = 0;

  componentDidMount() {
    console.log(`Testing with params = `, JSON.stringify(params));
    this.mounted = true;
    setTimeout(this._showInputs, params.delayDisplayForMs);
    setInterval(this._focusAnInput, params.focusIntervalMs);
  }

  componentWillUnmount() {
    clearInterval(this.focusInterval);
    this.mounted = false;
  }

  _focusAnInput = () => {
    if (this.mounted && this.textInputRefs) {
      if (this.focussedInputIndex >= this.textInputRefs.length) {
        this.focussedInputIndex = 0;
      }
      const textInputRef = this.textInputRefs[this.focussedInputIndex];
      const textInput = this.refs[textInputRef];
      if (textInput) {
        this.focussedInputIndex++;
        this.refs[textInputRef].focus();
      }
    }
  };

  _showInputs = () => {
    if (this.mounted) {
      console.log(testText(this.state.underlineColorIndex));
      this.setState({ showInputs: true });
      if (params.displayForMs) {
        setTimeout(this._unshowInputs, params.displayForMs);
      }
    }
  };

  _unshowInputs = () => {
    this.focussedInputIndex = 0;
    this.textInputRefs = undefined;
    if (this.mounted) {
      let next = this.state.underlineColorIndex + 1;
      if (next === params.underlineColors.length) {
        next = 0;
      }
      this.setState({
        underlineColorIndex: next,
        showInputs: false,
        startKey: this.state.startKey + params.numberOfInputs
      });
      setTimeout(this._showInputs, params.delayDisplayForMs);
    }
  };

  render() {
    const textInputs = [];
    const { underlineColorIndex } = this.state;
    const underlineColor = params.underlineColors[underlineColorIndex];

    const refs = [];

    if (this.state.showInputs) {
      for (let i = 0; i < params.numberOfInputs; i++) {
        const key = this.state.startKey + i + "";
        refs.push(key);
        textInputs.push(
          <TextInput
            ref={key}
            key={key}
            placeholder={key}
            underlineColorAndroid={underlineColor}
            style={styles.textInput}
          />
        );
      }
      if (!this.textInputRefs) {
        this.textInputRefs = refs;
      }
    }

    return (
      <View style={styles.mainView}>
        <Text>{testText(underlineColorIndex)}</Text>
        {params.withScrollView ? (
          <React.Fragment>
            <Text>With ScrollView</Text>
            <ScrollView>{textInputs}</ScrollView>
          </React.Fragment>
        ) : (
          <React.Fragment>{textInputs}</React.Fragment>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center"
  },
  textInput: {
    backgroundColor: "white",
    margin: 5,
    width: 300
  }
});

export default AndroidTextInputTest;

Peut confirmer cela corrigé pour moi!

Je suis heureux que mon composant de test et la solution suggérée aient fonctionné pour vous @gagangoku

Pour ceux qui veulent le voir dans son contexte, le lien est ici

Vous auriez peut-être la gentillesse d'ajouter ce lien à votre commentaire.

Le correctif de @ glenn-axsy a fonctionné pour moi (tout comme le composant de test 👏👏👏), mais j'ai rencontré des problèmes en cours de route qui peuvent aider une autre âme perdue:

Mon AppTheme était incorrectement remplacé dans le fichier AndroidManifest.xml , en raison d'une erreur qu'un développeur avait commise lors de l'ajout d'une activité d'écran de démarrage. Une fois que j'ai corrigé et confirmé que l'AppTheme était réellement utilisé (par exemple en changeant la couleur du texte par défaut et en la voyant dans l'application), le correctif a réellement fonctionné.

Merci beaucoup et bonne chance!

Cela m'arrive en utilisant expo. J'exécute cette commande.
sudo expo start -c et le problème a disparu.

@HakimAsa Je suggère d'utiliser le composant de test pour m'assurer qu'il a vraiment disparu.

Leur chose étrange est que le code fonctionne depuis un mois sans ce problème. Mais après quelques rechargements répétitifs sur les changements, j'ai rencontré un problème hier ... Quoi qu'il en soit, je vais essayer votre suggestion @ glenn-axsy

Dans mon cas, cela se passait dans une FlatList lorsque renderItem renvoie <TextInput /> . J'ai donc résolu ce problème en retournant <><TextInput /></>

@MahmoudHemaid le problème est si difficile à reproduire que vous ne l'avez peut-être pas résolu. Plus d'informations ici .

android.graphics.drawable.Drawable $ constantstate, newdrawable sur une erreur de référence nulle obtenue lorsque je clique sur une image, placée dans le coin le plus à droite. Et cette image agissait comme un bouton à bascule. J'utilise RN 0.61.2. Quelqu'un s'il vous plaît m'aider à résoudre le problème. cela ne se produit que dans apk autonome

@ glenn-axsy https://github.com/facebook/react-native/issues/17530#issuecomment -504044357

En faisant cela, j'ai trouvé qu'il vous suffit d'ajouter ce qui suit à l'AppTheme dans styles.xml, comme suggéré par @Hopding

<item name="android:editTextBackground"><strong i="9">@android</strong>:color/transparent</item>

https://github.com/facebook/react-native/pull/27782#issuecomment -575753501

L'exemple le plus simple serait de créer simplement un EditText avec un nul AttributeSet et aucun (0) attribut de style par défaut:

<strong i="18">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

ReactTextInput peut être remplacé par des sous-classes qui voudraient fournir leur propre instance de EditText .

Le constructeur android EditText :

public class EditText extends TextView {
     public EditText(Context context, AttributeSet attrs, int defStyleAttr) {
           this(context, attrs, defStyleAttr, 0);
     }
}

qui appelle le constructeur View ( docs )

Je vais continuer à enquêter. Merci

Hé @ glenn-axsy, je me débat avec ça depuis des heures alors j'espère vraiment que vous pourrez m'aider. J'utilise votre AndroidTextInputTest sur mon téléphone Android. J'exécute React Native avec Typescript si cela compte et je le fais via Expo. Cela signifie que je n'ai aucun élément de type EditText.
React native dans package.json = "react-native": "^ 0.61.4"

J'ai utilisé les paramètres:

const params = {
underlineColors: ["red", undefined, "transparent", "rgba (0, 0, 0, 0)"], // Les couleurs à tester
numberOfInputs: 100, // Combien de TextInput à rendre à la fois
focusIntervalMs: 200, // À quelle fréquence changer de focus entre eux
displayForMs: 3000, // Combien de temps pour les afficher (mis à 0 pour indéfini)
delayDisplayForMs: 10, // Durée du délai entre les affichages
withScrollView: false, // S'il faut utiliser un ScrollView
};

Et ma sortie avant d'obtenir la "Tentative d'appeler la méthode virtuelle" était:

Test avec params = {"underlineColors": ["red", null, "transparent", "rgba (0, 0, 0, 0)"], "numberOfInputs": 100, "focusIntervalMs": 200, "displayForMs": 3000, "delayDisplayForMs": 10, "withScrollView": false}
Les paramètres de calendarVisible sont true et l'état est true
Test underlineColor = rouge
Test underlineColor = undefined
Test underlineColor = transparent
Test underlineColor = rgba (0, 0, 0, 0)
Test underlineColor = rouge
Test underlineColor = undefined
Test underlineColor = transparent

Ma question à partir d'ici est donc la suivante: comment puis-je utiliser ces paramètres et la sortie que j'ai vue avant le crash pour diagnostiquer ce qui ne va pas dans mon application?

Merci pour toute aide.

@ucheNkadiCode C'est un test pour reproduire rapidement le problème, pas une solution. La solution est

<item name="android:editTextBackground"><strong i="7">@android</strong>:color/transparent</item>

@ucheNkadiCode C'est un test pour reproduire rapidement le problème, pas une solution. La solution est

<item name="android:editTextBackground"><strong i="8">@android</strong>:color/transparent</item>

@sunnylqm Je suis un peu confus car j'utilise

J'utilise un TextInput qui ressemble à ceci:

Saisie de texte
ref = {clé}
clé = {clé}
placeholder = {clé}
underlineColorAndroid = {underlineColor}
style = {styles.textInput}

Je vous remercie

@ucheNkadiCode

Mais pour expo, vous devez peut-être éjecter d'abord pour modifier des paramètres comme celui-ci

@ucheNkadiCode

Mais pour expo, vous devez peut-être éjecter d'abord pour modifier des paramètres comme celui-ci

Oui, ce serait à juste titre le problème. Je ne veux pas payer le prix de l'éjection de mon application native react si tôt dans son développement. J'espère trouver une solution qui me permet de rester dans React Native.

Merci de votre aide

@ axsy-dev @ucheNkadiCode

mon commentaire travaillait dans cette direction, pour résoudre ce problème dans une pull request pour éviter les problèmes liés à TextInput prop underlineColorAndroid . ReactNative définit le thème de manière programmatique ... veuillez lire mon commentaire et me revenir avec quelques commentaires car je n'ai pas pu résoudre ce problème et je travaille sur une autre pull request maintenant. Merci

J'ai pu résoudre ce problème en réécrivant la méthode native ReactTextInput

<strong i="12">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

Mais il s'agit simplement de désactiver le style passé au composant EditText avec getThemedContext()

De plus, la pile nous indique que cette erreur est déclenchée par ReactEditText.onTouchEvent , donc lorsque l'utilisateur touche le composant TextInput .

mon commentaire travaillait dans cette direction, pour résoudre ce problème dans une pull request pour éviter les problèmes liés à TextInput prop underlineColorAndroid . ReactNative définit le thème de manière programmatique ... veuillez lire mon commentaire et revenir vers moi avec quelques commentaires car je n'ai pas pu résoudre ce problème et je travaille sur d'autres demandes d'extraction maintenant.

J'ai pu résoudre ce problème en réécrivant la méthode native ReactTextInput

<strong i="12">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

Mais il s'agit simplement de désactiver le style passé au composant EditText avec getThemedContext()

De plus, la pile nous indique que cette erreur est déclenchée par ReactEditText.onTouchEvent , donc lorsque l'utilisateur touche le composant TextInput .

@ axsy-dev @ fabriziobertoglio1987. Je n'ai donc aucun élément que je puisse trouver dans mon répertoire de projet avec ReactEditText et je n'ai pas non plus de fichiers .java dans mon répertoire. J'utilise TypeScript avec React natif, donc la majorité de mes fichiers sont .tsx ou .ts à l'exception de beaucoup de node_modules.

Je n'utilise malheureusement pas Native Android.

@ucheNkadiCode pour résoudre ce problème maintenant, vous devez éjecter, sinon recréer ce scénario en réactif, écrire une requête d'extraction, il est fusionné dans react-native puis expo plus tard.

@ucheNkadiCode J'ai bien peur de ne pas utiliser Expo, mais on dirait que @sunnylqm sait de quoi il parle

Je viens de faire face au même problème à l'expo.
J'ai essayé: watchman watch-del-all && expo r -c
mais toujours maintenant de bonnes nouvelles.

Je suis confronté au même problème, qui disparaît si je change mon TextInput en texte.

Ce commentaire d'il y a 2 ans est toujours valable.

Je l'ai réduit à un <TextInput> rendu dans une FlatList. Lorsque je remplace cela par un <Text> , le problème disparaît.

La réinitialisation du cache semble aider brièvement, mais mon application se planterait à nouveau après quelques clics de bouton.

@diegoboston testing avec mon composant de test, vous pouvez reproduire cela sans FlatList. Vous pouvez trouver le composant de test et une solution / solution de contournement dans mon commentaire ici .

J'utilise expo SDK 37 qui utilise react native 0.61 en interne.
C'est étrange que je n'ai eu aucun problème, mais tout d'un coup, lorsque j'ai redémarré Builder, ce problème est apparu. N'est-ce pas encore réglé?

RN 0.62.2 + Android idem ici.
Cette erreur est invoquée en mode production.

La suppression du cache de l'application des paramètres a résolu mon problème, mais cela ne semble pas être une solution acceptable pour cela.

J'ai travaillé sur ce problème et voici mes conclusions (le est ici ).

1) Nous savons que l'ajout de android:editTextBackground avec color/transparent au thème résout le problème

<item name="android:editTextBackground"><strong i="10">@android</strong>:color/transparent</item>

2) Le changement de la méthode ReactEditTextShadowNode createDummyEditText au code ci-dessous résout également le problème (il me semble que désactiver tous les styles pour EditText)

<strong i="16">@Override</strong>
 protected EditText createDummyEditText() {
   return new EditText(getThemedContext(), null, 0);
 }

Je comprends maintenant ce problème, c'est que dans Android, vous pouvez définir des styles de deux manières

1) Écrire du XML comme des éléments et des styles html et les appliquer
2) Appelez le constructeur EditText ou View et passez le contexte et d'autres attributs / styles avec lui.

ReactEditText utilise createDummyEditText pour créer une instance EditText puis changer certains styles (padding, layout ..etc), mais c'est quelque chose lié à la disposition (padding, marges) pas les couleurs d'arrière-plan etc. En fait, j'ai essayé de changer ces lignes de code en setBackgroundTint en red ou transparent et cela n'a pas fonctionné ...

https://github.com/facebook/react-native/blob/95546d932f03f9af990c2a11576a4c6297136fd4/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode85

la couleur d'arrière-plan est modifiée avec la méthode suivante

https://github.com/facebook/react-native/blob/95546d932f03f9af990c2a11576a4c6297136fd4/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundMan.L51#Lager

Lundi, j'essaierai à nouveau de changer la méthode setBackgroundColor et de définir la couleur d'arrière-plan transparente au moment de l'exécution ... Ce serait mon premier indice pour résoudre ce problème

La pile échoue sur createInternalEditText

  /**
   * May be overriden by subclasses that would like to provide their own instance of the internal
   * {<strong i="9">@code</strong> EditText} this class uses to determine the expected size of the view.
   */
  protected EditText createInternalEditText() {
    return new EditText(getThemedContext());
  }

createInternalEditText est la dernière méthode appelée avant l'échec, le reste de la pile provient de la bibliothèque Android sdk OpenSource et ce n'est pas la vraie cause du problème

La configuration de android:editTextBackground est juste probablement au-dessus de certaines valeurs d'élément du thème par défaut à l'origine du problème. Le problème est lié au constructeur passant getThemedContext qui inclut également le thème

<item name="android:editTextBackground"><strong i="17">@android</strong>:color/transparent</item>

Pour cette raison, je pense que la solution doit être recherchée dans la façon dont React gère le contexte ...

Les gars qui redémarrent le conditionneur et effacent le cache ont fonctionné pour moi!

Mais c'est la solution temporaire, comment puis-je réparer ce permanent?

J'ai essayé de définir par programme en java la couleur d'arrière-plan sur transparent, mais déclenche toujours l'erreur d'exécution, ce qui me fait croire au code ci-dessous

<item name="android:editTextBackground"><strong i="6">@android</strong>:color/transparent</item>

est juste la logique de dépassement de

https://github.com/facebook/react-native/blob/9312313c3c6701490d728f912e0b0bbd16d91ad9/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputInputShadowNode.Lava#73

ce qui est clairement la cause du problème dans la pile

Cette méthode est responsable de la configuration du style du EditText,

Le problème est que la pile de problèmes d'origine semble avoir un journal différent et ne semble pas liée au scénario de test associé. La pile ci-dessous provient de ReactEditText.onTouchEvent ce qui signifie que l'utilisateur touche le TextInput et l'erreur est déclenchée.

java.lang.NullPointerException:
tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference at
android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:888) at
android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466) at
android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104) at
android.graphics.drawable.Drawable.setState(Drawable.java:735) at
android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331) at
android.graphics.drawable.Drawable.setState(Drawable.java:735) at
android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488) at
android.graphics.drawable.Drawable.setState(Drawable.java:735) at
android.view.View.drawableStateChanged(View.java:18002) at
android.widget.TextView.drawableStateChanged(TextView.java:4097) at
android.view.View.refreshDrawableState(View.java:18071) at
android.view.View.setPressed(View.java:8543) at
android.view.View.setPressed(View.java:8521) at
android.view.View.onTouchEvent(View.java:11218) at
android.widget.TextView.onTouchEvent(TextView.java:8467) at
com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

Autre type d'erreurs https://github.com/facebook/react-native/issues/17530#issuecomment -376917781

Exception fatale: java.lang.NullPointerException: Tentative d'invocation de la méthode virtuelle 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable $ ConstantState.newDrawable (android.content.res.Resources)' sur une référence d'objet nulle sur android .graphics.drawable.DrawableContainer $ DrawableContainerState.createAllFutures (DrawableContainer. : 433) sur android.graphics.drawable.InsetDrawable.getOpacity (InsetDrawable.java:258) sur android.view.View.computeOpaqueFlags (View.java:16791) sur android.view.View.setBackgroundDrawable (View.java:21710) à android.view.View.setBackground (View.java:21603) à android.view.View.(View.java:5547) sur android.widget.TextView.(TextView.java:1135) sur android.widget.EditText.(EditText.java:107) sur android.widget.EditText.(EditText.java:103) sur android.widget.EditText.(EditText.java:99) sur android.widget.EditText.(EditText.java:95) sur com.facebook.react.views.textinput.ReactEditText.(ReactEditText.java:92) sur com.facebook.react.views.textinput.ReactTextInputManager.createViewInstance (ReactTextInputManager.java:94) sur com.facebook.react.views.textinput.ReactagerTextInputManager.createViewInstance (ReactTextInputManager.createViewInstance) com.facebook.react.uimanager.ViewManager.createView (ViewManager.java:46) à com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:218) à com.facebook.react.uiman.UIViewOperationOperation. execute (UIViewOperationQueue.java:150) sur com.facebook.react.uimanager.UIViewOperationQueue $ DispatchUIFrameCallback.dispatchPendingNonBatchedOperations (UIViewOperationQueue.java:923) sur com.facebook.react.uameOperations.UIViewOperationQueue.java:923) sur com.facebook.react.uameOperations.UIViewOperationQueue.java:923) sur com.facebook.react.uameOperations.UIViewOperationQueue.java:923) sur com.facebook.react.uameOperations.UIViewOperationQueue.java:923) à com.facebook.react.uimanager.GuardedFrameCallback.doFrame (GuardedFrameCallback.java:31) à com.facebook.react.modules.core.ReactChoreographer $ ReactChoreographerDispatcher.doFrame (ReactChoreog rapher.java:136) sur com.facebook.react.modules.core.ChoreographerCompat $ FrameCallback $ 1.doFrame (ChoreographerCompat.java:107) sur android.view.Choreographer $ CallbackRecord.run (Choreographer.java:909) sur android. view.Choreographer.doCallbacks (Choreographer.java:723) à android.view.Choreographer.doFrame (Choreographer.java:655) à android.view.Choreographer $ FrameDisplayEventReceiver.run (Choreographer.java:897) à android.os.Handler .handleCallback (Handler.java:789) à android.os.Handler.dispatchMessage (Handler.java:98) à android.os.Looper.loop (Looper.java:164) à android.app.ActivityThread.main (ActivityThread. java: 6938) sur java.lang.reflect.Method.invoke (Method.java) sur com.android.internal.os.Zygote $ MethodAndArgsCaller.run (Zygote.java:327) sur com.android.internal.os.ZygoteInit .main (ZygoteInit.java:1374)

de l'autre côté je me demande si https://github.com/facebook/react-native/issues/17530#issuecomment -504044357 est un exemple acceptable, car il ne provoque pas manuellement l'erreur en cliquant sur TextInput mais en le faisant par programmation.

Je suis sûr que quelqu'un dans cette discussion fera des recherches appropriées et résoudra ce problème. Merci beaucoup et bonne chance! : smiley:

Les gars, essayez d'exécuter à nouveau "npm install". Cela a fonctionné pour moi.

J'ai essayé d'ajouter <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> et cela empêche l'application de planter, mais la zone de texte continue de clignoter entre grand et petit et est inutilisable, est-ce que quelqu'un d'autre a eu cela?

Dans mon cas, j'utilise des styled-components, j'ai mis un nom d'accessoires sur "right", je pense que c'est spécial, je change en "isRight" a résolu mon problème.

Prenez la version de version et testez-la sur cet apk, vous n'avez jamais vu cette erreur

Le commentaire original rapporte un problème obtenu grâce au rapport de bogue d'analyse, et non une erreur de développement, je pense que nous devons rester concentrés.

Vous pouvez essayer les deux et l'un des points, selon celui qui convient à votre application:

1. Supprimez les données du cache de votre application et laissez-la se recharger
2. Redémarrez le serveur en utilisant npm start --reset-cache

https://github.com/facebook/react-native/pull/24183 J'essaye de déboguer ceci une fois de plus.

https://github.com/facebook/react-native/blob/9f699ae1855252397a516333a35a5e6aff74b89b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputMan.java#Lager537

semble qu'il existe un problème lié ouvert https://issuetracker.google.com/issues/37068452 sur le projet Android

1. Créez une implémentation Drawable personnalisée qui ne remplace pas getConstantState ().
2. Créez une instance LayerDrawable, avec une instance du dessin personnalisé comme enfant.
3. Appelez mutate () sur le LayerDrawable.

    Drawable dummyDrawable = new Drawable() {
        <strong i="12">@Override</strong>
        public void draw(Canvas canvas) {
            canvas.drawColor(Color.RED);
        }
        <strong i="13">@Override</strong> public void setAlpha(int alpha) {}
        <strong i="14">@Override</strong> public void setColorFilter(ColorFilter cf) {}
        <strong i="15">@Override</strong> public int getOpacity() { return 0; }
    };
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] { dummyDrawable });
    layerDrawable.mutate();

Dans notre cas, l'erreur d'exécution est déclenchée à cette ligne à partir de ReactEditText (hérite de AppCompatEditText )

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java#L83

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputMan.java#L126

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L111

https://github.com/facebook/react-native/issues/17530#issuecomment -615131077

<TextInput style={styles.input} /> enverra les informations du runtime JavaScript à Android en tant que JSON via ReactNativeBridge, l'API Java Android utilisera les informations pour créer une instance View et la gonfler (afficher) à l'écran.

Il passera un objet Context au constructeur View qui gonflera la mise en page pour ce <TextInput /> , puis chaque fois que nous changeons un accessoire comme underlineColorAndroid , nous appellera une méthode d'API Android spécifique par exemple. setUnderlineColorAndroid("red") et l'API Android se chargera de mettre <TextInput /> jour la couleur de soulignement

Si 37068452 est à l'origine du Runtime, alors nous devons être mutating() a BackgroundDrawable peut-être en changeant le underlineColor , mais l'erreur est déclenchée dans le constructeur View quand on passe le Context .

J'essaierai de déboguer la pile Android, mais j'essaierai d'abord de transformer le présent exemple en un exemple minimum reproductible et de supprimer toutes les propriétés qui ne sont pas essentielles pour reproduire le bogue.

J'ai pu créer un exemple reproductible minimum.
Le problème est dû à la propriété de clé TextInput.

Re-rendre un nombre élevé de composants TextInput avec la prop clé provoquera l'erreur d'exécution.
Le nombre de TextInput s semble crucial pour déclencher le crash.

   // Does not crash after testing for 5 minutes
    for (let i = 0; i < 5; i++) { ..
   // Crashes after 20 seconds
    for (let i = 0; i < 100; i++) { ..
   // Crashes after 1 second
    for (let i = 0; i < 1000; i++) { ..

Le plantage ne se reproduit pas si vous supprimez l'accessoire de clé TextInput . Je vais enquêter et essayer de le réparer. Exécutez cet exemple pour le reproduire.

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

class App extends React.Component{
  state = { startKey: 0 };
  componentDidMount() {
    this.interval = setInterval(this.updateKey, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateKey = () => {
    this.setState({
      startKey: this.state.startKey + 100
    });
  };

  render() {
    const textInputs = [];

    for (let i = 0; i < 100; i++) {
      const key = (this.state.startKey + i).toString();
      console.log("key", key);
      // REMOVE KEY PROP TO FIX THIS
      textInputs.push(
        <TextInput key={key} />
      );
    }

    return (
      <View>
        { textInputs }
      </View>
    );
  }
}

export default App;

Le même problème peut être reproduit avec une FlatList, si votre data prop comprend un key , index ou id comme ceci [{ key: "1"}, {key: "2"}, .. {key: "5000"}] , automatiquement le key sera utilisé pour votre liste et provoquera le Runtime. La suppression de ces clés du tableau data corrige l'erreur et supprime la mise en cache automatique.

https://github.com/facebook/react-native/blob/980900c6343b93259e46edd44b6f267aa534cde5/Libraries/Lists/FlatList.js#L122 -L123

import * as React from "react";
import { Text, FlatList, View, TextInput } from "react-native";

class App extends React.Component{
  state = { startKey: 0 };
  componentDidMount() {
    this.interval = setInterval(this.updateKey, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateKey = () => {
    this.setState({
      startKey: this.state.startKey + 100
    });
  };

  render() {
    const textInputs = [];

    for (let i = 0; i < 5000; i++) {
      const notKey = (this.state.startKey + i).toString();
      console.log("key", notKey);
      // REMOVE KEY OR ID FIELD TO FIX THIS
      // replacing notKey with key will trigger the runtime
      textInputs.push(
        { notKey }
      );
    }

    return (
      <FlatList
        data={textInputs}
        renderItem={({item}) => <TextInput value={"testing"} />}
      />
    );
  }
}

export default App;

Le problème semble être causé par cette ligne de code. J'ai commenté la ligne et l'ai remplacée par const key = 500; et l'erreur ne se reproduirait pas.

https://github.com/facebook/react-native/blob/980900c6343b93259e46edd44b6f267aa534cde5/Libraries/Lists/VirtualizedList.js#L802 -L802

Un exemple est avec keyExtractor(item, ii) avec item = {"key":"450"} , ii = 50 et la valeur de retour key = 450 causera le crash, mais je crois que ce n'est pas la vraie cause, mais juste indication que la clé est à l'origine du problème. Je vais continuer à regarder ça. Je cherche un emploi. Merci beaucoup. Je te souhaite un bon week end.

| AVEC RUNTIME |
|: -------------------------: |
| |

| SANS RUNTIME |
|: -------------------------: |
| |

@ fabriziobertoglio1987 J'ai une conclusion similaire https://github.com/facebook/react-native/issues/17530#issuecomment -573934341, c'est-à-dire liée au remontage / instanciation d'un edittext. À ce moment-là, je ne comprenais pas pourquoi l'entrée de texte recréerait / se réinstaurait alors qu'ils semblaient n'avoir aucune raison de le faire. Maintenant, il semble que les clés pourraient en être la cause.

L'erreur jette d'ici

https://github.com/aosp-mirror/platform_frameworks_base/blob/53a9ccaa926945149b4546c67b50ce1ae88ba777/graphics/java/android/graphics/drawable/DrawableContainer.java#L875

où le tableau mDrawableFutures n'est pas nul mais certains de ses éléments enfants peuvent être nuls.

mDrawableFutures ne peut être cloné qu'à partir d'autres

https://github.com/aosp-mirror/platform_frameworks_base/blob/8857e6b645f9b91f44c8ea0ab8f441c9c0d63da6/graphics/java/android/graphics/drawable/DrawableContainer.java#L800 -L820

ce qui signifie qu'il n'était pas nul lors du clonage mais que certains de ses éléments enfants ont été détruits après.
Ce qui suit est mon hypothèse: les accessoires clés déclencheraient un processus différent, qui construirait des nœuds d'ombre pour les entrées de texte. Et pendant le processus, les états dessinables seraient clonés. Cependant, il peut y avoir une condition de concurrence / opération non thread-safe qui a détruit certains des états pouvant être dessinés alors qu'ils étaient encore en cours d'utilisation. @ fabriziobertoglio1987

merci beaucoup @sunnylqm Je crois au pouvoir de la collaboration et j'essaie de décrocher cette pull request pour trouver du travail.

Je pense que le problème est lié à certains paramètres sales passés lors de l'utilisation de key et React.PureComponent.

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Lists/VirtualizedList.js#L345 -L348

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Lists/VirtualizedList.js#L820

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Lists/VirtualizedList.js#L1254 -L1255

Vous avez raison, en fait, ce problème n'est rencontré que lors de l'utilisation du composant TextInput . Par exemple, le remplacement de TextInput par Text dans renderItem résoudra ce problème

<FlatList
  renderItem={({item}) => <TextInput value={"testing"} />}

La différence entre l'utilisation de Text et de TextInput est que const element sera un ForwardRef avec TextInput . Dans le cas ci-dessous TextInput crée un runtime lorsqu'il atteint une certaine clé. J'ai également supprimé underlineColorAndroid="transparent" et ce n'est pas la cause de l'erreur, mais je l'ai laissé dans les journaux ci-dessous.

https://github.com/facebook/react-native/blob/980900c6343b93259e46edd44b6f267aa534cde5/Libraries/Lists/VirtualizedList.js#L1985 -L1990

console.log("element", element);
//=> element <Text value="testing" />
//=> element <ForwardRef(TextInput) allowFontScaling={true} rejectResponderTermination={true} underlineColorAndroid="transparent" value="testing" />

TextInput renvoie un forwardRef

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Components/TextInput/TextInput.js#L1153

https://github.com/facebook/react-native/blob/f00795dc90d05180014eeea4b3215b0166a90692/Libraries/Components/TextInput/TextInput.js#L957 -L990

Je crois qu'une méthode de l'API Java est appelée à partir de l'API javascript TextInput , mais avec des paramètres manquants / sales. Cela peut être à l'origine de l'erreur d'exécution NPE, mais je dois examiner tous les aspects de l'API JS TextInput pour en comprendre la raison.

Je pense que le prop key pose des problèmes car le mécanisme React est basé sur la comparaison du prop key , si aucun mécanisme de prop clé n'est présent, alors pas de mise en cache et aucune erreur subséquente .

Demain, je vais essayer de définir un point d'arrêt dans votre dans le code que vous avez référencé dans le message ci -

Merci beaucoup pour l'aide. J'espère que nous pourrons rédiger ensemble une Pull Request et résoudre ce problème. Je te souhaite une bonne soirée. Fabrizio

@sunnylqm

TROP LONG NE LISEZ PAS

J'écris une pull request pour résoudre ce problème. C'est très facile à réparer.

Le problème est causé par le BackgroundDrawable par défaut utilisé dans l'initialisation EditText

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L111

Le Drawable est celui du thème que nous utilisons Theme.AppCompat.Light.NoActionBar . La modification du dessin peut être effectuée en modifiant les fichiers de modèle xml utilisés pour initialiser le projet android react-native avec le script d'initialisation react-native.

J'utiliserai soit celui fourni par défaut par Android, soit je créerai un dessin personnalisé et l'inclurai dans chaque initialisation de projet.

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

<item name="android:editTextBackground"><strong i="18">@android</strong>:drawable/edit_text</item>

ou

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

<item name="android:editTextBackground">@drawable/custom_background_drawable</item>

VERSION LONGUE

Je cite sunnylqm https://github.com/facebook/react-native/issues/17530#issuecomment -660506001

Ce qui suit est mon hypothèse: les accessoires clés déclencheraient un processus différent, qui construirait des nœuds d'ombre pour les entrées de texte. Et pendant le processus, les états dessinables seraient clonés. Cependant, il peut y avoir une condition de concurrence / opération non thread-safe qui a détruit certains des états pouvant être dessinés alors qu'ils étaient encore en cours d'utilisation.

Cette ligne android:editTextBackground corrige l'erreur, mais QUE fait cette ligne dans ReactNative?

1) Le AndroidManifest.xml assigne le android:theme="@style/AppTheme"

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.awesomeproject">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:theme="@style/AppTheme">

2) Nous changeons le AppTheme en res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:editTextBackground"><strong i="22">@android</strong>:drawable/edit_text</item>
    </style>
</resources>

3) EditText constructeur appellera super(context) . L'objet context inclut les layout et theme ( AppTheme ).

Le constructeur View obtiendra les informations de style / thème / layout de l'objet context et créera une instance de EditText avec ces styles (xml est comme html), le gonfle et l'afficher sur l'écran.

Android utilise xml comme html pour rendre les vues statiques, tandis que Java est utilisé pour rendre le contenu dynamique (comme JavaScript dans le Web).

https://github.com/facebook/react-native/blob/6ffb983f83afdee5d9290c683c5060d2a959818d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L111

4) ReactNative construit au-dessus de l'API Context , mais utilisera le même modèle de 1-3.
Initialisez les vues avec l'objet context , puis utilisez JavaScript pour apporter des modifications dynamiques sans changer directement l'instance context , mais en utilisant le pont react-native via l'API Android.

| AVANT | APRÈS | APRÈS avec les accessoires de style TextInput |
|: -------------------------: |: -------------------- -----: |: -------------------------: |
| | | |

Je prépare une Pull Request pour modifier le Drawable par défaut utilisé pour EditText lors de l'initialisation.
Le Drawable de Theme Theme.AppCompat.Light.NoActionBar est à l'origine de ce problème, le remplacer par un autre drawable devrait le résoudre. Le tirage <strong i="27">@android</strong>:drawable/edit_text est trop haut pour notre conception. La vue parent s'adapte à la hauteur de dessin par défaut si la hauteur est supérieure à celle du parent. Je crois que ReactNative utilise un dessin par défaut avec une faible hauteur, puis l'adapte avec match_parent à la vue parent.

1) OPTION 1 - Trouver un dessin à partir d'un autre thème

2) OPTION 2
Créez un nouveau dessinable dans le modèle natif de réaction basé sur celui disponible dans le projet Android avec une faible hauteur pour toujours match_parent View.

J'ai ajouté à mon projet Android le dessinable suivant avec une hauteur de quelques pixels

L'arrière-plan dessinable s'adapte à sa hauteur de vue parent de 10

Le fond dessiné s'adapte à sa hauteur de vue parent de 100

semble fonctionner avec de petits dessinables d'arrière-plan, alors nous avons juste besoin du script react-native init pour initialiser les projets en utilisant ce dessin d'arrière-plan par défaut. J'ajouterai les modifications explicites ci-dessus aux fichiers ci-dessous dans une pull request.

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

Merci beaucoup. Fabrizio

Face au même problème avec RN 0.61.0 + niveau d'API Android 28.
Je l'ai réduit à une combinaison de rendus Flatlist, TextInput et de composants imbriqués

@ fabriziobertoglio1987 J'ai essayé de cette façon mais peut-être que j'ai manqué qch que je ne l'ai pas fait fonctionner. Je connais peu d'Android et je suis heureux que vous puissiez y remédier. Bien que je sois toujours intéressé par la question des accessoires clés.

@ fabriziobertoglio1987 Y a-t-il de toute façon du code js natif de réaction que je peux ajouter pour résoudre ce problème rapidement? Faites le moi savoir.

@ asmi24886, vous pouvez trouver un composant de test pour reproduire de manière fiable ce problème et une solution de contournement de code / configuration native dans mon commentaire ici
Je ne pense pas qu'il existe une solution de contournement utilisant uniquement le code JS.

C'est la suite de mon précédent message https://github.com/facebook/react-native/issues/17530#issuecomment -660908150, mes efforts pour trouver un emploi indépendant et rédiger la pull request pour clôturer ce problème.

J'ai créé un dessin personnalisé basé sur Theme.AppCompat.Light .

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
       android:insetTop="@dimen/abc_edit_text_inset_top_material"
       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">

    <selector>
        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
        <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
    </selector>

</inset>

Le Runtime est causé par l'entrée suivante, si je supprime cette ligne, une copie exacte du Drawable actuel de react-native fonctionne et ne déclenche pas l'erreur d'exécution. J'ai inclus l'exemple reproductible minimal dans mon https://github.com/facebook/react-native/issues/17530#issuecomment -660017858

<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

J'écris une Pull Request, une fois la pull request fusionnée, vous pourrez effectuer la mise à niveau avec le upgrade-helper .

La demande de tirage comprendra une reproduction de ces scénarios dans l'application RNTester, des modifications du modèle et l'ajout du dessin personnalisé ci-dessus pour éviter ce problème.

https://github.com/facebook/react-native/blob/2b56011f9cb9f90781428b5b773cbbed5c4fae43/template/android/app/src/main/res/values/styles.xml#L1 -L6

Ceci est une vidéo présentant l'erreur d'exécution lorsque le Drawable a la ligne <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

Ceci est une vidéo présentant le correctif (aucune erreur d'exécution) lorsque le Drawable n'a pas de ligne <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

Comme indiqué dans la capture d'écran ci-dessous, je supprime simplement la ligne suivante du fichier xml pouvant être dessiné
xml <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
Je ne change pas de style. Le Drawable est le même que celui utilisé à partir d'AppCompat et le style sera le même, mais il ne déclenchera pas l'erreur d'exécution

Je vais essayer de publier la pull request demain .

Merci beaucoup sunnylqm d' avoir collaboré avec moi pour écrire https://github.com/facebook/react-native/pull/29452 qui résout ce problème.

Il semble y avoir un bogue dans Drawable.mutate () dans certains appareils / versions d'OS Android même après avoir vérifié l'état constant. Cette erreur est difficile à reproduire et à corriger, alors essayez simplement d'attraper l'exception pour éviter un crash.

Le problème est causé par cette ligne dans extras / android / support / v7 / appcompat / res / drawable / abc_edit_text_material.xml .

<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>

La ligne ci-dessus crée un StateListDrawable qui changera l'image d'arrière-plan TextInput (Background Drawable ) en fonction de l'état du TextInput .

state_pressed="false" et state_focused="false" déclencheront un changement de TextInput BackgroundDrawable. Les images ne sont pas la cause du problème, mais je les ai incluses à des fins de documentation.

| abc_textfield_activated_mtrl_alpha | abc_textfield_default_mtrl_alpha |
|: -------------------------: |: -------------------- -----: |
| | |

À l'intérieur de DrawableContainer.getChild (), la variable ConstantState cs est null . L'appel de null.newDrawable(mSourceRes) déclenche une exception de pointeur nul. Cet appel est le résultat du changement d'état du TextInput, dans cette trace de pile après avoir appuyé dessus.

mDrawableFutures n'inclut pas la liste correcte des entrées https://github.com/facebook/react-native/pull/29452#issuecomment -662616018.

final ConstantState cs = mDrawableFutures.valueAt(keyIndex);
final Drawable prepared = prepareDrawable(cs.newDrawable(mSourceRes));

Plus d'informations dans les commentaires précédents https://github.com/facebook/react-native/issues/17530#issuecomment -661174770 https://github.com/facebook/react-native/issues/17530#issuecomment -660908150 https: //github.com/facebook/react-native/issues/17530#issuecomment -660506001 https://github.com/facebook/react-native/issues/17530#issuecomment -660458191 https://github.com/facebook/ react-native / issues / 17530 # issuecomment -660017858 https://github.com/facebook/react-native/issues/17530#issuecomment -659422298 https://github.com/facebook/react-native/issues/17530# issueecomment -645851033 https://github.com/facebook/react-native/issues/17530#issuecomment -632795323

Merci beaucoup
je vous souhaite une bonne journée
Fabrizio

@ fabriziobertoglio1987 Le commentaire ci-dessus est-il une solution de contournement ou un correctif réellement implémentable qui doit être ajouté pour réagir en natif, nous sommes actuellement sur RN 0.59.3 et obtenons cette erreur uniquement en production. Nous ne pouvons pas sembler répliquer dans le développement.

@Coffeegerm Le commentaire ci-dessus https://github.com/facebook/react-native/issues/17530#issuecomment -662000718 est une brève explication de la façon dont ma pull request https://github.com/facebook/react-native/pull / 29452 résout ce problème. Une fois la demande d'extraction fusionnée dans react-native

1) Les nouvelles applications n'auront pas cette erreur
2) Les applications existantes seront mises à niveau et elles ne rencontreront pas l'erreur. En savoir plus sur la mise à niveau à la mise à niveau # 3-upgrade-your-project-files pour en savoir plus sur la façon d'appliquer les modifications dans votre dossier /android lorsque vous mettez à niveau votre application.

Si vous ne souhaitez pas mettre à niveau, vous pouvez vérifier mon PR https://github.com/facebook/react-native/pull/29452 et ajouter ces modifications à votre dossier android . Vous n'avez pas besoin de modifier le code source react-native , car les modifications de configuration de ce PR ne sont pas dans la base de code /ReactAndroid Java, mais dans le modèle Android utilisé pour l'initialisation le projet.

Je travaille actuellement sur d'autres problèmes, mais je reviendrai, répondrai à tout commentaire et apporterai les améliorations nécessaires à ma demande de tirage.

Veuillez me revenir avec des suggestions d'amélioration et des commentaires.

je te souhaite un bon week end
Merci beaucoup pour votre aide
Fabrizio

Je viens de voir un commit qui semble lié https://github.com/facebook/react-native/commit/1e4d8d902daca8e524ba67fc3c1f4b77698c4d08

nous générions strictement trop d'opérations Créer + Supprimer qui étaient redondantes et pourraient causer des problèmes de cohérence, des plantages ou des bogues sur les plates-formes qui ne gèrent pas cela correctement -
d'autant plus que l'ordre de la création + suppression n'est pas garanti (une vue reparentée pourrait être créée "d'abord" et ensuite la différence pourrait émettre plus tard une "suppression" pour la même vue).

@ fabriziobertoglio1987

Une idée de la façon dont quelqu'un pourrait résoudre ce problème tout en utilisant Expo, donc sans accès au dossier Android du projet? 😅

@divonelnc Il existe une solution de contournement: utilisez une nouvelle clé à chaque fois qu'une entrée de texte est rendue, par exemple,

<TextInput key={Math.random()} />

Et bien sûr, cela peut entraîner d'autres problèmes et une perte de performances.

@sunnylqm Malheureusement, cela n'a pas aidé 😞. Je le fais toujours planter au hasard sur l'écran avec des dizaines d'entrées de texte.

Je peux confirmer ce problème en production! RN: 0,62,2 😕

Le même problème s'est produit dans la RN 0.63.2 :(

Ce commit peut résoudre ce problème:
https://github.com/facebook/react-native/commit/a5b5d1a805a9c54d325763b432be1cf2c8811dc9

Même problème avec Expo et RN sdk https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz

Wow c'était frustrant. La solution @Hopding fonctionne. Je le sais parce que je pouvais le reproduire à chaque fois avant.
// styles.xml

<resources>
   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
        <item name="android:editTextBackground"><strong i="9">@android</strong>:color/transparent</item>

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="10">@android</strong>:color/transparent</item>
    </style>
</resources>

Voici une assez bonne solution de contournement. Créez un wrapper pour le composant d'entrée de texte que vous utilisez et générez une clé pour celui-ci avec useMemo. De cette façon, une seule entrée de texte aura toujours la même clé lors des re-rendus, et vous n'avez pas non plus à écrire de clés pour toutes vos entrées de texte.

export default (props: TextInputProps) => {
  const key = useMemo(() => {
    return Math.random().toString()
  }, [])

  return (
    <TextInput key={key} {...props} />
  )
}

Si vous utilisez expo
J'ai eu cette erreur après la mise à niveau de l'expo SDK 38 vers 39.
J'ai dû nettoyer à la fois mon cache expo (expo -rc) + le cache de l'application mobile expo (je le désinstalle et le réinstalle pour être sûr) et l'erreur a disparu.

@dpnick le bogue est très difficile à reproduire. Je suggère d'utiliser le composant de test que j'ai publié ici pour m'assurer qu'il a vraiment disparu.

Obtention de cette erreur en production et je ne parviens pas à reproduire ce problème, ma version RN est la 0.62.2, voici mes journaux de firebase crashlytics:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures(DrawableContainer.java:880)
       at android.graphics.drawable.DrawableContainer$DrawableContainerState.getOpacity(DrawableContainer.java:1163)
       at android.graphics.drawable.DrawableContainer.getOpacity(DrawableContainer.java:434)
       at android.graphics.drawable.InsetDrawable.getOpacity(InsetDrawable.java:259)
       at android.view.View.computeOpaqueFlags(View.java:19424)
       at android.view.View.setBackgroundDrawable(View.java:24701)
       at android.view.View.setBackground(View.java:24594)
       at android.view.View.<init>(View.java:6191)
       at android.widget.TextView.<init>(TextView.java:1223)
       at android.widget.EditText.<init>(EditText.java:106)
       at android.widget.EditText.<init>(EditText.java:102)
       at android.widget.EditText.<init>(EditText.java:98)
       at android.widget.EditText.<init>(EditText.java:94)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.createInternalEditText(ReactTextInputShadowNode.java:258)
       at com.facebook.react.views.textinput.ReactTextInputShadowNode.setThemedContext(ReactTextInputShadowNode.java:78)
       at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:243)
       at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:469)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:883)
       at android.os.Handler.dispatchMessage(Handler.java:100)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loop(Looper.java:237)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
       at java.lang.Thread.run(Thread.java:919)

@AbdelkhalekESI le bug est très difficile à reproduire. Avez-vous essayé le composant de test que j'ai publié ici ?

J'ai écrit une pull request qui corrige ce problème https://github.com/facebook/react-native/issues/17530#issuecomment -663577143

Veuillez vous diriger vers le pr https://github.com/facebook/react-native/pull/29452 suivez les instructions https://github.com/facebook/react-native/wiki/Building-from-source#publish - votre-propre-version-de-react-native et faites-moi savoir si vous avez besoin d'aide. J'essaierai de vérifier ce week-end si un pr séparé doit être écrit pour Expo, mais je pense qu'ils obtiendront simplement le correctif en mettant à jour le réactif une fois que ce pr sera fusionné et publié. Merci beaucoup. je te souhaite une bonne nuit

plus d'informations dans mes messages précédents https://github.com/facebook/react-native/issues/17530#issuecomment -662000718

Même problème dans la version "react-native": "0.63.3"

effacez simplement votre cache d'Expo dans l'application mobile (si vous utilisez une application mobile) ou le cache de l'application Expo sur n'importe quelle plateforme que vous utilisez.

@ tzeneng96 ok,

@AbdelkhalekESI le bug est très difficile à reproduire. Avez-vous essayé le composant de test que j'ai publié ici ?

J'ai pu reproduire ce bug en utilisant ce composant. J'ai également reçu de nombreux logs de ce crash en production. Le projet a actuellement réagi à la version 0.63.3.

Je ne sais pas si je me suis trompé, mais dans cette rubrique citée par @ glenn-axsy, d'après ce que j'ai compris, ils ont réussi à résoudre en ajoutant andoid \ app \ src \ main \ res \ values ​​\ styles.xml l'article:
"item name =" android: editTextBackground "> @ android: couleur / transparent / item"

Je teste toujours la solution.

@thiagocristianno votre compréhension est correcte, même si ce n'est pas une solution parfaite et je pense que cela n'aide pas les développeurs de l'Expo car ils ne peuvent pas contrôler ce paramètre.

Wow c'était frustrant. La solution @Hopding fonctionne. Je le sais parce que je pouvais le reproduire à chaque fois avant.
// styles.xml

<resources>
   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
        <item name="android:editTextBackground"><strong i="10">@android</strong>:color/transparent</item>

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="11">@android</strong>:color/transparent</item>
    </style>
</resources>

@ @jordangrant , où avez-vous vu la solution de contournement?

Wow c'était frustrant. La solution @Hopding fonctionne. Je le sais parce que je pouvais le reproduire à chaque fois avant.
// styles.xml

<resources>
   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextStyle">@style/AppEditTextStyle</item>
        <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
        <item name="android:editTextBackground"><strong i="11">@android</strong>:color/transparent</item>

    </style>

    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
        <item name="android:background"><strong i="12">@android</strong>:color/transparent</item>
    </style>
</resources>

@ @jordangrant , où avez-vous vu la solution de contournement?

@bobowinca C'est un fil extrêmement long et cette solution a fonctionné à 100% pour moi. RN 63.3 pas d'Expo

@jordangrant , Doh! Regardez toujours avant de demander. J'ai échoué. Merci Monsieur.

Il semble également que vous ayez pu reproduire le problème de manière cohérente. Je me demande comment vous faites cela. Jusqu'à présent, je n'ai vu que des traces de pile. Je cherche des moyens de vérifier le correctif.

@bobowinca, le composant de test que j'ai publié ici devrait vous aider à le reproduire de manière cohérente.

@bobowinca, le composant de test que j'ai publié ici devrait vous aider à le reproduire de manière cohérente.

fonctionne comme un charme! Merci Glenn!

L'ajout de <item name="android:editTextBackground"><strong i="5">@android</strong>:color/transparent</item> à styles.xml fonctionne!
La méthode avec l'ajout de key={Math.random().string()} de TextInput fonctionnait mais les rerenders provoquent le masquage du clavier à chaque fois après seconde - c'était inacceptable.