SignInForm.js

export class SignInForm extends Component {
  constructor(props) {
    super(props);
    this.goToNext = this.goToNext.bind(this);
    this.handleEmailChangeText = this.handleEmailChangeText.bind(this);
    this.handleInputFocus = this.handleInputFocus.bind(this);
    this.handlePasswordChangeText = this.handlePasswordChangeText.bind(this);
    this.handleSignIn = this.handleSignIn.bind(this);
    this.state = {
      email: '',
      password: ''
    };
  }
  goToNext(ref) {
    return () => this.refs[ref].focus();
  }
  handleEmailChangeText(email) {
    email = (email || '').trim();
    this.setState({ email });
  }
  handleInputFocus(refName, scrollOffset, e) {
    const refNodeHandle = React.findNodeHandle(this.refs[refName]);
    this.props.onInputFocus(refName, this.refs[refName], refNodeHandle, scrollOffset, e);
  }
  handlePasswordChangeText(password) {
    this.setState({ password });
  }
  handleSignIn() {
    this.props.signInUser(this.state.email, this.state.password)
      .catch(emptyFn);
  }
  render() {
    const errMsg = get(this.props.user.get('signInError'), 'message', ' ');
    return (
      <View style={baseStyles.root}>
        <View style={baseStyles.error}>
          <Text style={baseStyles.errorText}>
            {errMsg}
          </Text>
        </View>
        <View style={baseStyles.form}>
          <View style={[baseStyles.field, baseStyles.divider]}>
            <TextInput
              autoCapitalize="none"
              autoCorrect={false}
              keyboardType="email-address"
              onChangeText={this.handleEmailChangeText}
              onFocus={partial(this.handleInputFocus, 'email', 135)}
              onSubmitEditing={this.goToNext('password')}
              placeholder="Email"
              ref="email"
              returnKeyType="next"
              style={baseStyles.input}
              value={this.state.email}
            />
          </View>
          <View style={baseStyles.field}>
            <TextInput
              autoCapitalize="none"
              onChangeText={this.handlePasswordChangeText}
              onFocus={partial(this.handleInputFocus, 'password', 75)}
              placeholder="Password"
              ref="password"
              returnKeyType="go"
              secureTextEntry
              style={baseStyles.input}
              value={this.state.password}
            />
          </View>
        </View>
        <View style={baseStyles.actions}>
          <Button
            isLoading={this.props.user.get('signingIn')}
            onPress={this.handleSignIn}
            style={[baseStyles.button, baseStyles.signInButton]}
            textStyle={baseStyles.signInButtonLabel}
          >
            Sign In
          </Button>
        </View>
      </View>
    );
  }

SignInScreen.js

export class SignInScreen extends Component {
  constructor(props) {
    super(props);
    this.handleInputFocus = this.handleInputFocus.bind(this);
    this.handleKeyboardHidden = this.handleKeyboardHidden.bind(this);
    this.foo = this.foo.bind(this);
  }
  componentWillMount() {
    DeviceEventEmitter.addListener('keyboardWillHide', this.handleKeyboardHidden);
  }
  componentWillUnmount() {
    DeviceEventEmitter.removeListener('keyboardWillHide', this.handleKeyboardHidden);
  }
  handleKeyboardHidden() {
    console.info('hidden!');
  }
  handleInputFocus(refName, refEl, refNodeHandle, scrollOffset, e) {
    setTimeout(() => {
      let scrollResponder = this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        refNodeHandle,
        scrollOffset,
        true
      );
    }, 50);
  }
  // TODO: Somewhere there is a `keyboardWillOpenTo` property on event
  // Look into using that instead of blur/focus above
  handleResponderCapture(e) {
//     const focusField = TextInput.State.currentlyFocusedField();
//     console.info(focusField, e.nativeEvent.target);
//     if (focusField != null && e.nativeEvent.target != focusField){
//       console.info('DISMISS KEYBOARD');
//       dismissKeyboard();
//     }
  }
  render() {
    const reactiveRootStyles = {
      height: Dimensions.get('window').height
    };
    return (
      <ScrollView
        // keyboardDismissMode="on-drag"
        // keyboardShouldPersistTaps
        ref="scrollView"
        // scrollEnabled={false}
        style={baseStyles.root}
      >
        <View
          onStartShouldSetResponderCapture={this.handleResponderCapture}
          ref="root"
          style={[baseStyles.container, reactiveRootStyles]}
        >
          <View style={baseStyles.hero}>
            <View style={baseStyles.content}>
              <SignInForm
                onInputFocus={this.handleInputFocus}
                signInUser={this.props.signInUser}
                user={this.props.user}
              />
            </View>
          </View>
          <View style={baseStyles.actions}>
            <Button
              onPress={this.props.onCreateAccount}
              style={baseStyles.textButton}
              textStyle={baseStyles.textButtonLabel}
            >
              Create Account
            </Button>
            <Button
              onPress={this.props.onForgotPassword}
              style={baseStyles.textButton}
              textStyle={baseStyles.textButtonLabel}
            >
              Forgot Password
            </Button>
          </View>
        </View>
      </ScrollView>
    );
  }
}