How to set maxWidth in mobile screen? - css

Question

I am trying to render few buttons in a row, but having some problem with css style. how can i set maxwidth in mobile screen? this is screen short of my problem
I want to set a css style when maxwidth are over then rest of the button are show in a new row automatically is its possible to render in react-native???
My source code::
import React from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { Header, Icon } from 'react-native-elements';
class Extras extends React.Component {
constructor(props){
super(props);
this.state = { selectFurnish: '', selectVeg: '', selectOtherFecility: '' };
this.onButtonPress = this.onButtonPress.bind(this);
}
leftComponent = () => {
return <Icon name='angle-left' color='#fff' type='font-awesome' onPress={() => {this.props.navigation.navigate('pricing')}} />
}
onButtonPress = (stateName, selected) =>{
const obj = Object.assign({},this.state);
obj[stateName] = selected;
this.setState( obj );
}
render() {
const furnish_button_props = [
{ id: 0, value: 'Full'},
{ id: 1, value: 'Semi'},
{ id: 2, value: 'None'}
];
const veg_button_props = [
{ id: 0, value: 'Yes'},
{ id: 1, value: 'No'}
];
const otherFacilities_button_props = [
{ id: 0, value: 'Parking'},
{ id: 1, value: 'Lift'},
{ id: 2, value: 'Gas Pipeline'},
{ id: 3, value: 'Pool'}
];
return(
<View style={styles.container}>
<Header
leftComponent={this.leftComponent()}
centerComponent={{text: 'NEW LISTING', style: {color: '#FFF', fontSize: 16}}}
outerContainerStyles={{backgroundColor: '#3498db'}}
/>
<View style={styles.block}>
<View>
<Text style={styles.textType}>Furnishing</Text>
<View style={{flexDirection: 'row'}}>
{furnish_button_props.map(i => {
return(
<TouchableHighlight
activeOpacity={1}
onPress={() => this.onButtonPress('selectFurnish',i.value)}
key={i.id}
style={ this.state.selectFurnish === i.value ? styles.buttonOnPress : styles.button }
>
<Text style={ this.state.selectFurnish === i.value ? styles.textOnPress : styles.text }>{i.value}</Text>
</TouchableHighlight>
)
})}
</View>
</View>
<View style={{marginTop: 50}}>
<Text style={styles.textType}>Vegetarian</Text>
<View style={{flexDirection: 'row'}}>
{veg_button_props.map(i => {
return(
<TouchableHighlight
activeOpacity={1}
onPress={() => this.onButtonPress('selectVeg', i.value)}
key={i.id}
style={ this.state.selectVeg === i.value ? styles.buttonOnPress : styles.button }
>
<Text style={ this.state.selectVeg === i.value ? styles.textOnPress : styles.text }>{i.value}</Text>
</TouchableHighlight>
)
})}
</View>
</View>
<View style={{marginTop: 50}}>
<Text style={styles.textType}>Other Facilities</Text>
<View style={{flexDirection: 'row'}}>
{otherFacilities_button_props.map(i => {
return(
<TouchableHighlight
activeOpacity={1}
onPress={() => this.onButtonPress('selectOtherFecility', i.value)}
key={i.id}
style={ this.state.selectOtherFecility === i.value ? styles.buttonOnPress : styles.button }
>
<Text style={ this.state.selectOtherFecility === i.value ? styles.textOnPress : styles.text }>{i.value}</Text>
</TouchableHighlight>
)
})}
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
maxWidth: '100%'
},
block: {
marginTop: 120,
marginLeft: 10
},
textType: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5,
marginLeft: 5
},
button: {
borderColor: '#3498db',
borderWidth: 1,
borderRadius: 25,
width: 100,
height: 50,
marginLeft: 5,
marginRight: 5,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
buttonOnPress: {
borderColor: '#3498db',
backgroundColor: '#3498db',
borderWidth: 1,
borderRadius: 25,
width: 100,
height: 35,
marginLeft: 5,
marginRight: 5
},
text: {
fontSize: 14,
color: '#3498db'
},
textOnPress: {
fontSize: 14,
fontWeight: 'bold',
color: '#ffffff'
},
});
export default Extras;

Answer 1

You can add: flexWrap: 'wrap' to your view (<View style={{flexDirection: 'row'}}>)
More about flex