android – Creating a listing of things such that on urgent it navigates to a display screen. The Listing can have Swap Icon which required totally different house administration

I’ve a PageNavigator Element, utilizing that information array I need to iterate overit to create a gaggle listing of componet that
has arrow button and a textual content. However my requirement is that this, there’s a change button in betweeen, passing title and part identify
manually in PageNavigator will make the code unmaintainable . Can anyone recommend me a greater approach to do it as a result of further of change imply mangint state for swenter picture description right hereitch part for on and off.

// Connected code 

let information = [
  {
    title: "Notification Preferance",
    componentName: "NotificationPreferanceScreen",
  },
  {
    title: "Class Calendar",
    componentName: "ClassCalendarScreen",
  },
  {
    title: "Address",
    componentName: "AddressScreen",
  },
  {
    title: "Payment",
    componentName: "PaymentScreen",
  },
  {
    title: "Logged in Devices",
    componentName: "LoggedInDevicesScreen",
  },
  {
    title: "Logout",
    componentName: "LogoutScreen",
  },
];

import { useNavigation } from "@react-navigation/native";
import React from "react";
import { View, StyleSheet, Pressable, Textual content } from "react-native";
import ChevronRightIcon from "../icons/ChevronRightIcon";

const PageNavigator = ({
  title,
  componentName,
  disabled = false
}) => {
  const navigation = useNavigation();

  const handlePress = () => {
    navigation.navigate(componentName);
  };
  return (
    <Pressable type={kinds.mainContainer} onPress={} disabled ={disabled}>
      <View>
        <View type={kinds.textContainer}>
          <Textual content type={kinds.title}>{title}</Textual content>
          <ChevronRightIcon type={kinds.icon} />
        </View>
        {showBorder && (
          <View
            type={{
              peak: 1,
              width: "100%",
              backgroundColor: "white",
              opacity: 0.2,
              marginVertical: 15,
            }}
          />
        )}
      </View>
    </Pressable>
  );
};

const kinds = StyleSheet.create({
  title: {
    fontSize: 15,
    fontWeight: "400",
    coloration: "white",
  },
  icon: {
    fontSize: 25,
    fontWeight: "400",
    coloration: "white",
    peak: "100%",
  },

  textContainer: {
    flexDirection: "row",
    coloration: "white",
    alignItems: "heart",
    justifyContent: "space-between",
  },
  mainContainer: {
    width: "100%",
    backgroundColor: "black",
    marginVerical: 40,
  },
});

export default PageNavigator;

Requirement is to implement this in UI

I used to be capable of implement it by manually making a every part however need extra higher approch