i'm using ReactNative with Expo, trying build reusable component there is to many props i will use to change the title , image and description.

ServiceCardDescription.js

  export default function ServiceCardDescription(props) {
    return (
        <TouchableOpacity
        style={[
          styles.Box,
          {
            flexDirection: i18n.locale == "ar"? 'row-reverse' : 'row',
          },
        ]}
        onPress={() => {
          Analytics.logEvent("select_serivce", {
            selected_service: "writing",
          });
          this.props.navigation.navigate("Gender", {
            search_type: 2,
            requestType: 1,
          });
        }}
      >
        <Image
          source={require("../../assets/images/writingIcon.png")}
          style={{
            width: "20%",
            height: 48,
          }}
        />
        <View>
        <Text
          style={{
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0,
            textAlign: i18n.locale == "ar" ? "right" : "left",
            color: "#8f92a1",
            fontFamily: "FrutigerLTArabicBold",
          }}
        >
          {i18n.t("home.writing")}
        </Text>
        <Text
          style={{
            fontSize: 10,
            lineHeight: 20,
            color: "#8f92a1",
            fontFamily: "FrutigerLTArabicBold",
          }}
        >
          {i18n.t("home.writingDescription")}
        </Text>
        </View>
      </TouchableOpacity>
    );
  }

i store all these value one name, so can i use some specific variable and send it as props working on title , image and description ?

at the onPress selected_service: "writing" , Image tag there is writingIcon, Text tag writing and writingDescription

how can i render the component <ServiceCardDescription/> with these props ?

CodePudding user response：

This might help

Usage:

export default function App() {

  // create props here
  const data = {
    selected_service: "writing",
    image: require("../../assets/images/writingIcon.png"),
    desc: i18n.t("home.writingDescription"),
  };

  return (
    <View>
      <ServiceCardDescription data={data} />
    </View>
  );
}

ServiceCardDescription.js

export default function ServiceCardDescription(props) {
  // extract props here
  const { selected_service, image, desc } = props.data;

  return (
    ....
      onPress={() => {
        Analytics.logEvent("select_serivce", {
          selected_service: selected_service,
        });
        ....
      }}
    >
      <Image
        source={image}
        style={{
          width: "20%",
          height: 48,
        }}
      />
      <View>
        <Text
          ....
        >
          {i18n.t("home.writing")}
        </Text>
        <Text
          ....
        >
          {desc}
        </Text>
      </View>
    ....
  );
}