React native navigation to second page

To achieve a full-screen, scrollable interface where each page takes the full height of the screen, and you can navigate between pages by pressing a button, you can utilize a combination of FlatList and ScrollView. Here’s a step-by-step guide:

1. Define Your Pages: First, outline the structure of each page you want to display. This can be done using an array of objects, each representing a page:

const STEPS = [
  {
    id: 1,
    title: 'Screen1 Title',
    component: <Screen1 />,
  },
  {
    id: 2,
    title: 'Screen2 Title',
    component: <Screen2 />,
  },
  // Add more pages as needed
];

2. Setup FlatList: Use a FlatList to handle the horizontal paging between each full-screen view. Ensure the FlatList is configured to snap to each page and disable scroll indicators for a cleaner look:

import React, { useRef, useState } from 'react';
import { Dimensions, FlatList, ScrollView, StyleSheet } from 'react-native';

const WIDTH = Dimensions.get('window').width;

const YourComponent = () => {
  const ref = useRef();
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

  // Function to navigate to the next page
  const goToNextSlide = () => {
    const nextSlideIndex = currentSlideIndex + 1;
    if (nextSlideIndex < STEPS.length) { // Ensure we don't exceed our page array
      const offset = nextSlideIndex * WIDTH;
      ref?.current?.scrollToOffset({ offset, animated: true });
      setCurrentSlideIndex(nextSlideIndex);
    }
  };

  return (
    <FlatList
      ref={ref}
      data={STEPS}
      keyExtractor={item => item.id.toString()}
      snapToAlignment="start"
      decelerationRate="fast"
      snapToInterval={WIDTH}
      showsHorizontalScrollIndicator={false}
      horizontal
      bounces={false}
      renderItem={({ item }) => (
        <ScrollView
          style={styles.container}
          showsVerticalScrollIndicator={false}>
          {/* Conditional rendering based on current slide index */}
          {currentSlideIndex === item.id - 1 && item.component}
        </ScrollView>
      )}
      scrollEnabled={false} // Disable FlatList scroll to control it via button
    />
  );
};

const styles = StyleSheet.create({
  container: {
    width: WIDTH,
    height: '100%', // Ensure full height
  },
});

The goToNextSlide function is triggered by a button (not shown in the snippet) to navigate to the next page. Remember to replace <Screen1 /> and <Screen2 /> with your actual component content.

This approach provides a smooth, app-like paging experience that can be easily controlled programmatically and is highly customizable to fit your specific needs.