RNative-Components

React Native -ScrollView- Component

September 25, 2020

react native ScrollView component doesn’t support any predefined method to navigate specific view of full width ScrollView component by just providing view number. So, you have to make it custom. Yes, this tutorial explains how we can make it custom from scratch with complete source code.

Vertical ScrollView

import { Text, SafeAreaView,ScrollView, StyleSheet,Image } from 'react-native';

var image =require('./cimage.jpg')

export default function App() {
  return (
    <ScrollView style={{padding:30,}}>
      <Image source={image} style={styles.img} />
      <Text>
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
      </Text>
      <Image source={image} style={styles.img} />
      <Text>
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
       The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy
      </Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  img:{
    padding:40,
    width:250,
    height:250,
  }
});

Horizontal ScrollView

import { Text, SafeAreaView,ScrollView, StyleSheet,Image } from
'react-native';

var image =require('./fImg.jpg')

export default function App() {
  return (
    <ScrollView style={{padding:30,}} horizontal={true}>
      <Image source={image} style={styles.img} />
      <Image source={image} style={styles.img} />  
      <Image source={image} style={styles.img} />
      <Image source={image} style={styles.img} />  
      <Image source={image} style={styles.img} />
      <Image source={image} style={styles.img} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  img:{
    padding:40,
    width:250,
    height:250,
    marginLeft:10,
  }
});