CODEWITHSUNDEEP
react-nativeexporeact-navigationnpm-startreact-button
winterx0
winterx0

Reputation: 27

Why won't the navigation read the id from a nested array?

I revised me question after finding the source of my problem. For some reason the navigator doesn't read the id named 'topic' which is declared in the interface. I'm not entirely sure how this is happening as it works in the return scope

import { View, Text, StyleSheet, Image, Pressable} from "react-native";
import React from "react";
import Colors from "../../constants/Colors";
import { Topic } from "../types/models";
import { useNavigation } from "@react-navigation/native";

interface TopicCellProps {
    topic: Topic; //--but is declared here
}

const navigation = useNavigation();

const onPress = () => {
    navigation.navigate("Topic", {id: topic.id}); //cannot find name topic
};

const TopicCell = ({topic}: TopicCellProps) => {
    return (
        <Pressable 
        onPress={onPress}
        style={styles.container}>
                <View style={[styles.circle, {
                    width: "80%",
                    borderRadius: 100,
                    borderWidth: 5,
                    borderColor: Colors.light.dark,
                    aspectRatio: 1,
                    backgroundColor: Colors.light.secondary,
                    justifyContent: "center",
                    alignItems: "center",
                    },
                    ]}>
                    <Image source={{uri: topic.icon}} style={styles.image}/>
                </View>
                <Text style={styles.title}>{topic.title}</Text>
                </Pressable>
    );
};

The resources I am trying to access are listed like this:

//"./types/models"
export type Topic = {
    id: string;
    title: string;
    icon: string;
    level: number;
    resources?: resources[];
};

export type resources = {
    id: string;
    title: string;
    url: string;
}

//"./topics.ts"
id: "1",
    title: "Live Chat",
    icon: "https://img.icons8.com/color/48/000000/health-book.png",
    level: 1,
    resources: [
        {
            id: "1",
            title: "Profile1",
            url: "https://www.coliru.com/",
        }, {
            id: "2",
            title: "Profile2",
            url: "https://www.coliru.com/",
        },
    ],

Upvotes: 0

Views: 104

Answers (2)

winterx0
winterx0

Reputation: 27

Found The location of the pressable functions in the navigation folder. I used the method on each page I want to display with a custom button and it works now.

Upvotes: 1

vabatch_dev
vabatch_dev

Reputation: 115

WebBrowser.openBrowserAsync is used for opening browser of your mobile phone with some url, not for navigating within your app.

That's why an string is spected (the url) and not an Element (ChatItem)

For navigating throught your app you should refer to documentation firstly https://reactnative.dev/docs/navigation

Then, follow the instructions there as it would be easier than me trying to explain

Upvotes: 0

Related Questions