react / react/react-native

iOS TextInput Component with nested text

Open
#30,834 7 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Needs: Triage :mag: Never gets stale
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

I have reported before (link) but no response and issue has been closed.

Description:

Hi there! I have just found a bug on iOS multiple TextInput with using nested text display, which not able to have the correct style in some special cases. (Android works fine with the same code.)
As I need to have different style for different text in the same the text input box, nested text is applied instead of changing the style in TextInput

React Native version: 0.61

Steps To Reproduce

  1. Start editing
  2. Type Chinese / Emoji FIRST
  3. type other wordings

Results

Start with Chinese wordings: style will be update after typing english / number
Start with Emoji: style won't be update

Expected Results

wordings will be having the style set, but still in default style

Code example:

<TextInput
   onChangeText={text => {
              this.setState({
                text
              })
            }}
>
   <Text style={{ color: 'red' }}>{this.state.text}</Text>
</TextInput>

Screenshot:

Normal case
image

Error case in which start with Chinese
image

Resume after typing english / number
image

Error case in which start with Emoji
image

I have a quick study and find that - (void)setAttributedText:(NSAttributedString *)attributedText from /node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.m is not called in the following case.

Thanks for your time and hope to hear feedbacks from your team!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the iOS behavior with the nested TextInput example, starting with Chinese text and emoji. Inspect node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.m, especially setAttributedText:. Done means the nested text style updates correctly for these inputs while preserving the expected default behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, objective-c, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.