How to do nested navigation using react navigation version 5 as i also have redux on the same screen

Question

Here I want to navigate to settings screen from HomeFetchScreen, Below code in HomeFetchScreen if export default is HomeToSettings my Redux does not connect. How to implement this kind of nested navigation

This is my Home Screen

import  HomeFetchScreen from './HomeFetchScreen';
const Home= () =>{
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))
return(
    
      <View>
        
            <Provider store={store}>
              <HomeFetchScreen/>
            </Provider>
          
      </View>
      </View>

  )  
  }

 export default Home;

This is my HomeFetchScreen Here I have created HomeToSettings stack navigation

const HomeFetchStack = createStackNavigator();
const HomeToSettings = () =>{
return(
    <HomeFetchStack .Navigator>
        <HomeFetchStack .Screen name='HomeFetchScreen' component={HomeFetchScreen} />
        <HomeFetchStack .Screen name='SettingsScreen' component={SettingsScreen} />
    </HomeFetchStack .Navigator>
);
}

const HomeFetchScreen = (props,{navigation}) =>{


return(
        <FlatList
            data={props.ShowNames}
            keyExtractor={(item,index)=> index.toString()}
           
            renderItem = {({item})=>
                        <TouchableOpacity onPress={()=>navigation.navigate('SettingsScreen')}>
                        <Card>                            
                            <View>
                                <Text>{item.name}</Text>                  
                            </View>
                        </Card>
                        </TouchableOpacity>
                    }
        >
        </FlatList>
        
    </View>
    

);
}
const mapStatetoProps = state =>{
return{
    ShowNames: state.ShowNames.list,
    

};
}

export default connect(mapStatetoProps,{ component}) (HomeToSettings);

Answer 1

You can do this if you are only using redux in HomeFetchScreen

You can do the mapStatetoprops when creating the stack

const HomeFetchStack = createStackNavigator();
const HomeToSettings = () => {
    return (
        <HomeFetchStack.Navigator>
            <HomeFetchStack.Screen name='HomeFetchScreen' component={connect(mapStatetoProps, { component })(HomeFetchScreen)} />
            <HomeFetchStack.Screen name='SettingsScreen' component={SettingsScreen} />
        </HomeFetchStack.Navigator>
    );
}

const HomeFetchScreen = (props, { navigation }) => {

    return (
        <View>
            <FlatList
                data={props.ShowNames}
                keyExtractor={(item, index) => index.toString()}

                renderItem={({ item }) =>
                    <TouchableOpacity onPress={() => navigation.navigate('SettingsScreen')}>
                        <Card>
                            <View>
                                <Text>{item.name}</Text>
                            </View>
                        </Card>
                    </TouchableOpacity>
                }
            >
            </FlatList>
        </View>);
}
const mapStatetoProps = state => {
    return {
        ShowNames: state.ShowNames.list,
    };
}

export default HomeToSettings;