passProps react-native native-starter-kit

actions-route

'use strict';
import type {Action} from './types'
export const PUSH_NEW_ROUTE = "PUSH_NEW_ROUTE";
export const REPLACE_ROUTE = "REPLACE_ROUTE";
export const REPLACE_OR_PUSH_ROUTE = "REPLACE_OR_PUSH_ROUTE";
export const POP_ROUTE = "POP_ROUTE";
export const POP_TO_ROUTE = "POP_TO_ROUTE";

export function replaceRoute(route:string, passProps:any):Action {
    return {
        type: REPLACE_ROUTE,
        route: route,
        passProps: passProps
    }
}

export function pushNewRoute(route:string, passProps:any):Action {
    return {
        type: PUSH_NEW_ROUTE,
        route: route,
        passProps: passProps
    }
}

export function replaceOrPushRoute(route:string, passProps:any):Action {
    return {
        type: REPLACE_OR_PUSH_ROUTE,
        route: route,
        passProps: passProps
    }
}

export function popRoute(passProps:any):Action {
    return {
        type: POP_ROUTE,
        passProps: passProps
    }
}

export function popToRoute(route:string, passProps:any):Action {
    return {
        type: POP_TO_ROUTE,
        route: route,
        passProps: passProps
    }
}

actions-types

'use strict';

export type Action =
  { type: 'PUSH_NEW_ROUTE', route: string }
  | { type: 'POP_ROUTE' }
  | { type: 'POP_TO_ROUTE', route: string }
  | { type: 'REPLACE_ROUTE', route: string }
  | { type: 'REPLACE_OR_PUSH_ROUTE', route: string }
  | { type: 'OPEN_DRAWER' }
  | { type: 'CLOSE_DRAWER' }
  | { type: 'SET_USER', name: string }
  | { type: 'SET_PASSWORD', password: string }
  | { type: 'SET_TOKEN', token: string }
  | { type: 'SET_LIST', list: string }
export type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any;
export type GetState = () => Object;
export type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
export type PromiseAction = Promise<Action>;

actions-user.js

'use strict';

import type {Action} from './types';

export const SET_USER = "SET_USER";
export const SET_PASSWORD = "SET_PASSWORD";
export const SET_TOKEN = "SET_TOKEN";

export function setUser(user:string):Action {
    return {
        type: SET_USER,
        payload: user
    }
}
export function setPassword(password:string):Action {
    return {
        type: SET_PASSWORD,
        payload: password
    }
}
export function setToken(token:string):Action {
    return {
        type: SET_TOKEN,
        payload: token
    }
}

home-index,js

'use strict';

import React, { Component } from 'react'
import { Image, View } from 'react-native'
import { connect } from 'react-redux'
import { openDrawer, closeDrawer } from '../../actions/drawer'
import { popRoute, replaceRoute, replaceOrPushRoute } from '../../actions/route'
import { Container, Header, Title, Content, Button, Icon, List, ListItem, Text, Footer } from 'native-base'
import FooterComponent from './../footer'

import theme from '../../themes/base-theme'
import styles from './styles'
import { setIndex } from '../../actions/list';

class Home extends Component {

    constructor(props) {

        super(props);
        console.log('p ', props, this.state)
    }
    replaceRoute(route) {
        this.props.replaceRoute(route)
    }

    navigateTo(route, index) {
        this.props.closeDrawer()
        this.props.setIndex(index)
        this.props.replaceOrPushRoute(route)
    }
    render() {
        return (
            <Container theme={theme} style={{ backgroundColor: '#384850' }}>
                <Image source={require('../../../images/glow2.png') } style={styles.container} >
                    <Header>
                        <Button transparent> </Button>

                        <Title>{(this.props.name) ? this.props.name + ' ' + this.props.password + ' ' + this.props.token : 'Home jrt'}</Title>

                        <Button transparent onPress={this.props.openDrawer} >
                            <Icon name='ios-menu' style={{ fontSize: 30, lineHeight: 32 }} />
                        </Button>
                    </Header>

                    <Content padder style={{ backgroundColor: 'transparent' }}>
                        <List>
                            <ListItem iconLeft >
                                <Icon name='ios-megaphone'/>
                                <Text>Discussion With Client</Text>
                                <Text style={{ fontWeight: '400' }} note>8: 00 AM</Text>
                            </ListItem>
                            <ListItem iconLeft >
                                <Icon name='ios-people'/>
                                <Text >Daily Stand Up</Text>
                                <Text style={{ fontWeight: '400' }} note>10: 00 AM</Text>
                            </ListItem>
                            <ListItem iconLeft >
                                <Icon name='ios-flag'/>
                                <Text>Finish list Screen</Text>
                                <Text style={{ fontWeight: '400' }} note>By 2: 00 PM</Text>
                            </ListItem>
                            <ListItem iconLeft >
                                <Icon name='ios-restaurant'/>
                                <Text>Lunch Break</Text>
                                <Text style={{ fontWeight: '400' }} note>2: 00 PM</Text>
                            </ListItem>
                        </List>

                        <Button transparent large style={styles.roundedButton} onPress={() => this.replaceRoute('login') }>
                            <Icon name='ios-close-outline' />
                        </Button>
                    </Content>

                    <Footer >
                        <FooterComponent navigator={this.props.navigator} />
                    </Footer>
                </Image>
            </Container>
        )
    }
}

