( android )TextInput contains Image and Text, Text can't display while Image at first position

[wo883721]

I have a demand, TextInput contains Image and Text.but I find a bug,when Image at first position, I add Text, Text can't display.
I debugging android source. I find one possible reason. In ReactEditText class, the maybeSetText() function set new content, and call manageSpans method that can reset ReactEditText.getText(). but in this method don't remove FrescoBasedReactTextInlineImageSpan.

if (ForegroundColorSpan.class.isInstance(spans[spanIdx]) ||
BackgroundColorSpan.class.isInstance(spans[spanIdx]) ||
AbsoluteSizeSpan.class.isInstance(spans[spanIdx]) ||
CustomStyleSpan.class.isInstance(spans[spanIdx]) ||
ReactTagSpan.class.isInstance(spans[spanIdx])) {
getText().removeSpan(spans[spanIdx]);
}
So ReactEditText.getText() always contain FrescoBasedReactTextInlineImageSpan, Image coverage text display.How can fix this bug?
Please forgive me for not being fluent in English

[react-native-bot]

@facebook-github-bot no-template

[facebook-github-bot]

Hey @wo883721, thanks for posting this! It looks like your issue is missing some required information. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce your issue. I am going to close this, but please feel free to open a new issue with the additional information provided. Thanks!

_{How to Contribute • What to Expect from Maintainers}

[wo883721]

Hey @facebook-github-bot ,maybe there's something wrong with my description.this bug is all react-native editions. Follow the operation below: create a js file
1. this render method: I only return TextInput,but it's first child is Image, and this.state.extraText dynamically added content。
render() {
return(

<View style={{ height: 50 , marginTop: 20, backgroundColor: '#00f00f'}}>
<TextInput style={{ height: 50 }} multiline onTextInput={this.onTextInput}>
<Image style={{ height: 30 }} source={require('../resource/images/print_dh.png')} />
{this.state.extraText}


) }
2.this onTextInput method: I only use text arguments, and change state.
onTextInput = (e) => { const { previousText, text, range: { start, end }} = e.nativeEvent
this.setState({ extraText: text }) }
At first, the page is displayed correctly,the Image node display.But when I add text,the onTextInput method invoked,this.state.extraText value changed. Then the magic phenomenon appeared,this.state.extraText value can't display in TextInput.

[wo883721]

@react-native-bot ,The above statement is only a case, I discover When TextInput contains Image, as long as Image move to the first position, these Text node in TextInput can't display,only display image.
I debugging android source,and discover the cause of the problem. the TextInput mapping the ReactTextInputManager.java. when user change TextInput content, the updateExtraData method at the ReactTextInputManager will invoke. and this method will can view.maybeSetText(update) method in the ReactEditText.
In the public void maybeSetText(ReactTextUpdate reactTextUpdate) method,we will handle the ReactEditText mText field. this field is SpannableStringBuilder type. the manageSpans() method will invoke.
In the private void manageSpans(SpannableStringBuilder spannableStringBuilder) method, should change the ReactEditText mText field, remove some spans at mText field,but:
if (ForegroundColorSpan.class.isInstance(spans[spanIdx]) ||
BackgroundColorSpan.class.isInstance(spans[spanIdx]) ||
AbsoluteSizeSpan.class.isInstance(spans[spanIdx]) ||
CustomStyleSpan.class.isInstance(spans[spanIdx]) ||
ReactTagSpan.class.isInstance(spans[spanIdx])) {
getText().removeSpan(spans[spanIdx]);
}
This judgment can't remove FrescoBasedReactTextInlineImageSpan, so FrescoBasedReactTextInlineImageSpan always stop in the mText field. when ReactEditText content change than constantly adding new FrescoBasedReactTextInlineImageSpan.

[wo883721]

@react-native-bot when Image is not at first position, these FrescoBasedReactTextInlineImageSpans is correct at the mText field that old FrescoBasedReactTextInlineImageSpans is Invalid.But Image is at first position,these FrescoBasedReactTextInlineImageSpans at the mText field has an error occurred. because the Image mapping FrescoBasedReactTextInlineImageSpans start position and end position is not correct.

[wo883721]

@react-native-bot I study react-native for a few months, I like this kind of development. So when I find this bug,I spend a day to debug this bug,but I didn't find the final cause. Only found the wrong places and possible reasons. That's all I can do.