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!

Lavonda

It would be interesting if you would have posted some of the elements yourself (if applied) after reading official documentation. – Genitive

I read the documentation, but I couldn't find anything about 'space-evenly'. I was wondering if this was an oversight or if this element was not implemented on purpose. – Lavonda

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

Arched

This doesn't seem to be true.space-evenly doesn't work yet. See this Snack. snack.expo.io/S1VGnZwOf – Butyrin

sorry for being too late. @Butyrin you were right. As mentioned below by @Ben Kane space-evenly was introduced in documentation of RN 0.52.0 and is now implemented in RN 0.54.0. – Arched

@Butyrin expo is yet using RN 0.52 – Arched

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

Berkshire

This doesn't seem to be true.space-evenly doesn't work. See this Snack. snack.expo.io/S1VGnZwOf – Butyrin

I’m guessing Snack currently uses a version of RN older than 0.52.0? I haven’t tried this in simulator yet, but I’ll verify that it works later – Berkshire

It is on v52. But, I discovered the feature isn't actually implemented but will be in the next React Native release. github.com/facebook/react-native/pull/17805 – Butyrin

Thanks to @GollyJer's link, updated to show this is available in 0.54+ – Leyva