Using both React and React Native libraries in the same js file

Question

I'm writing a React + Redux + ReactNative Application, that shares the same code for multiple platforms (Web, IOS, Android).

So UI components are different, but the model and logic are shared between platforms.

I'm facing an issue when I'm trying to navigate to a different page, inside an action, example: (I'm using react-router and react-native-router-flux)

import {browserHistory} from "react-router";
import {Actions} from 'react-native-router-flux'; // This is the problematic import

export function signInSuccessAndRoute(user) {
    if (PlatformInfoShared.isWeb()) {
        const path = '/dashboard';
        browserHistory.push(path);
    } else {
        Actions.mainApplication();
    }
    return signInSuccess(user);
}

The problem is, on the Web I'm getting this error:

index.js:1Uncaught SyntaxError: Unexpected token import

I'm looking for a way to import as an If statement, meaning import only if the platform is Mobile/Web, how is that possible?

Or any another option you may think of... Thanks

Answer 1

After trying to figure this problem out for some time, decided to document it here in case someone else will have the same issue.

The best way I've managed to deal with this is by creating a custom middle were, a different one for web and mobile, and then navigating by action payload.

Mobile middleware:

import {Actions} from 'react-native-router-flux';

const ActionableNavigationMobile = store => next => action => {

    if ( ! action.redirect ) return next(action);

    const functionName = action.redirect;

    Actions[functionName]();

    return next(action);

};

export default ActionableNavigationMobile;

Web middleware:

import {browserHistory} from "react-router";

const ActionableNavigation = store => next => action => {

    if ( ! action.redirect ) return next(action);

    const path = action.redirect;
    browserHistory.push(path);

    return next(action);
};

export default ActionableNavigation;

Add as middleware:

export const store = createStore(
    reducer,
    applyMiddleware(thunk,actionableNavigation), //Change this for web and modile stors..
);

Action:

export function signInSuccessAndRoute(user) {
    return dispatch => {
        const redirect = PlatformInfoShared.isWeb() ? "/dashboard" : "mainApplication";
        dispatch(signInSuccess(user));
        dispatch({redirect: redirect});
    };
}