I'm trying to wrap my flat list and trying to show an Icon after last index of Flatlist. I had tried but it works fine on a single row. when we data goes to next row it would not work.
Here is my flat list code. Modal and Input both are my custom component.
const renderItem = ({item}) => { return (<TouchableOpacity style={[styles.tagPostContainer, styles.viewTagContainer]}><AppText type={'input'} label={`#${item}`} color={colors.placeholder} containerStyle={[styles.tagPostInactiveTxt, styles.BgAddedTag]} /></TouchableOpacity> );};return(<><View style={{flexDirection:'row',justifyContent:'flex-start'}}><FlatList data={tags} renderItem={renderItem} keyExtractor={keyExtractor} contentContainerStyle={styles.TagFlatlist} /><TouchableOpacity style={styles.plusIconContainer} onPress={() => setVisible(true)}><CreateBuildIconFocus height={13} width={13} /></TouchableOpacity></View><Modal visible={visible} buttonLabel={'Done'} containerWidth={width / 1.7} onCancel={onCancel} onSubmit={onClick} containerHeight={Platform.OS === 'android' ? 200 : 200}><Input placeholder={'Add Tags'} autoFocus={true} minWidth={120} maxWidth={150} value={tag} onChangeText={text => setTag(text)} /></Modal></>)FlatList styles:
TagFlatlist: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center',},
