I'm creating onBoarding screens and I have created each of the screen item as a component and trying to render them with Flatlist so far everything is working smoothly but when I swipe the flatlist to see the other screens it's not working it swipes 40% and and forcefully shows the current screen it seems like there is some flex styling issues and I could able to figure it out please suggest.

Here is the video for explaination: https://youtube.com/shorts/pHbTs7ifMww

OnBoardingScreen.js

import React, { useState } from 'react';
import { Dimensions, FlatList, SafeAreaView, View, StyleSheet, Text, Image } from 'react-native';

const { width, height } = Dimensions.get('window');
const COLORS = {primary : '#ff006c', white: '#ffffff', black: '#000000'};

const slides = [
  {
    id: '1',
    image: require('../../images/OnBoardingImages/1.png'),
    title: 'You can mark time',
    description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
  },

  {
    id: '2',
    image: require('../../images/OnBoardingImages/2.png'),
    title: 'You can mark time',
    description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
  },

  {
    id: '3',
    image: require('../../images/OnBoardingImages/3.png'),
    title: 'You can mark time',
    description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
  },
]

const Slide = ({item}) => {
  return (
    <View style={styles.slideView}>
      <Image source={item.image} style={styles.slideImage} />
      <Text style={styles.slideTitle}>{item.title}</Text>
      <Text style={styles.slideDescription}>{item.description}</Text>
    </View>
  );
}

const OnBoardingScreen = ({ navigation }) => {
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

  const Footer = () => {
    return (
      <View style={styles.footer}>
        <View style={styles.pagination}>
          {slides.map((_, index) => (<View key={index} style={[styles.paginationItem, currentSlideIndex == index && {backgroundColor: 'grey'} ]} /> ))}
        </View>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.root}>
      <FlatList 
        data={slides}
        contentContainerStyle={{flex: 1}}
        showsHorizontalScrollIndicator={false}
        horizontal
        pagingEnabled
        renderItem={({item}) => <Slide item={item} />} />

      <Footer />
    </SafeAreaView>
  
  );
};

export default OnBoardingScreen;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: COLORS.white,
  },

  slideView: {
    alignItems: 'center',
  },

  slideImage: {
    height: '75%',
    width: width,
    resizeMode: 'contain',
  },

  slideTitle: {
    color: COLORS.primary,
    fontSize: '22',
    fontWeight: 'bold',
    marginVertical: 10,
    paddingHorizontal: 10,
    textAlign: 'center',
  },

  slideDescription: {
    fontSize: 18,
    paddingHorizontal: 20,
    color: 'grey',
    textAlign: 'center',
  },

  footer: {
    height: height * 0.25,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
  },

  pagination: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 20,
  },

  paginationItem: {
    height: 10,
    width: 10,
    backgroundColor: COLORS.primary,
    marginHorizontal: 3,
    borderRadius: 50,
  },

});

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import Navigation from './src/navigation';

export default function App() {
  return (
    <View style={styles.container}>
      <Navigation />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

CodePudding user response：

Update this style

slideView: {
    alignItems: 'center',
    width: width
  },