Call obj for a component

Question

I'm calling an obj for my index.js screen like that ...

index.js

import React from 'react';
import { View, Text } from 'react-native';
import ScreenUsers from './ScreenUsers';


const Users = (props) => {
  const username = props?.route?.params?.user.map(name => (
    name.userDetails.nameUser
  ));

  return (
    <Text>{username}</Text>
    {ScreenUsers()}
  );
}

Until then my index.js works, pull the username, however my index has a component from another screen called ScreenUsers.js where I make a list of users. In this other component that is breaking because it does not return what I want.

ScreenUsers.js

import React from 'react';
import { View, Text } from 'react-native';

function ScreenUsers(props) {
  const fullnanme = props?.route?params?.user.users;

  return <Text>{fullname}</Text>
}

ScreenUsers have route error

Answer 1

you use ScreenUsers as component not as screen, you can't handle route in this case, if you want to use it as navigation screen you must use navigation read here

and if you want to use it only as component edit this line {ScreenUsers()} to

//pass prop fullname down
<ScreenUsers fullname={"user name1"} />

//recieve props fullname
function ScreenUsers(props) {
  return <Text>{props?.fullname}</Text>
}

if you already use ScreenUsers as screen in navigation and you want also to use it as component you can do something like this

//pass prop route
<ScreenUsers route={{params : {fullname : "user name1"}} />

//recieve props fullname
function ScreenUsers(props) {
  return <Text>{props?.route?.params?.fullname}</Text>
}