React Native ScrollView snapping back to top after release
<p>I have used ScrollView in other apps adding just a <code>style={styles.container}</code> with the styles. However in this app I am creating in my styles I have <code>alignItems:'flex-start'</code> which throws an error with just <code>style={styles.container}</code> and instead you need to pass in <code>alignItems:'flex-start'</code> through <code>contentContainerStyle={styles.container}</code>. </p>

<p>Error: <code>Invariant Violation: ScrollView child layout (["alignItems"]) must by applied through the contentContainerStyle prop.</code></p>

<p>However when I add <code>contentContainerStyle</code> when scrolling down in the view, once the finger is lifted off the phone (or release of the mouse in simulator), the scroll automatically goes back to the top. If I just use <code>style={styles.container}</code> and take out the <code>alignItems:'flex-start'</code> it scrolls correctly, but my items in the UI are not laid out how I need them. What is causing it to scroll back to the top with <code>contentContainerStyle</code> and is there a fix?</p>

<p>render:</p>

<pre><code>var _that = this;
var iconsToShow = icons.map(function (icon, i){
  if(i &lt; 81){
    return (
      &lt;TouchableHighlight
        onPress={() =&gt; _that.changeIcon(indexToChange, icon)}
        underlayColor='#F7F7F7'
        key={i}&gt;
          &lt;Text style={styles.iconText}&gt;&lt;IonIcons name={icon} size={30} color="#555" /&gt;&lt;/Text&gt;
      &lt;/TouchableHighlight&gt;
    );
  }
});

return (
  &lt;Carousel width={SCREEN_WIDTH} animate={false} indicatorColor="#444" inactiveIndicatorColor="#999" indicatorAtBottom={false} indicatorOffset={16}&gt;
    &lt;View&gt;
      &lt;ScrollView contentContainerStyle={styles.container}&gt;{iconsToShow}&lt;/ScrollView&gt;
    &lt;/View&gt;

    &lt;View&gt;
      //next page for carousel
    &lt;/View&gt;

  &lt;/Carousel&gt;
);
</code></pre>