Reference: https://reactnavigation.org/docs/navigating-without-navigation-prop Used In: Expo Lotto

app.js

import React from 'react';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
import MainNavigator from './main.navigator';
import { navigationRef } from './root_navigation';

/*
 * Navigation theming: https://reactnavigation.org/docs/en/next/themes.html
 */
const navigatorTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    // prevent layout blinking when performing navigation
    background: 'transparent',
  },
};

export const AppNavigator = () => (    
  <NavigationContainer ref={navigationRef} theme={navigatorTheme}>
    <MainNavigator />
  </NavigationContainer>
);

root_navigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// add other navigation functions that you need and export them

user_combinations_screen.js

import React, { useEffect, useState } from 'react'
import { SafeAreaView, View, TouchableOpacity, FlatList, Image, ActivityIndicator } from 'react-native';
import { Banner } from 'react-native-paper';
import * as RootNavigation from '../navigation/root_navigation';

import * as firebase from "firebase";
import * as Facebook from 'expo-facebook';

// Component
import Row from '../components/common/row';
import FabButton from '../components/common/fab_button';

// Redux
import { useDispatch, useSelector } from 'react-redux';
import { GetCombinations, CheckBet, _SetCurrentCombinationID } from '../actions/play_actions';

import s from '../styles';
import colors from "../utils/Colors";

const UserCombinationsScreen = (props) => {
  const dispatch = useDispatch();    
  const combinations = useSelector(state => state.play.combinations);  
  const current_combination_id = useSelector(state => state.play.current_combination_id);
  const is_loading = useSelector(state => state.play.is_loading);
  const [records, setRecords] = useState(combinations);
  const [visible, setVisible] = React.useState(true); 

  useEffect(() => {    
    console.log(" >>>> useEffect called for gettting new combinations");
    setRecords(combinations);
    console.log("dian props", props);
  }, [combinations]);

  const handleCombinationPress = (_id) => {
    dispatch(_SetCurrentCombinationID(_id));
    dispatch(CheckBet(_id));
  }

  const renderItem = (info) => {
    const { _id, is_checked } = info.item;

    if(is_checked) return <Row data={info.item} />
    
    return (
      <TouchableOpacity onPress={() => handleCombinationPress(_id)}>
        <Row data={info.item} />
      </TouchableOpacity>
    )
  }

  const renderBanner = () => (
    <Banner
      visible={visible}
      actions={[
        {
          label: 'Okay',
          onPress: () => setVisible(false),
        }
      ]}
      icon={({ size }) => (
        <Image
          source={{
            uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',
          }}
          style={{
            width: size,
            height: size,
          }}
        />
      )}>
      You can simulate lotto and no money involve.
    </Banner>
  )

  return (
    <SafeAreaView style={s.screen}>      
        {/* {renderBanner()} */}
        <View style={[s.flex1, s.mdGutter]}>
          <FlatList
            data={records}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
      <FabButton
        label="Gues Combinations"
        onPress={() => RootNavigation.navigate('SelectCategory')}
      />
    </SafeAreaView>
  )
}

export default UserCombinationsScreen;