1.

What is the ScrollView component of React Native?

Answer»

ScrollView component is a generic scrolling container which can host multiple components and Views. you can scroll both vertically and horizontally (by setting the horizontal property). ScrollView can also be used to implement pinch and zoom functionality in IOS. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component. ScrollView works best to present a small number of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the SCREEN.

import React from 'react'; import { VIEW, Text, Image, ActivityIndicator, STYLESHEET, ScrollView } from "react-native"; const initialState = { pictures: [ {id:0, download_url:"https://picsum.photos/id/0/5616/3744" }, {id:1, download_url: "https://picsum.photos/id/1002/4312/2868"}, {id:2, download_url: "https://picsum.photos/id/1006/3000/2000"}, {id:3, download_url: "https://picsum.photos/id/1015/6000/4000"} ] }; class PictureList extends React.Component {     constructor(props) {         super(props);         this.state = initialState;     }         render() {         const { pictures } = this.state;         if (!pictures.length) { return (<ActivityIndicator />); }         return (             <View>                 <ScrollView>                   {pictures.map(picture => (                     <View style={styles.container} key={picture.id}>                         <Image style={styles.image} source={{uri: picture.download_url}} />                     </View>                   ))}                    />             </View>         );     } } const styles = StyleSheet.create({     container: {         borderColor: '#ccc',         borderWidth: 1,         borderRadius: 5,         backgroundColor: '#eaf7fd',         marginBottom: 15,     },     image: {         MARGIN: 5,         borderRadius: 5,         width: 300,         height: 300,     } }); export default PictureList;

Above example renders a LIST of images in ScrollView. We import the ScrollView component from the react-native library and created Image element inside ScrollView. Each Image element has its own width and height set via CSS. When you run the above code and scrolls the screen you should be able to go through all the images renders. The scroll view is used to create scrollable UI on a mobile application. It works on both IOS and Android.


Discussion

No Comment Found

Related InterviewSolutions