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

CodePudding user response：

pass multiline={true} as <TextInput> props : multiline

CodePudding user response：

You can add flexWrap : 'wrap' property to your View component of renderMultipleSearch function. This will allow TextInput inside the View component to be properly wrapped to the height of View.