Question 33009 in React native Question posted in
The official React Native documentation can be found here.

In React Native, how would you create next and go back buttons that navigate to the previous/next page from the current active page?

I’m new and tring to create a simple app, where 5 objects sit like a list/index, and if you press one of them, the app navigates to each of the detailed pages.
In each of the pages, there are next/goback buttons. If you press the next button, then the app navigates to the next detailed page/object from the current page where you are. For example, if you are in the 3rd page, you go to the 4th page. If you are in the 4th page, then you go to 5th page and so on.

Here’s the screens of the app.

This is Home.js
[(https://i.stack.imgur.com/RbRgZ.png)](https://i.stack.imgur.com/Yg0MH.png)

Here’s the cords that I’ve created so far.

people.js

const people = [
  {
    id: 1,
    name: "Clark",
  },
  {
    id: 2,
    name: "Terry",
  },
  {
    id: 3,
    name: "Vega",
  },
  {
    id: 4,
    name: "Ryu",
  },
  {
    id: 5,
    name: "Ken",
  },
];

export default people;

App.js

import * as React from "react";

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import Home from "./Home";
import EachPage from "./EachPage";

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="EachPage" component={EachPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Home.js

import React from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";

import people from "./people";

function Home({ navigation }) {
  return (
    <View>
      <FlatList
        data={people}
        keyExtractor={(person) => person.id}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation.navigate("EachPage", item)}
          >
            <Text>{item.id}</Text>
            <Text>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

export default Home;

EachPage.js

import React from "react";
import { View, Text, Button } from "react-native";

function EachPage({ route }) {
  return (
    <View>
      <Text>{route.params.id}</Text>
      <Text>{route.params.name}</Text>
      
      //If you press the Next button, you go to the next page.
      //So, if the current page you visit is the 2nd page, then you go to the 3rd page after pressing the Next button.
      <Button title="Next" />
      <Button title="Back" />
    </View>
  );
}

export default EachPage;

I think I know this shouldn’t be that difficult, but I couldn’t achive this. Even though I’ve finished two full courses, I didn’t find how to do this.

How would you implement the buttuns that have the function that navigate to another screen/object in the same array in this case?
Thank you.

Tags:

2

Answers


  1. 0

    This is one possible solution, I tried it and worked for me:

    EachPage.js

    import React from "react";
import { View, Text, Button } from "react-native";
import people from "./people";

function EachPage({ route, navigation }) {
  let currentIndex = people.findIndex((item) => item.id === route.params.id);

  return (
    <View>
      <Text>{route.params.id}</Text>
      <Text>{route.params.name}</Text>
      {/* //If you press the Next button, you go to the next page. //So, if the
      current page you visit is the 2nd page, then you go to the 3rd page after
      pressing the Next button. */}
      <Button
        title="Next"
        disabled={currentIndex + 1 === people.length}
        onPress={() =>
          navigation.navigate("EachPage", people[currentIndex + 1])
        }
      />
      <Button
        title="Back"
        disabled={currentIndex === 0}
        onPress={() =>
          navigation.navigate("EachPage", people[currentIndex - 1])
        }
      />
    </View>
  );
}

export default EachPage;
    Login or Signup to reply.
  2. 0

    I took out the disabled logic and now essentially the data is in circular navigation for both next and back.

    import React, { useState, useEffect } from "react";
import { View, Text, Button } from "react-native";
import people from "./people";

function EachPage({ route, navigation }) {
  const [next, setNext] = useState(null);
  const [back, setBack] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(null);

  useEffect(() => {
    setCurrentIndex(people.findIndex((item) => item.id === route.params.id));
  }, [route]);

  useEffect(() => {
    setNext(currentIndex + 1);
    setBack(currentIndex - 1);
    if (currentIndex === 0) {
      setBack(people.length - 1);
    }
    if (currentIndex + 1 === people.length) {
      setNext(0);
    }
  }, [currentIndex]);

  return (
    <View>
      <Text>{route.params.id}</Text>
      <Text>{route.params.name}</Text>
      {/* //If you press the Next button, you go to the next page. //So, if the
      current page you visit is the 2nd page, then you go to the 3rd page after
      pressing the Next button. */}
      <Button
        title="Next"
        onPress={() => navigation.navigate("EachPage", people[next])}
      />
      <Button
        title="Back"
        onPress={() => navigation.navigate("EachPage", people[back])}
      />
    </View>
  );
}

export default EachPage;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search