Converting React to React Native

Question

I have a React App that I need to convert to React Native. I do not have a lot of experience on web development, so i might be missing something essential here. The problem I have is that when I open the app in the emulator I only see a white page that says "Home" on top. This what i have translated of the code so far.

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

import React from 'react';
import Routes from './src/core/Routes';
import configureStore from './src/services/store';
import {Provider} from 'react-redux';
import {View} from 'react-native';
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core';
import {
    font_family_default,
    font_family_secondary,
    font_size_md,
    font_size_sm,
    font_weight_bold,
    font_weight_normal,
    font_weight_semi_bold,
} from './src/assets/style/variables';
import {rem} from './src/assets/style/functions';
import colors from './src/assets/style/colors';

const theme = createMuiTheme({
    typography: {
        fontFamily: font_family_default,
        fontSize: 16,
        fontWeightLight: font_weight_normal,
        fontWeightRegular: font_weight_semi_bold,
        fontWeightMedium: font_weight_bold,
    },
    overrides: {
        MuiMenuItem: {
            root: {
                fontSize: font_size_sm,
                fontFamily: font_family_secondary,
                fontWeight: font_weight_semi_bold,
                minHeight: rem(40),
            },
        },
        MuiMenu: {
            paper: {
                boxShadow: '0px 12px 56px -8px rgba(0,0,0,0.2)',
                borderRadius: `${rem(3)}`,
            },
        },
        MuiExpansionPanelSummary: {
            root: {
                padding: `0px ${rem(16)}`,
            },
            content: {
                margin: `${rem(8)} 0px `,
            },
        },
        MuiInputBase: {
            root: {
                fontSize: font_size_md,
            },
        },
        MuiPickersToolbar: {
            toolbar: {
                backgroundColor: colors.grey.primary,
            },
        },
        MuiPickersDay: {
            daySelected: {
                backgroundColor: colors.yellow.dark2,
                '&:hover': {
                    backgroundColor: colors.yellow.dark2,
                },
            },
        },

        MuiPickersClockNumber: {
            clockNumberSelected: {backgroundColor: colors.yellow.dark2},
        },

        MuiPickersClock: {
            pin: {backgroundColor: colors.yellow.dark2},
        },
        MuiPickersClockPointer: {
            pointer: {backgroundColor: colors.yellow.dark2},
            thumb: {border: `14px solid ${colors.yellow.dark2}`},
        },
    },
});

const store = configureStore();

const App: () => React$Node = () => {
    return (
        <Provider store={store}>
            <MuiThemeProvider theme={theme}>
                <View style={{flex: 1}}>
                    <Routes/>
                </View>
            </MuiThemeProvider>
        </Provider>
    );
};

export default App;

Routes.js

import React from 'react';
import {Router, Scene} from 'react-native-router-flux';
import Login from '../pages/login';

const Routes = () => (
    <Router>
        <Scene key="root">
            <Scene key="home" component={Login} title="Home" initial={true}/>
        </Scene>
    </Router>
);

export default Routes;

/src/page/login/index.js

import React, {useState} from 'react';
import styled from 'styled-components/native';
import Input from '../../shared/components/Input';
import Button from '../../shared/components/Button';
import {connect} from 'react-redux';
import {APP_ROUTES} from '../../core/global-constants';
import {Link, Redirect} from 'react-router-native';

import Logo from '../../assets/img/log.svg';
import colors from '../../assets/style/colors';
import {rem} from '../../assets/style/functions';
import {device, font_size_md, font_size_xxl, font_weight_normal} from '../../assets/style/variables';
import {login} from '../../services/actions/authenticationActions';
import useForm from '../../shared/hooks/useForm';
import validate from './loginFormValidations';

const theme = {
    backgroundColor: colors.white.light1,
};

function Login(props) {
    const {values, handleChange, handleSubmit, errors} = useForm(login, validate);
    const [redirect, setRedirect] = useState(false);
    const [errorLogin, setErrorLogin] = useState(false);

    function login() {
        if (Object.keys(errors).length === 0) {
            props.login(values).then(
                res => {
                    setRedirect(true);
                },
                err => {
                    errors.login = props.errorMessage
                        ? `${props.errorMessage},  please try again`
                        : `No active account found with the given credentials,  please try again`;
                    setErrorLogin(true);
                },
            );
        }
    }

    if (redirect) {
        return <Redirect to={APP_ROUTES.timeTracker}/>;
    }
    return (
        <Style.Section>
            <Style.Img src={Logo} alt="toki timer logo"/>
            <Style.Hero>
                <Style.Title>Welcome back!</Style.Title>
                <Style.Subtitle>Log in to continue</Style.Subtitle>
            </Style.Hero>
            <Style.Form onSubmit={handleSubmit}>
                <Style.FormGroup>
                    <Input
                        id="username"
                        name="username"
                        placeholder="Username"
                        backgroundColor={theme}
                        onChange={handleChange}
                        value={values.username || ''}
                        hasError={errors.username}
                    />
                    {errors.username && <Style.ErrorMessage>{errors.username}</Style.ErrorMessage>}
                </Style.FormGroup>

                <Style.FormGroup>
                    <Input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="Password"
                        backgroundColor={theme}
                        onChange={handleChange}
                        value={values.password || ''}
                        hasError={errors.password}
                    />
                    {errors.password && <Style.ErrorMessage>{errors.password}</Style.ErrorMessage>}
                    {errorLogin && <Style.ErrorMessage>{errors.login}</Style.ErrorMessage>}
                </Style.FormGroup>
                <Button name="Login" type="submit"/>
            </Style.Form>
            <Style.Hero>
                <Style.BottomLinks>
                    <Style.Link to={APP_ROUTES.forgotPassword}>Forgot your password?</Style.Link>
                </Style.BottomLinks>
            </Style.Hero>
        </Style.Section>
    );
}

