how do i pass props to next screen using Navigate

you can read here https://reactnavigation.org/docs/params. you can pass some props using navigate and route.

for example in screen 1

      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />

in screen 2

function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;
  return (
  );
}

you can navigate using the name of screen

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

Pass data in route state on the Navigate component's state prop.

Navigate

declare function Navigate(props: NavigateProps): null;

interface NavigateProps {
  to: To;
  replace?: boolean;
  state?: State;
}

Usage:

<Navigate to={"/plans"} state={{ data }} />

And to access the route state on the target routed component use the useLocation hook access it.

const { state } = useLocation();

...

const { data } = state;