[TextInput] Nested Text Components not able to have different Colors [iOS]

[borstessi]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

My project is a social network and I am currently encountering the following problem: I have a TextInput which is meant for comments, when the user enters his text he can mark other people. These are marked by an @username and are blue in color.

Inside the TextInput I render a text component which is divided into smaller parts which are also all text components to show the different colors.

Unfortunately this only works on Android and not on iOS.

React Native version:

Binaries:
Node: 10.18.1 - /usr/local/opt/node@10/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/opt/node@10/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 13.0.2 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. TextInput
2. Nested Text Component with Nested Text Component inside
3. Nested inside the TextInput like -> ()
4. Change the value of input with variables that make the text change its color

Expected Results

The nested Text inside the TextInput should be able to have different colors on iOS like on Android.

Snack, code example, screenshot, or link to a repository:

Code Example:

convertTextToColors(_text) {
//define delimiter
const delimiter = /\s+/;

    let token,
        index,
        parts = [];
    while (_text) {
        delimiter.lastIndex = 0;
        token = delimiter.exec(_text);
        if (token === null) {
            break;
        }
        index = token.index;
        if (token[0].length === 0) {
            index = 1;
        }
        parts.push(_text.substr(0, index));
        parts.push(token[0]);
        index = index + token[0].length;
        _text = _text.slice(index);
    }
    parts.push(_text);

    //highlight hashtags
    let i = 0;
    parts = parts.map(text => {
        i++;
        if (/^@/.test(text)) {
            return (
                <Text key={text + i} style={{ color: Colors.blue }}>
                    {text}
                </Text>
            );
        } else if (/^#/.test(text)) {
            return (
                <Text key={text + i} style={{ color: Colors.yellow }}>
                    {text}
                </Text>
            );
        } else {
            return text;
        }
    });

    return parts;
}

<TextInput

                        ref={ref => (this.textInput = ref)}
                        style={{
                            backgroundColor: Colors.black,
                            height: this.state.inputHeight,
                            flex: 1,
                            fontSize: 15,
                          
                        }}
                        maxLength={1000}
                        onChangeText={text => this.updateText(text)}
                        multiline={false}
                        autoCapitalize={'none'}
                        underlineColorAndroid={'transparent'}
                        returnKeyType={'send'}
                        keyboardAppearance={'dark'}
                        blurOnSubmit={true}
                        onSubmitEditing={() => this.submit()}
                        onFocus={() => this.onFocus()}
                        onBlur={() => this.onBlur()}
                        onContentSizeChange={e =>
                            this.updateSize(
                                e.nativeEvent.contentSize.height
                            )
                        }
                        placeholder={App.trans('form.text.write_something')}
                        placeholderTextColor={Colors.grayLight}
                    >
                        <Text style={{ fontSize: 15 }}>
                            {this.convertTextToColors(
                                this.state.text
                            )}
                        </Text>
                    </TextInput>

[benb7760]

@sanborN93 I also encountered this issue and found that setting multiline={true} resolves the issue in my case

[borstessi]

@sanborN93 I also encountered this issue and found that setting multiline={true} resolves the issue in my case

It resolves the issue! But that can't be the solution. There will be a case where someone doesnt want to use a multiline textinput but still want to have the feature.Implementation should be the same as on Android.

[YaoHuiJi]

@sanborN93 I also encountered this issue and found that setting multiline={true} resolves the issue in my case

there will be another issue if you set multiline={true} , the default color of placeholder can not be set correctly when theme changes from light to dark, it will be all right without multiline={true}, is it a bug?

update:
it's not fixed, but you can set your own color via placeholderTextColor to make it work.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.