function bindAction(dispatch) {
    return {
        openDrawer: () => dispatch(openDrawer()),
        closeDrawer: () => dispatch(closeDrawer()),
        popRoute: () => dispatch(popRoute()),
        replaceRoute: (route) => dispatch(replaceRoute(route)),
        replaceOrPushRoute: (route) => dispatch(replaceOrPushRoute(route))

    }
}

function mapStateToProps(state) {
    return {
        name: state.user.name,
        password: state.user.password,
        token: state.user.token

    }
}

export default connect(mapStateToProps, bindAction)(Home);

login-index.js

// components/login/index
'use strict'

import React, { Component } from 'react'
import { Platform, DeviceEventEmitter, Dimensions, Image } from 'react-native'
import { connect } from 'react-redux'
import { pushNewRoute, replaceRoute } from '../../actions/route'
import { setUser, setPassword, setToken } from '../../actions/user'
import { Container, Content, Text, InputGroup, Input, Button, Icon, View } from 'native-base'
import login from './login-theme'
import styles from './styles'

class Login extends Component {


  constructor (props) {
    super(props)
    this.state = {
      visibleHeight: Dimensions.get('window').height,
      scroll: false,
      name: '',
      password: '',
      token: 'tok123abc'
    }
  }
  replaceRoute (route) {
    this.setUser(this.state.name)
    this.setPassword(this.state.password)
    this.setToken(this.state.token)
    this.props.replaceRoute(route)
  }

  setUser (name) {
    this.props.setUser(name)
  }
  setPassword (password) {
    this.props.setPassword(password)
  }
  setToken (token) {
    this.props.setToken(token)
  }

  pushNewRoute (route) {
    this.props.pushNewRoute(route)
  }

  render () {
    return (
    <Container>
      <Content style={{backgroundColor: '#384850'}} theme={login} scrollEnabled={this.state.scroll}>
        <Image source={require('../../../images/glow2.png')} style={styles.container}>
          <Image source={require('../../../images/logo.png')} style={styles.shadow}>
            <View style={styles.bg}>
              <InputGroup style={styles.input}>
                <Icon name='ios-person' />
                <Input placeholder='UserName-nsKit52' onChangeText={(name) => this.setState({name})} />
               
              </InputGroup>
              <View style={{marginBottom: 30}}>
                <InputGroup>
                  <Icon name='ios-unlock-outline' />
                  <Input placeholder='PASSWORD' secureTextEntry={true}    onChangeText={(password) => this.setState({password})} /> 
                </InputGroup>
              </View>
              <Button transparent style={{alignSelf: 'flex-end',  marginBottom: (Platform.OS === 'ios') ? 5 : 0, marginTop: (Platform.OS === 'ios') ? -10 : 0}}>
                <Text>
                  Forgot Password
                </Text>
              </Button>
              <Button
                rounded
                block
                style={{marginBottom: 20}}
                onPress={() => this.replaceRoute('home', {name: this.state.name, password: this.state.password})}>
                Login
              </Button>
              <Button transparent style={{alignSelf: 'center'}} onPress={() => this.pushNewRoute('signUp')}>
                <Text>
                  Sign Up Here
                </Text>
              </Button>
            </View>
          </Image>
        </Image>
      </Content>
    </Container>
    )
  }
}



function bindActions (dispatch) {
  return {
    replaceRoute: (route) => dispatch(replaceRoute(route)),
    setUser: (name) => dispatch(setUser(name)),
    setPassword: (password) => dispatch(setPassword(password)),
    setToken: (token) => dispatch(setToken(token))
  }
}

export default connect(null, bindActions)(Login)

reducers-index

'use strict';

import { combineReducers } from 'redux';

import drawer from './drawer';
import route from './route';
import user from './user';


export default combineReducers({

 	drawer,
 	route,
    user
})

reducers-user

'use strict';

import type {Action } from '../actions/types';
import { SET_USER, SET_PASSWORD, SET_TOKEN } from '../actions/user';

export type State = {
    name: string
    , password: string
    , token: string
}

const initialState = {
    name: ''
    , password: ''
    , token: ''
};

export default function (state: State = initialState, action: Action): State {
    if (action.type === SET_USER) {
        return {
            ...state,
            name: action.payload
        };
    }
    if (action.type === SET_PASSWORD) {
        return {
            ...state,
            password: action.payload

        };
    }
    if (action.type === SET_TOKEN) {
        return {
            ...state,

            token: action.payload

        };
    }
    return state;
}