React Native Textinput growing beyond parent view-CodePudding

I´m currently fighting with my Textinput to NOT grow beyond the parent view. My current component looks like this:

return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <View style={styles.inputContainer}>
          <TextInput style={styles.textInput}
          placeholder="Eigene erstellen"
          onChangeText={(text) => onChange(text)}
          maxLength= {35}/>
          <TouchableOpacity style={{alignSelf: "center"}}>
            <Icon name="arrow-right-circle-outline" color={color} size={30}/>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );

with the following styles:

container: {
    flex: 1,
    backgroundColor: Colors[theme]['primary'],
  },
  scrollContainer:{
    paddingVertical: 25,
    paddingHorizontal: 20,
  },
  inputContainer:{
    flex: 1,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "transparent",
    borderBottomWidth: 1,
    borderBottomColor: Colors.darkgrey,
  },
  textInput:{
    height: 40,
    fontSize: 18,
    color: Colors.white,
  },

The problem is that when the text inside Textinput is too big it pushes the Icon beyond the "inputContainer" border and grows until the Icon reaches the end of the whole screen.

But it SHOULD be looking like this (you can see the intended size of inputContainer by the bottomborder):

Example

I already tried some things with flex or setting the width to 100%, but nothing worked. Since I am kinda new to React Native I dont know what to do anymore.

Thanks in advance

CodePudding user response：

You can give flex property to the textInput.

  textInput:{
    height: 40,
    fontSize: 18,
    color: Colors.white,
    flex: 1
  },