[react native] I want to center it with the ScrollView, and I want the width to be 100%

9月 2, 2022

Problem (問題点)

When using ScrollView, the width is not 100%, so I tried various things. (ScrollViewを使うと、幅が100%にならなくなったりしたので、いろいろ試しました。)

Operating environment (動作環境)

React Native (version 0.68.2)
Typescript (version 4.3.5)

Conculusion (結論)

Please refer to the code below. (以下のコードを参考にしてください。)

export function HomeScreen() {
  return <>
    <ScrollView 
      contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
    >
      <View style={{ backgroundColor: 'green', width: '100%', alignItems: 'center', justifyContent: 'center'}}>

        <Text style={{ fontSize: 50, marginTop: 25  }}>あいうえお</Text>
        <Text style={{ fontSize: 50, marginTop: 25  }}>これはテストです</Text>
        <Text style={{ fontSize: 50, marginTop: 25  }}>これはReact Nativeで動いています。</Text>

      </View>
    </ScrollView>
  </>;
}
export default HomeScreen;

The point is to use View in ScrollView.(ポイントとしては、ScrollViewの中でViewを利用することです。)
また、ScrollView の属性として以下を利用することです。(Also, use the following as an attribute of ScrollView.)
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }} 
The background is green so you can see if the width is 100%.(背景を緑色にして、幅が100％なのかわかるようにしています。)
Happily ever after.(めでたし、めでたし。)