React Native 100% width view in scrollView

Question

I have a horizontal ScrollView

In this ScrollView I want to display multiple Full height and width Views.

I don't figure out how to set each View's width to 100%.

Actually it like they have a "auto" width (about 70%)

<SafeAreaView style={styles.container}>
    <ScrollView
      style={styles.info}
      horizontal={true}
    >
      {this.state.list.map(item => (
        <View style={styles.item}>...</View>
      ))}
    </ScrollView>
  </SafeAreaView>

And the styles

info: {
 width: "100%",
 height: "100%",
 display: "flex"
},
item: { // props for the items in my views
 display: "flex",
 alignItems: "center",
 justifyContent: "space-between",
 height: "100%",
 paddingTop: 30,
 paddingBottom: 10
}

I tried to put width : "100%" but of course it didn't work as excepted

Thanks

Answer 1

You would have to calculate the width of the device or container.

import { Dimensions } from 'react-native';

const screenWidth = Dimensions.get('window').width;