Principal.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  ImageBackground
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import {connect} from 'react-redux';

import { modificaEmail, modificaSenha } from '../actions/AutenticacaoAction';

const bg = require('../imgs/bg.png');

const Principal = (props) => {
  console.log(props)
    return (
      <ImageBackground style={{flex:1} source={bg}>

            <View style={styles.topo}>
              <Text style={styles.txtTopo}>
                WhatsApp Clone!
              </Text>
            </View>

            <View style={styles.centro}>
              <TextInput  style={{fontSize: 20, height: 45}} placeholder='E-mail'/>
              <TextInput secureTextEntry  style={{fontSize: 20, height: 45}} placeholder='Senha'/>

              <TouchableHighlight  onPress={() => Actions.Cadastrar()} activeOpacity={0.3} underlayColor='#F5FCFF'>
                <Text style={{fontSize: 20}}>Ainda não tem cadastro? Cadastre-se </Text>
              </TouchableHighlight>
            </View>

            <View style={styles.bottom}>
              <Button title='Entrar' color='#115E54' onPress={() => false} />
            </View>

      </ImageBackground>
    );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    padding: 10,

  },
  txtTopo: {
    fontSize: 25,
    textAlign: 'center',
    margin: 10
  },
  topo: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centro: {
    flex: 2
  },
  bottom: {
    flex: 2
  }
});

const mapStateToProps = (state) => (
  {
    email: state.AutenticacaoReducer.email,
    senha: state.AutenticacaoReducer.senha
  }
)



const PrincipalComponent = connect(mapStateToProps, { modificaEmail, modificaSenha })(Principal);

export {
  PrincipalComponent as Principal
};