forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
RNTester Minimum Reproducible Example
A Minimum Reproducible Example that triggers the 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 following are the conditions that trigger the runtime error: 1) a large list (>100) TextInputs with key prop 2) with FlatList passing prop data=[{key: 1, key:2,.., key:5000]] 3) trigger re-render to ensure the NPE Runtime Error is triggered The example is built using hooks useEffect similar to componentDidMount. Original post is here facebook#17530 (comment)
- Loading branch information
1 parent
0858d41
commit 4a414e2
Showing
2 changed files
with
65 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @format | ||
* @flow | ||
*/ | ||
|
||
'use strict'; | ||
|
||
const React = require('react'); | ||
const {View, TextInput} = require('react-native'); | ||
const {useEffect, useState} = React; | ||
|
||
function TextInputKeyProp() { | ||
const [startKey, setStartKey] = useState(0); | ||
|
||
const updateKey = () => { | ||
setStartKey({ | ||
startKey: startKey + 100 | ||
}); | ||
}; | ||
|
||
useEffect(() => { | ||
const interval = setInterval(updateKey, 3000); | ||
return () => clearInterval(interval); | ||
}, []) | ||
|
||
const textInputs = []; | ||
for (let i = 0; i < 1000; i++) { | ||
const key = (startKey + i).toString(); | ||
console.log("key", key); | ||
// REMOVE KEY PROP TO FIX THIS | ||
textInputs.push( | ||
<TextInput | ||
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} | ||
key={key} /> | ||
); | ||
} | ||
|
||
return ( | ||
<View> | ||
{ textInputs } | ||
</View> | ||
); | ||
} | ||
|
||
exports.title = '<TextInputs with key prop>'; | ||
exports.description = 'Periodically render large number of TextInputs with key prop without a Runtime Error'; | ||
exports.examples = [ | ||
{ | ||
title: 'A list of TextInputs with key prop - Re-render every 3 seconds', | ||
description: | ||
'A list of TextInputs with key prop re-rendered every 3 seconds will trigger an NPE Runtime error.', | ||
render: function(): React.Node { | ||
return <TextInputKeyProp />; | ||
}, | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters