CODEWITHSUNDEEP
reactjsreact-native
Analise Burtet
Analise Burtet

Reputation: 77

How can I navigate into components on react native?

I've fletched a list of items and rendered it into my app. Its the first page of the app. The thing that I want to do is: Make each of the items "touchable", and when you touch it, you open a component filled with objects from a second fetch requisition.

I am new to react native, do you know if I have to use a lib or something to do it?

Upvotes: 0

Views: 78

Answers (1)

Navneet kumar
Navneet kumar

Reputation: 1964

I'll try to answer your questions one by one.

Make each of the items "touchable" Wrap your components with TouchableOpacity which you can import from react native like this import {TouchableOpacity} from "react-native";

when you touch it, you open a component filled with objects You need to implement onPress method there and also react navigation to load other components.

<TouchableOpacity onPress={() => this.props.navigation.navigate("newScreenName")}>
    <MyCustomComponent>
      ...
    </MyCustomComponent>
</TouchableOpacity>

and creating screen will be like this :

import { createStackNavigator } from "react-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";
...
const customStackNavigator = createStackNavigator(
  {
    newScreenName: {
      screen: Screen1
    },
    newScreenName1: {
      screen: Screen2
    }
  },
  {}
);

check API & Docs here Also, Please check this example for more details

Upvotes: 2

Related Questions