title: Evenly Space Visible React Native ScrollView Elements
body: <p>I currently have a ScrollView that lists text items. I am paginating it with 4 items on each page. For an example, I list out the month names, and this works well because 12 is divisible by 4. I get 3 pages, 4 items per page, where the items are spaced equally. I do this using justifyContent: 'space-around'. This makes my example work for the purpose of showing how I'd like things to be aligned, but it isn't flexible when there are more items</p>
  
  <p>If I add an extra text element called "ALL" at the beginning, what I would like is All-March on page 1, evenly spaced. Apr-July on page 2 looking the same, Aug-Nov on page 3 the same, and Dec by itself on page 4, on the left side. I have added a snack as well as the code below. Hopefully I have provided enough details.</p>
  
  <p><a href="https://snack.expo.io/PjQ0EG6eq" rel="nofollow noreferrer">https://snack.expo.io/PjQ0EG6eq</a></p>
  
  <pre><code>import React, {Component} from "react";
  import {
    View,
    ScrollView,
    useWindowDimensions,
    StyleSheet,
    Text
  } from "react-native";
  import moment from "moment"
  
  const HorizontalTextCarousel = props =&gt; {
    const numberOfItems = React.Children.count(props.children);
    const itemsPerInterval = props.itemsPerInterval ? props.itemsPerInterval : 4;
  
    const [width, setWidth] = React.useState(0);
    const [totalIntervals, setTotalIntervals] = React.useState(0);
  
    const adjustContent = w =&gt; {
      setWidth(w);
      let t = Math.ceil(numberOfItems / itemsPerInterval);
      console.log(t)
      setTotalIntervals(t);
    };
  
    return (
      &lt;View style={{width: '100%'}}&gt;
        &lt;ScrollView
          contentContainerStyle={[styles.scrollViewContainer, {width: `${100 * totalIntervals}%`}]}
          horizontal={true}
          alwaysBounceHorizontal={true}
          bounces={true}
          decelerationRate="fast"
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={200}
          onContentSizeChange={(w, h) =&gt; adjustContent(w)}
          pagingEnabled={true}&gt;
          /*UNCOMMENT THE FOLLOWING LINE TO SEE THINGS NOT ALIGN CORRECTLY. 
          /WANT IT TO LOOK JUST LIKE IT DOES WHEN THE NUMBER OF ITEMS IS EVENLY
          DIVISIBLE, EXCEPT WITH AN EXTRA PAGE WITH 'DEC' ON IT*/
  
          //UNCOMMENT THIS
          &lt;Text style={styles.monthText}&gt;ALL&lt;Text&gt;
          {props.children}
        &lt;/ScrollView&gt;
      &lt;/View&gt;
    );
  };
  
  const getMonths = () =&gt;
    [...Array(12)].map((_el, i) =&gt; (
      &lt;Text style={styles.monthText} key={i.toString()}&gt;
        {moment()
          .month(i)
          .format('MMM')}
      &lt;/Text&gt;
    ));
  
  class App extends Component {
    render() {
      return (
      &lt;View style={{flex:1, width: '100%', backgroundColor:'blue'}}&gt;
        &lt;View style={{marginTop: 100}}&gt;
          &lt;HorizontalTextCarousel&gt;
            {getMonths()}
          &lt;/HorizontalTextCarousel&gt;
        &lt;/View&gt;
      &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    scrollViewContainer: {          
      justifyContent: 'space-around',
      backgroundColor: 'blue',
    },
    monthText: {
      color: 'white',
      fontSize: 24
    }
  })
  
  export default App;
  </code></pre>