Move styling within the Router.js

Router.js

import React from 'react';
import { View } from 'react-native';
import { Scene, Router } from 'react-native-router-flux';
import { connect } from 'react-redux';
import _ from "lodash";
import WelcomeBeeWell from './components/WelcomeBeeWell';
import Login from './components/Login';
import ForgotPassword from './components/ForgotPassword';
import EmailSent from './components/EmailSent';
import BrandWelcome from './components/BrandWelcome';
import BrandOneMore from './components/BrandOneMore';
import CareplanWelcome from './components/CareplanWelcome';
import RegisterStep1 from './components/registration/RegisterStep1';
import RegisterStep2 from './components/registration/RegisterStep2';
import RegisterStep3 from './components/registration/RegisterStep3';
import RegisterStep4 from './components/registration/RegisterStep4';
import RegisterStep5 from './components/registration/RegisterStep5';
import Milestones from './components/Milestones';
import Tasks from './components/Tasks';
import Pages from './components/Pages';
import Profile from './components/Profile';
import Settings from './components/Settings';
import WeightEntry from './components/WeightEntry';
import AccessCode from './components/AccessCode';
import * as Colors from './res/styling/colors';
import { Actions } from 'react-native-router-flux';

function RouterComponent({primary}) {
  
  const styling = {
    navBar: {
      backgroundColor: primary, borderBottomColor: 'transparent'
    }
  }
  
  return (
    <Router>
      <Scene key="root">
          <Scene
            key="welcome"
            component={WelcomeBeeWell}
            initial
            hideNavBar/>
          <Scene
            key="login"
            component={Login}t
            title="BeeWell Log In"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={styling.navBar}
            headerTintColor="white" />
          <Scene
            key="forgotPass"
            component={ForgotPassword}
            title="BeeWell Log In"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={styling.navBar}
            headerTintColor="white" />
          <Scene
            key="emailSent"
            component={EmailSent}
            title="BeeWell Log In"
            navigationBarStyle={styling.navBar}
            headerTintColor="white" />

          <Scene
            key="step1"
            component={RegisterStep1}
            title="Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: '#002F5F', borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="step2"
            component={RegisterStep2}
            title="Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: '#002F5F', borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="step3"
            component={RegisterStep3}
            title="Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={styling.navBar}
            headerTintColor="white" />

          <Scene
            key="step4"
            component={RegisterStep4}
            title="Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: '#002F5F', borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="step5"
            component={RegisterStep5}
            title="Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: '#002F5F', borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="brandWelcome"
            component={BrandWelcome}
            title="Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: '#002F5F', borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="brandOneMore"
            component={BrandOneMore}
            title="BeeWell Registration"
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: '#002F5F', borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="careplanWelcome"
            component={CareplanWelcome}
            hideNavBar
          />

          <Scene
            key="milestones"
            component={Milestones}
            title="Provider Name"
            titleStyle = {{fontFamily: 'museo-sans-500'}}
            renderLeftButton={<View></View>}
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: Colors.BEEWELL.primary, borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="tasks"
            component={Tasks}
            title="Care Plan"
            onBack={(() => Actions.milestones())}
            titleStyle = {{fontFamily: 'museo-sans-500'}}
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: Colors.BEEWELL.primary, borderBottomColor: 'transparent'}}
            headerTintColor="white" />

          <Scene
            key="pages"
            component={Pages}
            title="Task"
            onBack={(() => Actions.tasks())}
            titleStyle = {{fontFamily: 'museo-sans-500'}}
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: Colors.BEEWELL.primary, borderBottomColor: 'transparent'}}
            headerTintColor="white"
          />

          <Scene
            key="profile"
            component={Profile}
            title="Profile"
            hideNavBar
          />
          <Scene
            key="settings"
            component={Settings}
            title="Settings"
            titleStyle = {{fontFamily: 'museo-sans-500'}}
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: Colors.BEEWELL.primary, borderBottomColor: 'transparent'}}
            headerTintColor="white"
          />
          <Scene
            key="weight"
            component={WeightEntry}
            title="Weight Progress"
            titleStyle = {{fontFamily: 'museo-sans-500'}}
            backButtonTextStyle={{ visibility: 'hidden'}}
            navigationBarStyle={{backgroundColor: Colors.BEEWELL.primary, borderBottomColor: 'transparent'}}
            headerTintColor="white"
          />
          <Scene
            key="accessCode"
            component={AccessCode}
            title="Registration"
            titleStyle = {{fontFamily: 'museo-sans-500'}}
            navigationBarStyle={{backgroundColor: Colors.BEEWELL.primary, borderBottomColor: 'transparent'}}
            headerTintColor="white"
          />
      </Scene>
    </Router>

  );
};


const mapStateToProps = (reduxState) => {
  const providerKey = "patientData.providerCode";
  const providerCode = _.get(reduxState, providerKey, "BEEWELL");

  return { primary: _.get(Colors, [providerCode, "primary"]),
           secondary: _.get(Colors, [providerCode, "secondary"]),
           tertiary: _.get(Colors, [providerCode, "tertiary"]),
         };
};

//export default RouterComponent;
export default connect (mapStateToProps, {})(RouterComponent);