How to use auto scroll view in react native with dote? - reactjs

Question

here is my code
App.js
import React from 'react'
import { Image, StyleSheet, TouchableOpacity, Dimensions, Text, View } from 'react-native'
import { scale, verticalScale } from "react-native-size-matters"
import { RFPercentage} from 'react-native-responsive-fontsize';
import { FlatList } from 'react-native';
const dummyData =
[{
title: 'Get instant loans with approvals',
uri: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWo3YRChZ3ADpZ7rEfQu1RvBOu9NMWZIMZBaH-a1CArXqx6nLX',//require('../img/1page.jpg'),
id: 1
},
// {
// title: 'Get money in wallet or bank account',
// uri: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQN0NcV2epN147CiVfr_VAwsbU3VO8rJU0BPphfU9CEsVWa-kRX',//require('../img/1page.jpg'),
// id: 2
// },
// {
// title: 'Refer & earn exciting gifts',
// uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUbS4LNT8rnIRASXO6LGFSle7Mhy2bSLwnOeqDMivYTb2cgTJg',//require('../img/1page.jpg'),
// id: 3
// }
]
const Home = ({ navigation }) => {
const renderItem=({item})=>{
return(
<View>
<Image source={{uri:item.uri}}style={styles.img} />
<View style={styles.dotView}>
<View style={styles.dot}/>
<View style={styles.dot}/>
<View style={styles.dot}/>
</View>
<Text style={styles.text}>{item.title}</Text>
</View>
)
}
return (
<View style={styles.contanier}>
<View style={styles.imgView}>
<Image source={require('../img/homelogo.png')} style={styles.logo} />
</View>
<View style={{marginBottom:8}}>
<FlatList
data={dummyData}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
<View style={styles.btnview}>
<TouchableOpacity style={styles.btn}
onPress={() => navigation.navigate("PermissionPage")}
>
<Text style={styles.btntext}>Get Started</Text>
</TouchableOpacity>
</View>
</View>
)
}
export default Home;
const styles = StyleSheet.create({
contanier: {
flex: 1,
backgroundColor: '#fff',
},
imgView: {
marginTop: verticalScale(10),
marginLeft: 20,
},
logo: {
width: scale(70),
height: verticalScale(70),
borderRadius: 50,
// position: 'absolute'
},
btnview: {
alignItems: 'center',
justifyContent: 'center',
marginTop:10,
},
btn: {
width: scale(250),
height: verticalScale(55),
borderRadius: 5,
backgroundColor: '#2192FF',
alignItems: 'center',
justifyContent: 'center',
},
btntext: {
fontSize: RFPercentage(3.20),// fontSize: RFValue(17, 680),
color: '#fff',
fontWeight: '600',
fontFamily: 'Roboto'
},
img:{
width:scale(300),
height:verticalScale(450),
},
text:{
fontSize:RFPercentage(3),
fontWeight:'bold',
color:'#000',
textAlign:'center'
},
dotView:{
flexDirection:'row',
justifyContent:'center',
marginBottom:8
},
dot:{
width:scale(8),
height:verticalScale(8),
backgroundColor:'#2192ff',
borderRadius:20,
marginLeft:5
}
})
here is output I want
https://imgur.com/a/yvR5XgM
I'm creating new app in app home page have auto scroll img but I don't know how to use it and do it
I'm fine some lib but i don't use any lib I want without lib.
I'm seen may qustion on internet but I'm not find soution what I want
any one can help me ?