React native flexbox - how to do percentages || columns || responsive || grid etc
React Native already has percentage support:
<View style={[style.parent]}>
<View style={[style.child, {backgroundColor: '#996666'} ]} />
<View style={[style.child, {backgroundColor: '#339966'} ]} />
<View style={[style.child, {backgroundColor: '#996633'} ]} />
<View style={[style.child, {backgroundColor: '#669933'} ]} />
</View>
var style = StyleSheet.create({
parent: {
width: '100%',
flexDirection: 'row',
flexWrap: 'wrap'
},
child: {
width: '48%',
margin: '1%',
aspectRatio: 1,
}
})
2 column layout with flexBox on React Native
It is possible if you use percentage values for the widths:
<View style={styles.container}>
<View style={styles.item}>
...
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start' // if you want to fill rows left to right
},
item: {
width: '50%' // is 50% of container width
}
})
How to use marginTop when view wrap to next row?
add marginTop on Your Button and customButtons
<Button style={{marginTop:5}} key={index}>{`${hour}:${minute}`}</Button>
Like this also add to customButton like <GrayButton/>
React Native - Vertical align image with resizeMode contain
Using resizeMethod="resize"
I've found a solution that doesn't requires any extra tags or tricks. Just one single prop.
Lore
I had the same issue because my image on remote is @3x the regular size. And once loaded on the phone with { height: 100, width: 300, resizeMode: 'contain' }
styling values, it centered automatically.
Example
To fix it, I've just added the prop resizeMethod
like the following :
<Image
style={{ height: 100, width: 300, resizeMode: 'contain' }}
source={{ uri: 'https://www.fillmurray.com/900/300' }}
resizeMode="contain"
resizeMethod="resize"
/>
TouchableOpacity does not work because it stays under another element's maskedView
I found the solution. Just adding pointerEvents="none"
to MaskedView props worked like magic. It was written in the docs. Who knew, right.
Create common style classes for JSS in material-ui
Figured it out. For future viewers:
const styles = theme => ({
...card(theme),
grid: {
height: '100%',
width: 'fit-content',
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2,
flexWrap: 'nowrap',
overflowY: 'hidden',
},
name: {
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: '1.12rem',
fontColor: theme.palette.text.main,
[theme.breakpoints.down('sm')]: {
fontSize: '0.9rem',
}
},
state: {
textOverflow: 'ellipsis',
margin: '0 auto',
marginTop: theme.spacing.unit / 2,
fontSize: '1.0rem',
fontColor: theme.palette.text.light,
[theme.breakpoints.down('sm')]: {
fontSize: '0.8rem',
}
},
alarmArmedHome: {
background: theme.palette.backgrounds.card.alarm.home,
},
alarmArmedAway: {
background: theme.palette.backgrounds.card.alarm.away,
},
alarmTriggered: {
background: theme.palette.backgrounds.card.alarm.triggered,
},
icon: {
margin: '0 auto',
color: theme.palette.text.icon,
fontSize: '2.7rem',
[theme.breakpoints.down('sm')]: {
fontSize: '1.7rem',
}
},
});
card.js
const styles = (theme) => ({
cardContainer: {
position: 'relative',
width: '50%',
padding: theme.spacing.unit / 2,
},
cardOuter: {
height: '100%',
width: '100%',
textAlign: 'start',
},
card: {
width: '100%',
background: theme.palette.backgrounds.card.off,
},
cardOn: {
background: theme.palette.backgrounds.card.on,
},
cardUnavailable: {
background: theme.palette.backgrounds.card.disabled,
},
cardContent: {
display: 'flex',
flexWrap: 'wrap',
minHeight: 98,
height: 98,
[theme.breakpoints.down('sm')]: {
minHeight: 74,
height: 74,
},
padding: `${theme.spacing.unit * 1.5}px !important`,
},
});
export default styles;
So you pretty much have to join the objects passing in the theme if required:
...card(theme),
Related Topics
How to Change the Id of a HTML Element with JavaScript
Why Doesn't JavaScript Newlines Work Inside HTML
JavaScript Show Element on Click
Serving High Res Images to Retina Display
Highcharts: Make the Legend Symbol a Square or Rectangle
How to Detect MAC Os Inverted Color Mode in JavaScript/Css
How to Position a Bootstrap Popover
How to Get a Dom Element's ::Before Content with JavaScript
Can You Do a JavaScript for Loop Inside of Less CSS
Different Color Bars for Flot Categories Bar Chart
Is There a Flexible Way to Modify the Contents of an Editable Element
Trying to Set a Span Element Equal to a Variable Value in a Js Rock, Paper, Scissors Game
Correct Way to Apply Global Styles into Shadow Dom
Use JavaScript to Click on a Pseudo-Element
Render Closing Tag Conditionally in Order to Emulate Calendar Behavior