How can I navigate from a top tab screen to a stack screen using react native navigation?

Question

I'm making an expo application using react native. I have a stack navigator and I have a material top tab navigator as a stack screen. From ProfileAccountScreen I can navigate to the TopTabNavigator but I can NOT navigate from TopTabNavigator to another Stack screen?

`<NavigationContainer>
      <Stack.Navigator>
            <Stack.Screen
              name="ProfileAccountScreen"
              component={ProfileAccountScreen}
              options={{ title: "Välkommen" }}
            />
            <Stack.Screen
              name="TopTabNavigator" 
              component={TopTabNavigator}
              options={{ headerShown: false }} 
            />
            <Stack.Screen
              name="CreateTaskScreen"
              component={CreateTaskScreen}
              options={{ title: "Skapa syssla" }}
            />
      </Stack.Navigator>
    </NavigationContainer>`

Here is the TopTabNavigator:

`const Tab = createMaterialTopTabNavigator();

export default function TopTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="SomeScreen" component={SomeScreen} />
    </Tab.Navigator>
  );
}`

The problem is that I can't find any good documents that explain how to navigate between a top tab navigation screen to a stack screen. And in my RootStackParamList I have TopTabNavigator and not the screens since it's the whole top-navigator as a stack screen.

I have tried using navigation as Props type like this:

`type Props = NativeStackScreenProps<RootStackParamList, "TopTaskNavigator"> & {
  profileNavigation: NativeStackScreenProps<RootStackParamList>;
};`

`export default function HouseholdTasksScreen({ navigation }: Props) {
  return (
    <View>
      <Text>Här visas alla tasks för det valda hushållet</Text>
      <Button
        title="Navigera till att skapa syssla"
        onPress={() => navigation.navigate("CreateTaskScreen")}
      ></Button>
    </View>
  );
}`

and in this case I get an error message:

`Type '({ navigation }: Props) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "TopTaskNavigator"> | undefined'.`

The things is that the tab navigator needs to both say where it is (in the tabparamlist) AND say where to navigate (in the stackparamlist) i think??

Answer 1

See useScrollToTop on ReactNavigation.org docs

you can use this hook.

const ref = React.useRef(null);

useScrollToTop(ref);

return <ScrollView ref={ref}>{/* content */}</ScrollView>;