Description
Description
The general idea is to create a <TextInput> with a bolded text for a user's name, like you might see on Slack or Instagram etc: **@someone** hello world.
This is done in my React Native app using a <TextInput> with two <Text> components inside it. The first <Text> component has a bold style, while the second <Text> has no special style.
If I change the text string inside the second text, the behavior differs. Sometimes, I tap on the end of the TextInput, and the style of the second text changes to match the style of the first one. That's wrong. The style should not change. With other strings, the style does not change, and that is the expected behavior.
So, the behavior is inconsistent and unexpected, which indicates a bug in <TextInput>.
Sample code:
<View style={{paddingHorizontal: 24, borderColor: 'black', borderWidth: 2, margin: 2, borderRadius: 2}}>
<TextInput multiline>
<Text style={{"fontWeight":"bold","color":"blue","backgroundColor":"white"}}>David Tabaka</Text>
<Text> The quick brown fox jumped over the lazy dog and the</Text>
</TextInput>
</View>
The bug is causing problems in another public project as well as in my own project - https://github.com/dabakovich/react-native-controlled-mentions
React Native Version
0.70.9
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
Memory: 5.27 GB / 46.77 GB
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 6.14.17 - ~/.nvm/versions/node/v14.20.0/bin/npm
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 23, 26, 27, 28, 29, 30, 31, 32, 33
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0
System Images: android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-29 | Android TV Intel x86 Atom, android-29 | ARM 64 v8a, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play ARM 64 v8a, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64, android-32 | Google APIs Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.9 => 0.70.9
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
Create the example default project for React Native.
Add the following code snippet. Make sure not to add it inside a <Section> component, which will confuse the issue.
<View style={{paddingHorizontal: 24, borderColor: 'black', borderWidth: 2, margin: 2, borderRadius: 2}}>
<TextInput multiline>
<Text style={{"fontWeight":"bold","color":"blue","backgroundColor":"white"}}>David Tabaka</Text>
<Text> The quick brown fox jumped over the lazy dog</Text>
</TextInput>
</View>
<View style={{paddingHorizontal: 24, borderColor: 'black', borderWidth: 2, margin: 2, borderRadius: 2}}>
<TextInput multiline>
<Text style={{"fontWeight":"bold","color":"blue","backgroundColor":"white"}}>David Tabaka</Text>
<Text> The quick brown fox jumped over the lazy dog and the</Text>
</TextInput>
</View>
Now run the app on an Android device (I'm using a Samsung A71).
Tap the first TextInput at the end. You will see nothing strange happen - the styles do not change, which is correct.
Next, tap the second TextInput at the end. You will see the style of the first Text get applied to the second Text (see video recording attached). That's the bug.
Snack, code example, screenshot, or link to a repository
Here's a repo that demos the issue.
https://github.com/fullStackOasis/react-native-styled-text-in-textinput
That repo can be used to demo the issue. It also contains a screenrecording in the README. The screenshot below shows how the second Text has had its style changed after tapping at the end of the TextInput as described.
