Can I use ScrollView instead of Container View?

user_17965211 0
Viewed 36

export default class Video extends Component { render() { return (

        <ScrollView style={styles.container}>   
            <ImageBackground source={require('../asset/Video-Img.jpg')}
                style={styles.bgImg}>
                <MaterialIcon name="play-circle-outline" size={55} color={'#fff'} />
            </ImageBackground>

This is how i execute my code instead of Container View. Any problem will happen with this?

react-redux react-native reactjs java
2 Answers

Yes you can use scrollview instead of view

user_179208750

Just a suggestion but if developing for iOS, I would wrap the entire ScrollView within SafeAreaView.

<SafeAreaView>
   <ScrollView style={styles.container}>   
        <ImageBackground source={require('../asset/Video-Img.jpg')}
            style={styles.bgImg}>
            <MaterialIcon name="play-circle-outline" size={55} color= 
            {'#fff'} />
        </ImageBackground>
   </ScrollView>
</SafeAreaView>

Why?

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

But ScrollView as you have is perfectly fine to do so. Just be sure to read up on the documentation - especially the part in the first paragraph relating to the height.

Also, depending on how much content you are displaying - it may have an impact on performance.

ScrollView renders all its react child components at once, but this has a performance downside.

If you are looking to just list items, consider FlatList.

This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.

user_54505770
Related