5

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

Thanks!

p-syche
  • 575
  • 1
  • 5
  • 17
  • It would be interesting if you would have posted some of the elements yourself (if applied) after reading official documentation. – mfaisalhyder Nov 06 '17 at 17:19
  • I read the [documentation](https://facebook.github.io/react-native/docs/layout-props.html), 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. – p-syche Nov 07 '17 at 12:12

2 Answers2

14

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

kamran
  • 382
  • 2
  • 14
  • This doesn't seem to be true.`space-evenly` doesn't work yet. See this Snack. https://snack.expo.io/S1VGnZwOf – GollyJer Mar 02 '18 at 17:46
  • 1
    sorry for being too late. @GollyJer 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`. – kamran Mar 11 '18 at 11:31
  • @GollyJer expo is yet using `RN 0.52` – kamran Mar 11 '18 at 11:42
7

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:

Ben Kane
  • 9,331
  • 6
  • 36
  • 58
  • This doesn't seem to be true.`space-evenly` doesn't work. See this Snack. https://snack.expo.io/S1VGnZwOf – GollyJer Mar 02 '18 at 17:46
  • 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 – Ben Kane Mar 03 '18 at 14:58
  • 1
    It is on v52. But, I discovered the feature isn't actually implemented but will be in the next React Native release. https://github.com/facebook/react-native/pull/17805 – GollyJer Mar 03 '18 at 19:29
  • Thanks to @GollyJer's link, updated to show this is available in 0.54+ – Anson Mar 05 '18 at 16:58