[React Native]ScrollViewにFlexBoxを適用するとスクロールしてもすぐに初期位置に戻ってしまう

はじめに

最近react nativeを触りはじめて、scroll viewの実装時にタイトルの通りつまずいたので記事にしておく。

スクロールしてもすぐに初期位置に戻る

以下のサンプルコードのようにScrollViewにflexを適用するとスクロールしてもすぐに初期位置に戻ってしまう。

サンプルコード

// App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ScrollView
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
        <View style={styles.item}></View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  item: {
    height: 200,
    width: '90%',
    marginTop: '30',
    backgroundColor: 'orange',
  }
});

解決策

ScrollViewの高さを動的に変化させる

flexではなくflexGrowを使うことでFlexBoXを適用したScrollViewの高さを動的に変化させることができる。
この記事を参考にしました。
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

// App.js

const styles = StyleSheet.create({
  container: {
    flexGrow: 1, //修正箇所
    alignItems: 'center',
  },
  item: {
    height: 200,
    width: '90%',
    marginTop: '30',
    backgroundColor: 'orange',
  }
});

おわりに

これで無事にスクロールできるようになりました。
あとでスクロールしている動画も入れておこう。