Se separó el componente en un archivo aparte

import { ReactNode } from "react";

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

import { MaterialIcons } from "@expo/vector-icons";

import { LIGTHT_THEME } from "../../constants/theme";

interface CustomTileButtonProps {

  leadingIcon: ReactNode;

  title: string;

  onPress?: () => void;

}

export const CustomTileButton = ({

  title,

  onPress,

  leadingIcon,

}: CustomTileButtonProps) => {

  return (

    <TouchableOpacity onPress={onPress} style={styles.account_option}>

      <View style={{ flexDirection: "row", gap: 20, alignItems: "center" }}>

        {leadingIcon}

        <Text style={styles.title}>{title}</Text>

      </View>

      <MaterialIcons name="keyboard-arrow-right" size={30} color="black" />

    </TouchableOpacity>

  );

};

const styles = StyleSheet.create({

  account_option: {

    flexDirection: "row",

    alignItems: "center",

    justifyContent: "space-between",

    height: 55,

    paddingHorizontal: 10,

    borderTopWidth: 2,

    borderTopColor: "#ccc",

    backgroundColor: LIGTHT_THEME.color.white,

    borderRadius: 5,

    width: "100%",

  },

  title: {

    fontSize: 16,

  }

});