React Native - Looping through an array that is consist of things like image, text AND an onPress that leads to a different screen

Question

I have built a custom component that receives its data from a screen using props and gets repeated three times using loops with an array. I've been able to send different things like text and image for each time the component gets repeated by putting them in an array in that screen. I'd like to if there's a way to implement the same thing but this time give each component a different "onPress". how do I set that up? do I need to mess around with the array?

THE COMPONENT.JS:

import React, { Component } from "react";
import styled from "styled-components";

const StudyComponent = props => {
  return (
    <Container>
      <Cover>
        <Image source={props.image} />
        <Logo source={props.logo} />
        <Title>{props.title}</Title>
      </Cover>
    </Container>
  );
};

export default StudyComponent;

const Container = styled.View`
some css code!
`;

const Cover = styled.View`
some css code!
`;

const Image = styled.Image`
some css code!
`;

const Title = styled.Text`
some css code!
`;

const Logo = styled.Image`
some css code!
`;

THE SCREEN.JS

import React, { Component } from "react";
import { TouchableOpacity} from "react-native";
import styled from "styled-components";
import THECOMPONENT from "../Components/THECOMPONENT";

class SelectedClasses extends Component {
  static navigationOptions = { header: null }; 

  render() {
    const { navigation } = this.props; 
    const selected = navigation.getParam("selected"); 
    return (

      <Container>
        <ComponentsContainer>
          {components.map((component, index) => (
            <TouchableOpacity
              key={index}
              onPress={() => {
                this.props.navigation.push("Courses", {
                  selectedcomponent: component
                });
              }}
            >
              <StudyComponent
                title={component.title}
                image={component.image}
                logo={component.logo}
              />
            </TouchableOpacity>
          ))}
        </ComponentsContainer>
      </Container>
    );
  }
}
export default SelectedClasses;

const Container = styled.View`
  some css code!
`;

const ComponentsContainer = styled.View`
  some css code!
`;

//THE ARRAY WHERE I DYNAMICALLY ADD TITLES, IMAGES AND LOGOS TO EACH COMPONENT THAT GET REPEATED USING THE LOOP ABOVE!

const components = [
  {
    title: "STUDY",
    image: require("../assets/STUDYCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/STUDYCOMPONENT-ICON.png")
  },
  {
    title: "GROUP CHAT",
    image: require("../assets/GROUPCHATCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/GROUPCHATCOMPONENT-ICON.png")
  },
  {
    title: "FIND TUTOR",
    image: require("../assets/FINDTUTORCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/FINDTUTORCOMPONENT-ICON.png")
  }
];

I've tried different ways to pass onPress as props but no luck so far. Most likely I did something wrong since I'm relatively new to ReactNative.

I want to be able to have each repeated component on the screen navigate to a different screen. p.s I'm using react-navigation library

Answer 1

To navigate to separate screens on the onPress of each component, add the screen name to your components array, and then navigate using that screen name.

For example, suppose your router setup is like below (just for example, doesn't need to be exactly the same, just screen names are important)

const MainNavigation = createStackNavigator({
    "STUDY": {
    screen: StudyScreen,
    ...
  },
    "GROUPCHAT": {
    screen: GroupChatScreen,
    ...
  },
  "FINDTUTOR": {
    screen: FindTutorScreen,
    ...
  }
})

Add these route names to your components like,

const components = [
  {
    title: "STUDY",
    screen: "STUDY",
    image: require("../assets/STUDYCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/STUDYCOMPONENT-ICON.png")
  },
  {
    title: "GROUP CHAT",
    screen: "GROUPCHAT",
    image: require("../assets/GROUPCHATCOMPONENT-THUMBNAIL.jpg"),
    logo: require("../assets/GROUPCHATCOMPONENT-ICON.png")
  },
  ...
];

Now if you want to add the onPress and navigation logic inside the StudyComponent, change it like this

const StudyComponent = props => {
  return (
  <TouchableOpacity
        onPress={this.props.onPress}>
    <Container>
      <Cover>
        <Image source={props.image} />
        <Logo source={props.logo} />
        <Title>{props.title}</Title>
      </Cover>
    </Container>
  </TouchableOpacity>
  );
};

And in the SCREEN.JS use it like this

...
render() {
    ...
    return (
      <Container>
        <ComponentsContainer>
          {components.map((component, index) => (
              <StudyComponent
                title={component.title}
                image={component.image}
                logo={component.logo}
                onPress={() => {
                  this.props.navigation.push(component.screen, {
                    selectedcomponent: component
                  });
                }}
              />
          ))}
        </ComponentsContainer>
      </Container>
    );
  }