justifyContent: 'space-evenly' in React Native

Question

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

Thanks!

Answer 1

As mentioned by @Ben, you can use justifyContent: 'space-evenly' since RN 0.54.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

Answer 2

justifyContent: 'space-evenly' is available in React Native 0.54.0+. You can use the feature as you would any other justifyContent value. For example:

<View style={styles.spaceEvenlyContainer}>
  {children}
</View>

const styles = StyleSheet.create({
  spaceEvenlyContainer: {
    flex: 1,
    justifyContent: 'space-evenly'
  }
});

For details, see the following:

• 0.52.0 Release Notes that introduce the feature (mistakenly - it was not fully implemented yet)
• Commit 1050e0b that partially implements the feature
• Pull Request #17805 that finishes the feature implementation
• 0.54.0 Release Notes that release the feature