const mapStateToProps = state => {
    return {
        loading: state.authorization.loading,
        isAuthenticated: state.authorization.isAuthenticated,
        loginSuccess: state.authorization.loginSuccess,
        loginError: state.authorization.loginError,
        errorMessage: state.authorization.errorMessage,
        isAdmin: state.authorization.userInSession.isAdmin,
    };
};
const mapDispatchToProps = {login};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Login);

const Style = {};

Style.Section = styled.SectionList`
  background-color: ${colors.grey.primary};
  min-height: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
`;
Style.Form = styled.View`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 35%;
  margin-bottom: ${rem(40)};

  @media ${device.mobileS} {
    padding: 0 5%;
  }

  @media ${device.mobileL} {
    padding: 0 15%;
  }

  @media ${device.laptop} {
    padding: 0 35%;
  }
`;

Style.Hero = styled.View`
  display: flex;
  flex-direction: column;
  margin-bottom: ${rem(70)};
  align-items: center;
`;
Style.Title = styled.Text`
  color: ${colors.white.primary};
  font-size: ${font_size_xxl};
  font-weight: ${font_weight_normal};
  margin: 0;
`;
Style.Subtitle = styled(Style.Title)`
  font-size: ${font_size_md};
`;
Style.Img = styled.Image`
  margin-bottom: ${rem(60)};
  margin-top: ${rem(60)};
`;
Style.BottomLinks = styled.Text`
  color: ${colors.white.primary};
  margin-top: ${rem(10)};
`;

Style.Link = styled(Link)`
  color: ${colors.yellow.primary};

  &:hover {
    text-decoration: underline;
  }
`;
Style.FormGroup = styled.View`
  margin-bottom: ${rem(45)};
`;
Style.ErrorMessage = styled.Text`
  font-size: ${font_size_md};
  color: ${colors.red.primary};
`;

What I don't seem to understand after reading documentation is how routing works, for example, using react, my Routes.js looks like this:

import React from 'react'
import { Switch, Route } from 'react-router-dom'

import { APP_ROUTES } from './global-constants'
import Login from '../pages/login'
import Dashboard from '../pages/dashboard'
import TimeTracker from '../pages/time-tracker'
import SignUp from '../pages/signUp'
import PrivateRoute from '../shared/components/PrivateRoute'
import UserList from '../pages/user-list'
import DepartmentsList from '../pages/departments-list'
import Reports from '../pages/reports'
import UserProfile from '../pages/user-profile'
import ForgotPassword from '../pages/forgot-password'
import NotFound from '../shared/components/NotFound'

const Routes = () => (
  <main>
    <Switch>
      <Route exact path={[APP_ROUTES.home, APP_ROUTES.login]} component={Login} />
      <Route exact path={APP_ROUTES.signUp} component={SignUp} />
      <Route exact path={APP_ROUTES.forgotPassword} component={ForgotPassword} />
      <PrivateRoute
        exact
        path={[APP_ROUTES.dashboard, APP_ROUTES.dashboardDeparment]}
        component={Dashboard}
      />
      <PrivateRoute exact path={APP_ROUTES.timeTracker} component={TimeTracker} />
      <PrivateRoute exact path={APP_ROUTES.usersList} component={UserList} />
      <PrivateRoute exact path={APP_ROUTES.departments} component={DepartmentsList} />
      <PrivateRoute exact path={APP_ROUTES.reports} component={Reports} />
      <PrivateRoute exact path={APP_ROUTES.userDetails} component={UserProfile} />
      <PrivateRoute component={NotFound} />
    </Switch>
  </main>
)

export default Routes

I made the changes to the routes file since I've read that react-router-dom does not work in native. My main purpose is to re-use as much code as possible, but if I can't, what do I need to change for the page to actually show in the emulator?

Answer 1

If you want to move your App from React Web application to React Native App, then you can reuse your functionality, Components, lifecycle methods, setState, props, but you have to write your return (render) method code in respective to React Native, because in React Web application the HTML code also works fine but in mobile app, you need to add <View> to design your UI similar to <div>.

For Mobile App, we also need to handle gestures as onPress instead of onClick. And instead of Routing, you need to add Navigator Stack Navigator, Drawer Navigator, Tab Navigator according to your requirements.

Please refer to React Native Documentation and for navigation React Navigation.

Answer 2

You will have to manually make changes to the code in order to make it work with react-native. We dont have this much of similarity to make React work with React native. You will have to use the native elements for it work.