Actions. is working once and not afterwards

Question

I am working on react-native app. Background: I have created a NavigationDrawer which has two tabs inside it a. HomePage b. AboutUs

The HomePage has two Scene tags, one for Scene1 and the other for Scene2

The AboutUs page has only one Scene in it.

The NavigationDrawer page looks like:

export default function NavigationDrawer() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="HomePage" component={HomePage} />
        <Drawer.Screen name="AboutUs" component={aboutUsPage} />
    </Drawer.Navigator>
  );
}

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

function HomePage({ navigation }) {
  return (
    <Router >
        <Scene key ="root">
            <Scene key = "scene1" title = "scene1" component = { scene1 } initial = {true} renderLeftButton={navBarButton(navigation)}/>
            <Scene key = "scene2" title = "scene2" component = { scene2 }   />
        </Scene>
    </Router>
  );
}

const navBarButton = (navigation) => {
    return(
      <TouchableOpacity>
        <Icon 
            name='three-bars' 
            size={30} 
            color='#000' 
            onPress={() => navigation.dispatch(DrawerActions.openDrawer()))}
            />
      </TouchableOpacity>
    );  
}

The HomePage looks like this:

export default class Home extends Component {
render() {
        return (
            <View style={styles.container}>
                <HomeGrid />
            </View>
        );
    }
}

The HomeGrid page looks like this:

export class HomeGrid extends Component {

    onGridImagePressed() 
    {
      console.log("Pressed");
      Actions.scene2();
      console.log("PressedAgain");
    }

    render(){
      return (
       <View style = {styles.parentViewStyle}>
          <FlatList
            data={ homeGridData }
            renderItem={({item}) => (
              <TouchableOpacity   style = {{ backgroundColor: item.backgroundColor, height:150}} onPress={ this.onGridImagePressed }>
                <View style={styles.itemContainer}>            
                      <Text style = { styles.textStyle }>
                        {item.value}
                      </Text> 
                </View>
              </TouchableOpacity>
            )}
            keyExtractor={item => item.id}
            numColumns={numColumns} />
       </View>

          
      );
    }
  }

Steps to reproduce the problem:

I refresh the page and click on the Grid Icon present inside the HomePage, it opens me the Scene2 view.
I click on the Navigation drawer hamburger icon and then click on the AboutUs page. It opens the AboutUs page too successfully.
Now again when I open the HomePage view, and then click on the tile present in the flatList of HomeGrid, it doesn't opens the Scene2 for me.

What is the issue which is is preventing the Actions.scene2 to open again?

score 0 · Answer 1 · answered Oct 11 '20 at 02:39

Got this resolved by placing the Navigation Drawer in this fashion by using the "react-native-router-flux" library.

<Router>
              <Scene key ="root" >
                    <Scene key ="mainContainer" >
                    <Drawer 
                          drawerIcon={<Icon 
                            name='three-bars' 
                            size={30} 
                            color='#000' />}
                          drawerPosition="left"
                          hideNavBar
                          contentComponent={NavigationMenu}>
                      
                          <Scene key = "screen1" title = "Screen1" component = { Screen1 } initial = {true} />
                          <Scene key = "screen2" title = "Screen2" component = { Screen2 } />
                          </Drawer>
                     
                    </Scene>
              
              <Scene key = "screen3" title = "Screen3" component = { Screen3 } backTitle= "Screen1"/>
              <Scene key = "screen4" title = "Screen4" component = { Screen4 } />
              
              </Scene>

        </Router>

Actions. is working once and not afterwards

1 Answers1