diff --git a/packages/rn-tester/android/app/src/main/AndroidManifest.xml b/packages/rn-tester/android/app/src/main/AndroidManifest.xml index e2e88576591989..8ee8ae3a352256 100644 --- a/packages/rn-tester/android/app/src/main/AndroidManifest.xml +++ b/packages/rn-tester/android/app/src/main/AndroidManifest.xml @@ -30,7 +30,7 @@ android:banner="@drawable/tv_banner" android:icon="@drawable/launcher_icon" android:label="@string/app_name" - android:theme="@style/Theme.ReactNative.AppCompat.Light" > + android:theme="@style/AppTheme"> + + + + + + + + + + diff --git a/packages/rn-tester/android/app/src/main/res/values/styles.xml b/packages/rn-tester/android/app/src/main/res/values/styles.xml index 62fe59fa485459..42c90f3e99a984 100644 --- a/packages/rn-tester/android/app/src/main/res/values/styles.xml +++ b/packages/rn-tester/android/app/src/main/res/values/styles.xml @@ -4,6 +4,7 @@ diff --git a/packages/rn-tester/js/examples/TextInput/TextInputKeyProp.js b/packages/rn-tester/js/examples/TextInput/TextInputKeyProp.js new file mode 100644 index 00000000000000..a16bcb87d0e2d5 --- /dev/null +++ b/packages/rn-tester/js/examples/TextInput/TextInputKeyProp.js @@ -0,0 +1,52 @@ +/** + * 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); + + useEffect(() => { + const interval = setInterval(() => setStartKey(startKey + 100), 3000); + return () => clearInterval(interval); + }, [startKey]); + + const textInputs = []; + for (let i = 0; i < 101; i++) { + const key = (startKey + i).toString(); + console.log('Adding a TextInput with key ' + key); + textInputs.push( + , + ); + } + + return {textInputs}; +} + +exports.title = 'TextInputs with key prop'; +exports.description = + 'Periodically render large number of TextInputs with key prop without a Runtime Error'; +exports.examples = [ + { + title: 'Long List of TextInputs with key props', + description: + '100 TextInputs are added every 3 seconds to the View. #29452 avoids a NPE Runtime Error. If you want to trigger the Runtime, change 101 to 1001 in RNTester/TextInputKeyProp.js and use an Emulator with 8GB of RAM. This example is only meant to verify no RuntimeError is triggered. To test TextInput functionalities use the example.', + render: function(): React.Node { + return ; + }, + }, +]; diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index 18b9106ad92b3f..92cd28d26eaf7e 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -105,6 +105,10 @@ const Components: Array = [ category: 'Basic', module: require('../examples/TextInput/TextInputExample'), }, + { + key: 'TextInputs with key prop', + module: require('../examples/TextInput/TextInputKeyProp'), + }, { key: 'TouchableExample', category: 'UI', diff --git a/template/android/app/src/main/res/drawable/rn_edit_text_material.xml b/template/android/app/src/main/res/drawable/rn_edit_text_material.xml new file mode 100644 index 00000000000000..f35d9962026a85 --- /dev/null +++ b/template/android/app/src/main/res/drawable/rn_edit_text_material.xml @@ -0,0 +1,36 @@ + + + + + + + + + + + diff --git a/template/android/app/src/main/res/values/styles.xml b/template/android/app/src/main/res/values/styles.xml index 24bc061368750c..7ba83a2ad5a2c9 100644 --- a/template/android/app/src/main/res/values/styles.xml +++ b/template/android/app/src/main/res/values/styles.xml @@ -3,6 +3,7 @@