How to change react-router-native location on native-module callback

Question

I'm building a react-native application that displays Service overlay (like those facebook messenger bubble heads), implement in Android only, and on the overlay click it should go back to the app in a specific screen.

I'm using react-router-native and I have my routes structured like this:

App.js

<NativeRouter>
    <ApolloProvider client={client}>
        <Main>
            <Switch>
                <Route exact path="/home" component={Home} />
                <Route exact path="/progress" component={RouteProgress} />
                <Route exact path="/search" component={Search} />
            </Switch>            
        </Main>
    </ApolloProvider>
</NativeRouter>

The Main component has these:

Main.js

componentDidMount() {
    console.log(this.props.location.pathname);
    if(this.props.location.pathname === '/') {
        this.props.history.push("/home");
    }       
}

The callback from my Native module is being called like this:

FloatingView.java

case MotionEvent.ACTION_UP:
        if (lastAction == MotionEvent.ACTION_DOWN || delta < 3) {
            Intent intent = new Intent(FloatingWindow.this, MainActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            startActivity(intent);

            FloatingViewPackage.callback.invoke();                                              

            stopSelf();
        }

The callback is defined in the component Search, which also executes the native module:

Search.js

<Button onPress={() => FloatingView.init(() => {
    console.log('go to progress 1');
    this.props.history.push("/progress");

    setTimeout(() => {
        console.log('go to progress 2');
        this.props.history.push("/progress");
    }, 1000);
})}

The problem is that this.props.history.push("/progress"); doesn't work neither outside the timeout nor inside. Outside the timeout, the function is called before Main componentDidMount but location.pathname is not updated. Inside it the function is called after, but it doesn't navigate to the right screen. It always fall into /home.

I thought this my be a life cycle issue, since the Search component is not mounted. I've been trying to figure a way out to make this work. I tried using the Redirect component:

<Button onPress={() => FloatingView.init(() => <Redirect to="/progress" />)}

Does anyway can think of a way around this? Thanks

score 0 · Answer 1 · answered Apr 18 '19 at 02:03

Found a solution, don't know if the best one, but it works.

Created a singleton navigation.js

navigation.js

export default {
    entryPoint: '/home'
};

And changed the following files:

Search.js

<Button onPress={() => FloatingView.init(() => {
   navigation.entryPoint = "/progress";
})}

Main.js

componentDidMount() {
    if(this.props.location.pathname === '/') {
        this.props.history.push(navigation.entryPoint);
    }       
}

How to change react-router-native location on native-module callback

1 Answers1