I have a screen in my app that has a "in between" content. This content is too long for the Iphone 5-8, but just one screen for the Iphone 8S-XS Max.
To fix it, I've put on a simple ScrollView
, which works for the content that is too long, but for the larger screen sizes, it leaves a gray background like shown in the screenshot below:
Here is the code:
<View style={{flex: 1, width: '100%',justifyContent: 'center', alignItems: 'center', height: 900,}}>
<ScrollView style={{width: '100%', flex: 1, height: 900}}>
<ImageBackground source={require('../../assets/images/background.png')} style={{width: '100%', flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'background-color: rgba(0, 0, 0, 0.5)',}}>
{/*...Unimportant view code...*/}
</ImageBackground>
</ScrollView>
</View>
As you can see, I've applied flex: 1
to all of the important containers, and I've tried putting a bounded height (eg height: 900
) on all of the above containers, to still no avail.
How can I make the content contained in the scrollview take up the whole screen height regardless of device?
So I actually found the answer in this medium article right here:
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08 And the answer is, on your <ScrollView>
component, assign the following property:
contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}
And it worked for me like a charm!
If you are using a SafeAreaView
, mind the height
of it and the edges
attribute values.
If you have a navigation bar on this page, remove the 'top' from edges
array.
<SafeAreaView edges={['top', 'left', 'right']} style={{ height: '100%' }}>
{/* header */}
<View style={{ height: 100 }}>
<Text style={{ fontSize: 32, color: 'red' }}>
Hi there I am a header
</Text>
</View>
{/* the holly ScrollView */}
<ScrollView style={{ borderWidth: 1, borderColor: 'deeppink' }}>
<Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
architecto. Sunt ex dolore modi laborum voluptatibus recusandae
reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
quae suscipit assumenda.{' '}
</Text>
<Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
architecto. Sunt ex dolore modi laborum voluptatibus recusandae
reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
quae suscipit assumenda.{' '}
</Text>
<Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
architecto. Sunt ex dolore modi laborum voluptatibus recusandae
reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
quae suscipit assumenda.{' '}
</Text>
<Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
architecto. Sunt ex dolore modi laborum voluptatibus recusandae
reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
quae suscipit assumenda.{' '}
</Text>
<Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
architecto. Sunt ex dolore modi laborum voluptatibus recusandae
reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
quae suscipit assumenda.{' '}
</Text>
<Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
architecto. Sunt ex dolore modi laborum voluptatibus recusandae
reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
quae suscipit assumenda.{' '}
</Text>
</ScrollView>
{/* footer */}
<View style={{ height: 100 }}>
<Text style={{ fontSize: 32, color: 'blue' }}>
Hi there I am a footer
</Text>
</View>
</SafeAreaView>
Here is a working demo.
https://snack.expo.dev/@shrekuu/scrollview-filling-remaining-space
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.