import {React,useState} from 'react';
import { Text, View, StyleSheet,Dimensions,FlatList } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const CustomComp = (props) => {
return (
<View style={styles.container}>
<Text style={styles.title}>{props.name}</Text>
</View>
);
};
export default function App() {
const [items, setItems] = useState([
{
id: "1",
name: "CustomComp View 1",
},
{
id: "2",
name: "CustomComp View 2",
},
{
id: "3",
name: "CustomComp View 3",
},
{
id: "4",
name: "CustomComp View 4",
},
]);
return (
<View>
<FlatList
data={items}
renderItem={({ item }) => <CustomComp name={item.name} />}
keyExtractor={(item) => item.id}
snapToAlignment="start"
decelerationRate={"slow"}
snapToInterval={Dimensions.get("window").height}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
height: Dimensions.get("window").height,
width: Dimensions.get("window").width,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#3B5323",
borderColor: "#000",
borderWidth: 2,
alignSelf: "center",
},
title: {
color: "#fff",
fontSize: 20,
},
});