Skip to content

Commit

Permalink
RNTester Minimum Reproducible Example
Browse files Browse the repository at this point in the history
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
fabOnReact committed Jul 21, 2020
1 parent 0858d41 commit 4a414e2
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 0 deletions.
61 changes: 61 additions & 0 deletions RNTester/js/examples/TextInput/TextInputKeyProp.js
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 />;
},
},
];
4 changes: 4 additions & 0 deletions RNTester/js/utils/RNTesterList.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,10 @@ const ComponentExamples: Array<RNTesterExample> = [
key: 'TextInputExample',
module: require('../examples/TextInput/TextInputExample'),
},
{
key: 'TextInputs with key prop',
module: require('../examples/TextInput/TextInputKeyProp'),
},
{
key: 'TouchableExample',
module: require('../examples/Touchable/TouchableExample'),
Expand Down

0 comments on commit 4a414e2

Please sign in to comment.