title: Converting React to React Native
body: <p>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 &quot;Home&quot; on top. This what i have translated of the code so far.</p>
  <p>index.js</p>
  <pre><code>import {AppRegistry} from 'react-native';
  import App from './App';
  import {name as appName} from './app.json';
  
  AppRegistry.registerComponent(appName, () =&gt; App);
  </code></pre>
  <p>App.js</p>
  <pre><code>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,
                  '&amp;: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: () =&gt; React$Node = () =&gt; {
      return (
          &lt;Provider store={store}&gt;
              &lt;MuiThemeProvider theme={theme}&gt;
                  &lt;View style={{flex: 1}}&gt;
                      &lt;Routes/&gt;
                  &lt;/View&gt;
              &lt;/MuiThemeProvider&gt;
          &lt;/Provider&gt;
      );
  };
  
  export default App;
  </code></pre>
  <p>Routes.js</p>
  <pre><code>import React from 'react';
  import {Router, Scene} from 'react-native-router-flux';
  import Login from '../pages/login';
  
  const Routes = () =&gt; (
      &lt;Router&gt;
          &lt;Scene key=&quot;root&quot;&gt;
              &lt;Scene key=&quot;home&quot; component={Login} title=&quot;Home&quot; initial={true}/&gt;
          &lt;/Scene&gt;
      &lt;/Router&gt;
  );
  
  export default Routes;
  </code></pre>
  <p>/src/page/login/index.js</p>
  <pre><code>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 =&gt; {
                      setRedirect(true);
                  },
                  err =&gt; {
                      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 &lt;Redirect to={APP_ROUTES.timeTracker}/&gt;;
      }
      return (
          &lt;Style.Section&gt;
              &lt;Style.Img src={Logo} alt=&quot;toki timer logo&quot;/&gt;
              &lt;Style.Hero&gt;
                  &lt;Style.Title&gt;Welcome back!&lt;/Style.Title&gt;
                  &lt;Style.Subtitle&gt;Log in to continue&lt;/Style.Subtitle&gt;
              &lt;/Style.Hero&gt;
              &lt;Style.Form onSubmit={handleSubmit}&gt;
                  &lt;Style.FormGroup&gt;
                      &lt;Input
                          id=&quot;username&quot;
                          name=&quot;username&quot;
                          placeholder=&quot;Username&quot;
                          backgroundColor={theme}
                          onChange={handleChange}
                          value={values.username || ''}
                          hasError={errors.username}
                      /&gt;
                      {errors.username &amp;&amp; &lt;Style.ErrorMessage&gt;{errors.username}&lt;/Style.ErrorMessage&gt;}
                  &lt;/Style.FormGroup&gt;
  
                  &lt;Style.FormGroup&gt;
                      &lt;Input
                          id=&quot;password&quot;
                          name=&quot;password&quot;
                          type=&quot;password&quot;
                          placeholder=&quot;Password&quot;
                          backgroundColor={theme}
                          onChange={handleChange}
                          value={values.password || ''}
                          hasError={errors.password}
                      /&gt;
                      {errors.password &amp;&amp; &lt;Style.ErrorMessage&gt;{errors.password}&lt;/Style.ErrorMessage&gt;}
                      {errorLogin &amp;&amp; &lt;Style.ErrorMessage&gt;{errors.login}&lt;/Style.ErrorMessage&gt;}
                  &lt;/Style.FormGroup&gt;
                  &lt;Button name=&quot;Login&quot; type=&quot;submit&quot;/&gt;
              &lt;/Style.Form&gt;
              &lt;Style.Hero&gt;
                  &lt;Style.BottomLinks&gt;
                      &lt;Style.Link to={APP_ROUTES.forgotPassword}&gt;Forgot your password?&lt;/Style.Link&gt;
                  &lt;/Style.BottomLinks&gt;
              &lt;/Style.Hero&gt;
          &lt;/Style.Section&gt;
      );
  }
  
  const mapStateToProps = state =&gt; {
      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};
  
    &amp;: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};
  `;
  </code></pre>
  <p>What I don't seem to understand after reading documentation is how routing works, for example, using react, my Routes.js looks like this:</p>
  <pre><code>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 = () =&gt; (
    &lt;main&gt;
      &lt;Switch&gt;
        &lt;Route exact path={[APP_ROUTES.home, APP_ROUTES.login]} component={Login} /&gt;
        &lt;Route exact path={APP_ROUTES.signUp} component={SignUp} /&gt;
        &lt;Route exact path={APP_ROUTES.forgotPassword} component={ForgotPassword} /&gt;
        &lt;PrivateRoute
          exact
          path={[APP_ROUTES.dashboard, APP_ROUTES.dashboardDeparment]}
          component={Dashboard}
        /&gt;
        &lt;PrivateRoute exact path={APP_ROUTES.timeTracker} component={TimeTracker} /&gt;
        &lt;PrivateRoute exact path={APP_ROUTES.usersList} component={UserList} /&gt;
        &lt;PrivateRoute exact path={APP_ROUTES.departments} component={DepartmentsList} /&gt;
        &lt;PrivateRoute exact path={APP_ROUTES.reports} component={Reports} /&gt;
        &lt;PrivateRoute exact path={APP_ROUTES.userDetails} component={UserProfile} /&gt;
        &lt;PrivateRoute component={NotFound} /&gt;
      &lt;/Switch&gt;
    &lt;/main&gt;
  )
  
  export default Routes
  </code></pre>
  <p>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?</p>