How to include non-editable Text in TextInput?

Question

Summary

I want to have text next to the TextInput's value. This text should not be editable but also needs to be responsive, i.e., it moves as the content length of the TextInput changes so that is always X characters after the TextInput's value.

Current code

1. Having adjacent TextInput and Text components does not result in responsive behavior.

<View style={{flexDirection:"row"}}>
    <TextInput
        defaultValue={stringValue}
        {...props}
    />
    <Text>%</Text>
</View>

2. Modifying stringValue to add extra text means that it can be edited by the user.

newStringValue = stringValue + "%";

return (
    <View style={{flexDirection:"row"}}>
        <TextInput
            defaultValue={newStringValue}
            {...props}
        />
        <Text>%</Text>
    </View>
);

Desired behavior

1. The text should move as the length of TextInput's value changes.
2. The text is not editable and the cursor in TextInput cannot move through the adjacent text.

How can this be achieved?

Answer 1

Maybe something like utilizing onChangeText, checking the passed in value and editing it according to your needs? The user will be able to delete the percent sign, but it will reappear immediately.