justifyContent: 'space-evenly' in React Native

react-native react-native-flexbox
p-syche picture p-syche · Nov 6, 2017 · Viewed 13.2k times · Source

Can I use the justifyContent: 'space-evenly' on any elements in React Native? On which ones? What should the syntax look like?

Thanks!

Answer

kamran picture kamran · Jan 14, 2018

As mentioned by @Ben, you can use justifyContent: 'space-evenly' since RN 0.52.0+.

for second part of your question i.e. "on which ones?"

Justify Content
Adding justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, and space-between. link to docs

So, logically it should be used to container views or elements to layout it's children along the primary axis.

for the third part of the question "What should the syntax look like?"

syntax is simple and you can use it like

<View style={{justifyContent: 'space-evenly'}}>children views...</View>

for further details about justifyContent you can visit this link

Related questions

Make an item stick to the bottom using flex in react-native

Suppose this is the layout: <View style={styles.container}> <View style={styles.titleWrapper}> ... ... </View> <View style={styles.inputWrapper}> ... ... </View> <View style={styles.footer}> <TouchableOpacity> <View …

Read More
React-Native: Margin with percentage value

I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute value, there is no …

Read More
React-native: how to wrap FlatList items

I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wrap like …

Read More