not able to wrap the components in reactnative

So i am making a

custom multiple select component

. when you click on the TextInput the dropdown will appear(the items in the dropdown comes from flatlist component) and from that drop down you can search the item you want to select and after selecting a tag will appear beside the input field. This selected tag is also comming from the flatlist

The problem is that after I select 3 items (three tags will be appearing) and go for the 4th one than the TextInput should come to new row.

index.js

const renderSelectView = (props) => {
return (
    <View style={styles.searchView}>
      {renderSelectionType(props)}
      {renderIcon(props)}
    </View>
}

const renderIcon = (props) => {
 return (
    <View>
          <Image
            source={require('images/right.png')}
            style={[styles.arrowIcon, {transform: [{rotate: '90deg'}]}]}
          />
    </View>
  );
}

const renderSelectionType =(props) => {
      return renderMultipleSearch(props);
}

const renderMultipleSearch =(props) => {
return (
    <View style={{flexDirection: 'row'}}>
      {renderTags(props)}
      {renderInputField(props)}
    </View>
  );
}

const renderTags =(props) => {
return multipleSelectedItem.length > 0 ? (
    <View>
      <FlatList
        data={multipleSelectedItem}
        keyExtractor={item => {
          return item.id;
        }}
        extraData={true}
        scrollEnabled={false}
        numColumns={3}
        horizontal={false}
        renderItem={({item}) => {
          return (
            <View style={styles.tagsView}>
              <Text style={styles.tagsText}>{item.value}</Text>
              <TouchableOpacity
                onPress={() => {
                  renderFilterList(
                    item.id,
                    item.value,
                    multipleSelectedItem,
                    setMultipleSelectedItem,
                  );
                }}>
                <Image
                  source={require('images/close.png')}
                  style={styles.closeIcon}
                />
              </TouchableOpacity>
            </View>
          );
        }}
      />
    </View>
  )
}

const renderInputField = (props) => {
 return (
    <View style={{flexShrink: 1, flexDirection: 'row'}}>
      <TextInput
        onChangeText={text => {
          handleSearch(text, setSearchQuery, data, setFilteredData);
        }}
        placeholder={selectedItem.value || null}
        placeholderTextColor={showState ? null : 'black'}
        onPressIn={() => {
          if (!showState) {
            setShowState(true);
          }
          setFilteredData(data);
        }}
        style={styles.renderInputField}
      />
    </View>
  );
}

Styles.js

import {StyleSheet, Dimensions} from 'react-native';

export default StyleSheet.create({
  searchView: {
    width: Dimensions.get('window').width - 40,
    marginVertical: 10,
    height: Dimensions.get('window').height - 790,
    borderRadius: 20,
    paddingLeft: 10,
    paddingVertical: 15,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    overflow: 'hidden',
    justifyContent: 'space-between',
  },
  arrowIcon: {
    marginRight: 20,
  },
  dropdownView: {
    width: Dimensions.get('window').width - 40,
    backgroundColor: '#fff',
    height: 150,
  },
  dropdownItem: {
    marginTop: 10,
    height: 30,
    justifyContent: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  divider: {
    width: '99%',
    alignItems: 'center',
    height: 1,
    backgroundColor: 'grey',
    marginTop: 9,
  },
  tagsView: {
    alignSelf: 'flex-start',
    backgroundColor: 'grey',
    padding: 12,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 5,
  },
  tagsText: {
    color: 'red',
  },
  closeIcon: {
    height: 10,
    width: 10,
    marginLeft: 10,
  },
  selectedItem_Text_View: {
    flexDirection: 'row',
  },

  pickerText: {
    width: Dimensions.get('window').width - 100,
  },
});

So i want that textinput to come down to another row if i select 4th item

Answer

keep tagview and inputText in the same parent