not able to wrap the components in reactnative

Question

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

score 1 · Answer 1 · answered Jan 25 '22 at 21:57

1

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.

answered Jan 25 '22 at 21:57

Sneh Sagar Rajput

46
4

Thank you mate ! It's working but now the issue is that when i select the 4th item the input should be beside item 4 but the input is coming below item 4. Please help me with this. i am attaching the screen shot: [link] (https://imgur.com/yDOTlIO) – Shail Patel Jan 26 '22 at 05:04
You can adjust the width of TextInput either with flex or width property to adjust its position. – Sneh Sagar Rajput Jan 26 '22 at 17:56
I got the answer mate. Thanks for helping though – Shail Patel Jan 28 '22 at 10:12

score 1 · Accepted Answer · answered Jan 26 '22 at 06:30

1

keep tagview and inputText in the same parent

answered Jan 26 '22 at 06:30

Vyom

26
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 26 '22 at 08:12
Thank you mate .! this actually worked for me. I made a separate view for tag view and that caused the problem – Shail Patel Jan 26 '22 at 09:13

not able to wrap the components in reactnative

2 Answers2