In React Native how to create UI same as attached image? - react-native

Question

I have to create user interface same as attached image. I have to wrap the tabs according to size of text which is dynamic(may be of different size). How to do this in React Native Screenshot of UI

Answer 1

You can use react-native-selectmultiple-button module if you are using UI to select many things.
You can run npm install react-native-selectmultiple-button --save
Example
import {
SelectMultipleButton,
SelectMultipleGroupButton
} from "react-native-selectmultiple-button";
<SelectMultipleButton
buttonViewStyle={{
borderRadius: 10,
height: 40
}}
textStyle={{
fontSize: 15
}}
highLightStyle={{
borderColor: "gray",
backgroundColor: "transparent",
textColor: "gray",
borderTintColor: ios_blue,
backgroundTintColor: ios_blue,
textTintColor: "white"
}}
multiple={true}
value={interest}
selected={this.state.multipleSelectedData.includes(interest)}
singleTap={valueTap => this._singleTapMultipleSelectedButtons(interest)}
/>;
<SelectMultipleGroupButton
containerViewStyle={{
justifyContent: "flex-start"
}}
highLightStyle={{
borderColor: "gray",
backgroundColor: "transparent",
textColor: "gray",
borderTintColor: ios_blue,
backgroundTintColor: "transparent",
textTintColor: ios_blue
}}
onSelectedValuesChange={selectedValues =>
this._groupButtonOnSelectedValuesChange(selectedValues)
}
group={multipleGroupData}
/>;

Answer 2

hi #shivam tiwari this can be acheived in many ways. in that one of the best method is using .map function with parent view styles of flexdirection : row and flexWrap: 'wrap'
also take a boolean value selected for each item in the array initially to false and update the particular item to true or false based on selection.
Please check below example:
let industries = this.state.industries
for (let i = 0; i < industries.length; i++) {
industries[i].selected = false
}
this.setState({industries: industries})
<View style={{ flexDirection: 'row', flexWrap: 'wrap', margin: 10, marginTop: 5 }}>
{this.renderIndustry(this.state.preferredIndustry)}
and in renderIndustry method you can do .map functionality like
//RENDER INDUSTRY
renderIndustry(data) {
if (data.length === 0) {
return null
}
return data.map((item, index) => {
return (
<CardView
key={item.industryname}
style={[styles.cardView, { backgroundColor: item.selected ? '#4291E2' : '#F9FAFB', borderWidth: 1, borderColor: item.selected ? '#4291E2' : '#E0E8F1' }]}
cardElevation={item.selected ? 3 : 0}
cardMaxElevation={5}
cornerRadius={10}
cornerOverlap={false}
>
<TouchableWithoutFeedback onPress={() => { this.selectIndustry(item, index) }}>
<View style={{
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '100%',
backgroundColor: '#0000'
}}>
<Text style={{ fontSize: 14, color: item.selected ? '#fff' : '#000', margin: 15 }}>{item.industryname}</Text>
</View>
</TouchableWithoutFeedback>
</CardView>
);
});
}
and in onPress change the value of selected to true or false based on the previous value like....
//SELECT INDUSTRY
selectIndustry = (item, index) => {
let industries = this.state.industries
for (let i = 1; i <= industries.length; i++) {
if (industries[i - 1].industryid === item.industryid) {
industries[i - 1].selected = !industries[i - 1].selected
}
}
this.setState({ industries: industries })
}
HOPE this helps.... Happy coding!!

Answer 3

I searched for the solution and found a library named react-native-tag-select that fulfilled my requirement perfectly where I can customise the view according to my requirement. Thanks all who answered.
Adding some code sample:
Setup:
npm install --save react-native-tag-select
or
yarn add react-native-tag-select
Usage:
import { TagSelect } from 'react-native-tag-select';
export default class App extends React.Component {
render() {
const data = [
{ id: 1, label: 'Money' },
{ id: 2, label: 'Credit card' },
{ id: 3, label: 'Debit card' },
{ id: 4, label: 'Online payment' },
{ id: 5, label: 'Bitcoin' },
];
return (
<View style={styles.container}>
<TagSelect
data={data}
itemStyle={styles.item}
itemLabelStyle={styles.label}
itemStyleSelected={styles.itemSelected}
itemLabelStyleSelected={styles.labelSelected}
/>
</View>
);}