Flex Box Styling

Question

I have a problem with styling 3 nested components.

Background: I want the user to enter tags. On testing it became clear, that many user, didn't know that they have to press space to save the tag (a problem, when a user only wants to enter one tag).

As a solution, as soon as the user presses on the textinput I want to display a trailing hint, to press space to save (leertaste zum speichern = space to save), which is displayed after the userinput.

The problem is as seen on the gif https://gfycat.com/harmoniousgorgeousdikkops

The textinput grows and the hint stays behind the text, as expected, but at some point my hint is leaving the container component, while my textinput behaves normally.

Expected behavior is that the hint is always visible and the textinput grows as long as this is given (thus never pushing the hint out of the screen, or changing it's design). Visually it is when I pause during the gif.

Code:

<View
                    style={{
                        flexDirection: 'row',
                        backgroundColor: COLOR_GREY_BACKGROUND,
                        borderRadius: BORDER_RADIUS,
                        height: TEXTINPUT_HEIGHT,
                        marginRight: MARGIN_TO_DISPLAY_EDGE,
                        width: DIMENSION_WIDTH - 2 * MARGIN_TO_DISPLAY_EDGE,
                        flexWrap: 'nowrap',
                    }}
                >
                    <Text
                        style={{
                            fontSize: FONT_SIZE_TEXT_INPUT,
                            ...FONT_OPENSANS_SEMI_BOLD,
                            paddingTop: 1,
                            paddingRight: 0,
                            marginLeft: 5,
                        }}
                    >
                        #
                    </Text>
                    <View style={{ flexDirection: 'row', flex: 1 }}>
                        <TextInput
                            style={[styles.textInputText]}
                            placeholder={placeholder}
                            onChangeText={(text) =>
                                onChangeText(text.toLowerCase())
                            }
                            value={value}
                            autoCapitalize="none"
                            autoCorrect={false}
                            onFocus={() => setTextInputFocus(true)}
                        />
                        <View style={{ justifyContent: 'flex-end' }}>
                            <Text
                                style={[
                                    styles.textInputText,
                                    {
                                        paddingLeft: 0,
                                        fontSize: FONT_SIZE_SECONDARY_TEXT,
                                        color: COLOR_GREY_TEXT_BACKGROUND,
                                    },
                                ]}
                            >
                                {T('spaceToSave')}
                            </Text>
                        </View>
                    </View>
                </View>

the missing style :

textInputText: {
        fontSize: FONT_SIZE_TEXT_INPUT,
        ...FONT_OPENSANS_SEMI_BOLD,
        //paddingRight: TEXTINPUT_PADDING,
        paddingTop: TEXTINPUT_PADDING,
    }

(The # is added so its clearer for the user what to do without having him to enter it). Should it be unclear, what I am trying to do, please let me know. Thanks a lot for your help!