Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Two differently styled Text components inside a TextInput display the same style sometimes #37502

Open
fullStackOasis opened this issue May 20, 2023 · 9 comments
Open

Two differently styled Text components inside a TextInput display the same style sometimes #37502

fullStackOasis opened this issue May 20, 2023 · 9 comments
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Attention Issues where the author has responded to feedback. Needs: Triage 🔍 Newer Patch Available

Comments

@fullStackOasis
Copy link

fullStackOasis commented May 20, 2023 •
edited
Loading

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.

image
@github-actions github-actions bot added the Component: TextInput Related to the TextInput component. label May 20, 2023
@fullStackOasis
Copy link
Author

My only test devices are Samsung mobile phones. The bug happens on a Samsung Galaxy A71 5G and a Samsung Galaxy A32 5G.

I tried this with the emulator -avd Pixel_5_API_32 and the bug doesn't happen there.

@fullStackOasis fullStackOasis mentioned this issue May 20, 2023
Open
@fullStackOasis
Copy link
Author

Anyone?

@fullStackOasis
Copy link
Author

Is there something I can do to help get this triaged?

@cortinico
Copy link
Contributor

Could you try this on the latest stable version of React Native?

@cortinico cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Author Feedback Newer Patch Available labels May 31, 2023
@github-actions
Copy link

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@fullStackOasis
Copy link
Author

@cortinico Thank you for taking a look!
The issue also occurs on React Native 0.71.

I tried to upgrade my sample project, but it wasn't a clean upgrade. Instead, I built a new project and applied the few small changes need to demo the issue. So I did this:

nvm use 14.20.0
npx react-native init StyledTextInTextInput71 --version 0.71

Then I applied the few minor changes to App.tsx.

Project uses React Native 0.71.10. There's video in my new demo project that shows the exact same bug occurring. Here's a new link to my demo project:
https://github.com/fullStackOasis/react-native-styled-text-in-textinput-71

The new output of npx react-native info is here:

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: 1.81 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.19 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.10 => 0.71.10 
  npmGlobalPackages:
    *react-native*: Not Found

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Jun 10, 2023
@fullStackOasis
Copy link
Author

Anything I can do to help?

@cortinico
Copy link
Contributor

Anything I can do to help?

I'd say the best at this point would be to try to fix this issue and send us a PR as that would highly increase the chances of getting this fixed

@hanarotg
Copy link

hanarotg commented Aug 4, 2023

That's very strange, I don't get that bug on my S21.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Attention Issues where the author has responded to feedback. Needs: Triage 🔍 Newer Patch Available
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cortinico @hanarotg @fullStackOasis