react native how is that possible to snap only to one item with paging enabled?

Viewed 17

I want to make a horizontal flatlist like this image with books

enter image description here

but not working:

      <FlatList
        data={mockProducts}
        keyExtractor={(item, i) => i.toString()}
        renderItem={renderI}
        pagingEnabled
        decelerationRate={'fast'}
        horizontal= {true}
        snapToAlignment={"center"}
      />
1 Answers

on android simulator. it works fine

https://snack.expo.dev/DDK41QwR0?platform=android

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,
     },
});

Lemme know in case of any doubts

Related