Responsive Native ScrollView to start after release

Question

I used ScrollView in other applications, adding only style style={styles.container}with styles. However, in this application that I create in my styles, I have alignItems:'flex-start'one that only gives an error with style={styles.container}, and instead you need to go alignItems:'flex-start'through contentContainerStyle={styles.container}.

Mistake: Invariant Violation: ScrollView child layout (["alignItems"]) must by applied through the contentContainerStyle prop.

However, when I add contentContainerStylewhile scrolling down in the view, as soon as the finger is removed from the phone (or release the mouse in the simulator), the scrolling will automatically return to the beginning. If I just use style={styles.container}and output alignItems:'flex-start', it scrolls correctly, but my elements in the user interface are not laid out as I need them. What makes it scroll back up with help contentContainerStyleand is there a fix?

Render:

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

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

    <View>
      //next page for carousel
    </View>

  </Carousel>
);

Answer 1

I figured out how to scroll it. Instead wrap View ScrollViewand ScrollViewany flex style or alignItems:'flex-start'using contentContainerStyle={styles.container}, put it on View, which is the child element ScrollView, and just use style=instead contentContainerStyle=.

Render:

<ScrollView style={styles.container}>
    <Text style={styles.goalName}>{goal}</Text>
    <View style={styles.viewContainer}>
        {iconsToShow}
    </View>
</ScrollView>

Styling:

var styles = StyleSheet.create({
    container: {
        backgroundColor: 'transparent',
        paddingLeft:20,
        paddingRight:20
    },
    viewContainer:{
        flexDirection:'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flex: 1
    },
    iconText:{
        paddingLeft:15,
        paddingRight:15,
        paddingTop:15,
        paddingBottom:15
    },
    goalName:{
        textAlign:'center',
        marginTop:40,
        marginBottom:10,
        fontSize:20
    }
});