im new to react native so i really don’t know why this issue is coming up. if u need any additional info feel free to ask. im trying to build a navigation system similar to windows phone where we can swipe to the next screen.
here is my code
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React , {useState,useRef} from 'react'
const allData = [
{name:'Explore',id:'1'},
{name:'Trending',id:'2'},
{name:'Post',id:'3'},
{name:'Messages',id:'4'},
{name:'Marketplace',id:'5'}
]
const reff = useRef()
const [index,setIndex] = useState(2)
const spacing = 10;
export default function topDynamicBar() {
return (
<View style ={styles.container}>
<FlatList
ref={reff}
initialScrollIndex={index}
keyExtractor={(item)=>item.id}
data={allData}
renderItem={({item, index: findex})=>(<Text style={styles.items}>{item.name}</Text>)}
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:'#000000'
},
items:{
padding:2,
fontSize:30,
height: "auto",
margin:10,
borderColor:'#fff',
borderWidth:2,
borderRadius: spacing
}
})