LoginContainer.js

import React, {
  Component,
  PropTypes,
  View,
  ScrollView,
  Text,
  TextInput,
  Image,
  ToastAndroid,
} from 'react-native'
import { connect }             from 'react-redux/native'
import { bindActionCreators }  from 'redux'
import * as authActionCreators from '../actions/auths'
import LoginForm               from '../components/LoginForm'

class LoginContainer extends Component {
  static propTypes = {
    routes:    PropTypes.object.isRequired,
    users:     PropTypes.object.isRequired,
    navigator: PropTypes.object.isRequired,
    actions:   PropTypes.object.isRequired,
  }

  async componentWillMount () {
    await this.props.actions.checkAuthentication()

    const { phoneNumber, password } = this.props.users.currentUser

  }

  handleLogin = async (username: string, password: string) => {
    const { routes, navigator, actions } = this.props

    await actions.authenticating(username, password)

    if (!this.props.users.lastError) {
      navigator.replace(routes.products())
    }
  }

  render () {
    const { lastError, isFetching } = this.props.users

    return (
      <Image
        style={styles.container}
        source={{ uri: 'background-login', isStatic: true }}
      >
        <LoginForm
          title='Welcome'
          subtitle={lastError}
          loading={isFetching}
          onSubmit={this.handleLogin.bind(this)}
        />
      </Image>
    )
  }
}

function mapStateToProps (state) {
  return { users: state.users.toJS() }
}

function mapDispatchToProps (dispatch) {
  return {
    actions: bindActionCreators(authActionCreators, dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

const styles = ...

LoginForm.js

import React, {
  Component,
  PropTypes,
  View,
  Alert,
  Text,
  TextInput,
} from 'react-native'
import Loading from './Loading'
import { Button } from 'react-native-material-design'

export default class LoginForm extends Component {
  static propTypes = {
    containerStyle:      PropTypes.object,
    inputContainerStyle: PropTypes.object,
    titleStyle:          PropTypes.object,
    subtitleStyle:       PropTypes.object,
    title:               PropTypes.string,
    subtitle:            PropTypes.string,
    usernameLabel:       PropTypes.string,
    passwordLabel:       PropTypes.string,
    loading:             PropTypes.bool,
    onSubmit:            PropTypes.func.isRequired,
  }

  static defaultProps = {
    title:         'Welcome',
    usernameLabel: 'Username',
    passwordLabel: 'Password',
    loading:       false,
  }

  state = {
    username: '',
    password: ''
  }

  handleUsernameChange = (text) => {
    this.setState({ username: text })
  }

  handlePasswordChange = (text) => {
    this.setState({ password: text })
  }

  handleLogin = () => {
    const usernameValue = this.state.username
    const passwordValue = this.state.password

    if (usernameValue && passwordValue) {
      // this.setState({ username: '', password: '' })
      this.props.onSubmit(usernameValue, passwordValue)
      debugger
    }
    else {
      Alert.alert('Error', 'Username/password must be filled')
    }
  }

  renderFormIfNotLoading = () => {
    const {
      inputContainerStyle,
      filteredProducts,
      loading,
      usernameLabel,
      passwordLabel,
    } = this.props

    const { username, password } = this.state

    if (loading) return <Loading />

    return (
      <View style={[styles.inputContainer, inputContainerStyle]}>
        <TextInput
          ref='username'
          value={username}
          placeholder={usernameLabel}
          keyboardType='numeric'
          autoFocus={true}
          onChangeText={this.handleUsernameChange}
          onSubmitEditing={event => this.refs.password.focus()}
        />

        <TextInput
          ref='password'
          value={password}
          placeholder={passwordLabel}
          secureTextEntry={true}
          onChangeText={this.handlePasswordChange}
          onSubmitEditing={event => this.handleLogin()} // <-- this.handleLogin is working
        />

        <Button
          onPress={() => this.handleLogin()} // <-- throw setState warning when button clicked
          onLongPress={() => this.handleLogin()} // <-- throw setState warning when button clicked
          primary='googleRed'
          theme='dark'
          raised={true}
          value='Login'
        />
      </View>
    )
  }

  render () {
    const {
      containerStyle,
      titleStyle,
      subtitleStyle,
      title,
      subtitle,
    } = this.props

    return (
      <View style={[styles.container, containerStyle]}>
        <Text style={[styles.title, titleStyle]}>
          {title}
        </Text>

        <Text style={[styles.subtitle, subtitleStyle]}>
          {subtitle}
        </Text>

        {this.renderFormIfNotLoading()}
      </View>
    )
  }
}

const styles = ...