fravara
December 21, 2021, 12:23pm
1
I’m using:
SDK Version: 43
Platform: Android
In production I can’t see the error, the only thing I can see is this (dev-mode).
The error is totally random, I managed to make the error appear by modifying TextInputs or Pickers quickly.
My project uses expo entirely, I understand that it is a bug, but is there a solution to it?
Thanks and kind regards.
Debugging - Expo Documentation This will be one of your best friends moving forward!
Hi Adam, I have looked for this error and it is due to the version of react native. In theroy, it is solved by updating to 0.66. Any ideas about it?
wodin
January 3, 2022, 2:08pm
4
Do you have a link to the commit that fixes it by any chance?
You can find the fix here , however you need eject expo from your project because the fix need to modify some xml files (Android version).
As I told, the version 0.66 of react-native fixes that error, in my case I can’t eject expo… so basicly I’m stucked.
wodin
January 7, 2022, 3:45pm
6
That is a workaround, but apparently the fix is here:
facebook:main
← fabriziobertoglio1987:fix-issue-n-1
opened 03:53PM - 21 Jul 20 UTC
## Summary
This issue fixes https://github.com/facebook/react-native/issu… es/17530 fixes https://github.com/expo/expo/issues/9905 with the help of @sunnylqm https://github.com/sunnylqm
Re-rendering a large number of TextInputs with key prop on the screen will trigger the below Null Pointer Exception Runtime Error
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
The error is caused by null.newDrawable(mSourceRes) at
https://github.com/aosp-mirror/platform_frameworks_base/blob/20b012282e0c3d94b5c0aa799cdda065f2df06db/graphics/java/android/graphics/drawable/DrawableContainer.java#L919
More info https://github.com/facebook/react-native/pull/29452#issuecomment-662616018 https://github.com/facebook/react-native/issues/17530#issuecomment-662000718
The Theme Theme.AppCompat.Light.NoActionBar defines the Drawables for AppCompatEditText in @drawable/abc_edit_text_material.xml
https://chromium.googlesource.com/android_tools/+/7200281446186c7192cb02f54dc2b38e02d705e5/sdk/extras/android/support/v7/appcompat/res/drawable/abc_edit_text_material.xml
Removing the following line from the above xml file @drawable/abc_edit_text_material.xml fixes the error https://github.com/facebook/react-native/issues/17530#issuecomment-662000718
`<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>`
The Theme default EditText background is replaced with a custom background, which is a copy of the original background without the above item which triggers the Runtime Error. The changes are implemented in RNTester with commit (more info in the commit) https://github.com/facebook/react-native/commit/0858d4120df242196570f5394f8ae4e623533493. The new custom drawable used as default background for the TextInput is named edit_text.
`<item name="android:editTextBackground">@drawable/edit_text</item>`
The same changes have been added to react-native default template for creating new applications with commit (more info) https://github.com/facebook/react-native/commit/f3493083df5e1b157bbdaf18f97c59b7b0ad828c, lean core moved the cli tools to https://github.com/react-native-community/cli, but the default template for creating a new application is stored in facebook/react-native/template.
New applications will be generated with this configurations and will not experience the error, existing react-native applications will fix the error by upgrading with the [upgrade-helper](https://github.com/react-native-community/upgrade-helper).
A Minimum Reproducible Example to reproduce this error is included in commit (more info in the commit) https://github.com/fabriziobertoglio1987/react-native/commit/4a414e2cc7e17068da26ef7727a04d0aa5883a17 and https://github.com/facebook/react-native/issues/17530#issuecomment-660017858
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[Android] [Fixed] - TextInput Drawable to avoid Null Pointer Exception RuntimeError #17530
## Test Plan
Works in all scenarios on Android.
**<details><summary>CLICK TO OPEN TESTS RESULTS - React Native</summary>**
<p>
Test Results from the Testing in RNTester.
Minimum Reproducible Example added with commit (more info in the commit) https://github.com/fabriziobertoglio1987/react-native/commit/4a414e2cc7e17068da26ef7727a04d0aa5883a17
The example included in commit https://github.com/fabriziobertoglio1987/react-native/commit/4a414e2cc7e17068da26ef7727a04d0aa5883a17 will cause a [NPE Runtime Error on Master Branch](https://fabriziobertoglio.s3.eu-central-1.amazonaws.com/opensource/react-native/17530/runtime.mp4), while no error is experienced in the [feature branch](https://fabriziobertoglio.s3.eu-central-1.amazonaws.com/opensource/react-native/17530/no_runtime.mp4). The links are video hosted on s3 of this tests (playable by google chrome).
| **[BEFORE](https://fabriziobertoglio.s3.eu-central-1.amazonaws.com/opensource/react-native/17530/runtime.mp4)** | **[AFTER](https://fabriziobertoglio.s3.eu-central-1.amazonaws.com/opensource/react-native/17530/no_runtime.mp4)** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88069187-6edde400-cb71-11ea-81f2-1846144cc6c1.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88069503-d5630200-cb71-11ea-9b87-c5c49845c96d.png" width="300" height="" /> |
The below screenshots were taken to detect any issues with the EditText Background. There is no difference between master and feature branch.
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88071948-c0d43900-cb74-11ea-9a86-522b13e79f04.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074345-90da6500-cb77-11ea-8ced-8b34a3c5a299.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88071966-c598ed00-cb74-11ea-8db8-c07dce3a99b6.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074654-fcbccd80-cb77-11ea-961c-f39a60a1aa62.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88071989-cc276480-cb74-11ea-9eab-9ad4f858d0fb.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074673-00505480-cb78-11ea-8ff5-ea5fc9ef1b8e.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88072003-d0ec1880-cb74-11ea-9285-792b2dc08187.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074685-03e3db80-cb78-11ea-86a5-da2700826eea.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88072080-e7926f80-cb74-11ea-9f08-bb26eabbd5a0.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074866-4a393a80-cb78-11ea-9b37-80c019909d7d.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88072100-ed885080-cb74-11ea-8450-bafa2b7a9989.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074976-7359cb00-cb78-11ea-8bf3-d50566cbb3ba.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88072113-f1b46e00-cb74-11ea-9143-7e74872f2670.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074880-502f1b80-cb78-11ea-8bfc-f67efec283d3.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88072118-f547f500-cb74-11ea-8ba3-8a245fdf0bc3.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88074883-52917580-cb78-11ea-9230-71aeb5c35582.png" width="300" height="" /> |
| **BEFORE** | **AFTER** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88072139-fb3dd600-cb74-11ea-9212-485f788648f1.png" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/88075031-85d40480-cb78-11ea-8068-50f04ebbff54.png" width="300" height="" /> |
| **AFTER** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/88071330-f75d8400-cb73-11ea-800d-359336c8d51e.png" width="300" height="" />|
</p>
</details>
**<details><summary>CLICK TO OPEN TESTS RESULTS - React Native Cli</summary>**
<p>
As lean core move cli tools to https://github.com/react-native-community/cli, I tested the changes to the template in a separate repository https://github.com/fabriziobertoglio1987/react-native-template and generated the template with the following command
```
npx react-native init ProjectName --template file:///home/fabrizio/Documents/sourcecode/opensource/react-native-template/template
```
The generated app did not experience any issues and includes all the changes in [rn_edit_text_material.xml](https://github.com/fabriziobertoglio1987/react-native-template/blob/master/ProjectName/android/app/src/main/res/drawable/rn_edit_text_material.xml) and [styles.xml](https://github.com/fabriziobertoglio1987/react-native-template/blob/master/ProjectName/android/app/src/main/res/values/styles.xml)
</p>
</details>
The fix is pretty small.
So it seems to me you have two options and you do not need to eject. But you would need to use EAS Build.
1.) Use patch-package
to apply the patch from the above PR to react native during the build.
2.) Alternatively, write a Config Plugin to apply the workaround.
Hi Wodin thanks for your reply,
I’m trying to build using EAS, however the build generates a AAB file and I need a APK (I can’t use a play store).
I modified the eas.json following the doc , but when I use eas build only generate a AAB build.
This is my eas.json:
{
"cli": {
"version": ">= 0.43.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"android": {
"buildType":"apk"
},
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}
did you see any errors? I think I forgot something to do.
Thanks and kind regards.
wodin
January 11, 2022, 5:42pm
8
Build with eas build -p android --profile preview
or else you can add a build profile like this:
"build": {
"apk": {
"android": {
"buildType": "apk"
}
},
[...]
}
and then use eas build -p android --profile apk
Thanks Wodin, with your example I’ve created an apk with eas build etc…
However for some reason my app doesn’t work as expected (permanent loading), honestly, I don’t know what I’m doing wrong.
wodin
January 13, 2022, 5:03pm
10
Hard to say off hand. I suggest you have a look through the debugging documentation again. e.g. using adb logcat
might show you what’s wrong.
1 Like
fravara
January 14, 2022, 10:25am
11
I’ll do, also I’ll keep updating expo (and all dependeces), when expo upgrade rn version I’m sure the bug will be fixed. That’s frustrating but I hope this bug fixes asap. Thanks again Wodin.
1 Like
system
Closed
February 13, 2022, 10:25am
12
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.