Skip to content

TypeError: expected dynamic type double', but had type null' (constructing arguments for UiManager.dispatchViewManagerCommand at argument index 0) #14633

@mikhail709

Description

@mikhail709

Hi. I try to implement simple LoginScreen with two input fields, LogIn button and Forgot password button. Navigation between the screens is implemented with the help of "react-navigation": "1.0.0-beta.11". So, when I click on Forgot password at my LoginScreen and then turn back to the LoginScreen and then click on any of the input fields - TypeError: expected dynamic type double', but had type null' (constructing arguments for UiManager.dispatchViewManagerCommand at argument index 0) appears.
It seems that findNodeHandle returns null. But how to fix this issue??

React Native version: 0.44
React version: 16.0.0-alpha.6
Platform: Android

LoginScreen render method:

render() {
    const passInputContainerStyle = this.state.passwordError === I18n.t('error.password.invalid')
      ? styles.inputContainerLarge : styles.inputContainer;
    if (this.props.isLoggedIn) {
      Keyboard.dismiss();
      NavigationUtils.navigateTo(this.props.navigation, 'Settings');
    }
    let errorGuy = this.verifyInputFieldsErrors();
    return (
      <DismissKeyboardView style={styles.container}>
        <View style={styles.mainContainer}>
          <View style={styles.logoContainer}>
            <Image
              style={styles.logo}
              source={images.logo} />
          </View>
          <View style={styles.inputContainer}>
            <EditTextWithError
              hint={I18n.t('hint.email')}
              errorMsg={errorGuy.emailErrorMessage}
              errorMsgVisibility={errorGuy.emailErrorVisibility}
              keyboardType='email-address'
              eyeVisibility={false}
              eyeHidePassModeEnabled={false}
              isNextMode={true}
              nextRef={this.state.refNextInput}
              onEndEditing={() => this.onEndEditingEmail()}
              onTextChanged={(text) => this.onEmailTextChanged(text)} />
          </View>
          <View style={passInputContainerStyle}>
            <EditTextWithError
              hint={I18n.t('hint.password.common')}
              errorMsg={errorGuy.passwordErrorMessage}
              errorMsgVisibility={errorGuy.passwordErrorVisibility}
              eyeVisibility={true}
              eyeHidePassModeEnabled={true}
              isNextMode={false}
              ref={(input) => this.passInput = input}
              onEndEditing={() => this.onEndEditingPassword()}
              onTextChanged={(text) => this.onPasswordTextChanged(text)} />
          </View>
          <TouchableOpacity style={styles.btnContainer} onPress={() => this.onLogInPressed()}>
            <Text style={styles.btnText}>{I18n.t('login.btnLogIn')}</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.fupContainer} onPress={() => this.onForgotPasswordPressed()}>
            <Text style={styles.fupText}>{I18n.t('login.forgotPass')}</Text>
          </TouchableOpacity>
          {this.renderFooter()}
        </View>
      </DismissKeyboardView>
    );
  }`
```

**EditTextWithError code:** 

`import React, { Component, PropTypes } from 'react';
import {
  Text,
  View,
  TextInput,
  Image,
  TouchableHighlight
} from 'react-native';
import images from '../../config/images';

const styles = require('./styles').default;

export default class EditTextWithError extends Component {
  state = {
    hideInput: false
  };

  static propTypes = {
    hint: PropTypes.string,
    errorMsg: PropTypes.string,
    errorMsgVisibility: PropTypes.bool,
    keyboardType: PropTypes.any,
    eyeVisibility: PropTypes.bool,
    eyeHidePassModeEnabled: PropTypes.bool,
    isNextMode: PropTypes.bool,
    nextRef: PropTypes.any,
    onTextChanged: PropTypes.func,
    onEndEditing: PropTypes.func
  };

  static defaultProps = {
    keyboardType: 'default',
    errorMsgVisibility: false,
    eyeVisibility: false,
    eyeHidePassModeEnabled: false,
    isNextMode: false,
    onTextChanged: (smth) => { },
    onEndEditing: () => { }
  }

  getFocus() {
    this.editText.focus();
  }

  componentWillMount() {
    this.state.hideInput = this.props.eyeHidePassModeEnabled;
  }

  render() {
    const { hint, errorMsg, errorMsgVisibility, keyboardType, eyeVisibility, eyeHidePassModeEnabled, isNextMode, nextRef, onTextChanged, onEndEditing }
      = this.props;
    let icon = this.state.hideInput ? images.eye.on : images.eye.off;
    const isErrored = errorMsgVisibility ? styles.errorBorder : styles.normalBorder;
    let returnKeyType = isNextMode ? "next" : "go";
    return (
      <View style={styles.container}>
        <TextInput style={[styles.input, isErrored]}
          placeholder={hint}
          underlineColorAndroid='transparent'
          autoCorrect={false}
          secureTextEntry={this.state.hideInput}
          multiline={false}
          keyboardType={keyboardType}
          placeholderTextColor='rgb(153, 153, 153)'
          returnKeyType={returnKeyType}
          onSubmitEditing={() => isNextMode ? nextRef.getFocus() : {}}
          onChangeText={(text) => onTextChanged(text)}
          onEndEditing={() => onEndEditing()}
          ref={(textEdit) => this.editText = textEdit} />
        {
          errorMsgVisibility &&
          <Text style={styles.errorText}>{errorMsg}</Text>
        }
        {
          eyeVisibility &&
          <TouchableHighlight style={styles.eyeContainer} underlayColor='transparent'
            onPress={() => this.setState({ hideInput: !this.state.hideInput })} >
            <Image source={icon} style={styles.eye} />
          </TouchableHighlight>
        }
      </View>
    );
  }
}`

**Navigation code:**
`export const LoginStack = StackNavigator({
  Splash: {
    screen: SplashScreen,
    navigationOptions: {
      header: null,
    }
  },
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null,
    }
  },
  forgotPass: {
    screen: ForgotPasswordScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <BackIcon nav={navigation} />,
      headerTitle: I18n.t('forgotPass.screenTitle'),
      headerStyle: styles.toolbar,
      headerTitleStyle: styles.toolbarTitle
    }),
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <BackIcon nav={navigation} />,
      headerTitle: I18n.t('settings.screenTitle'),
      headerStyle: styles.toolbar,
      headerTitleStyle: styles.toolbarTitle
    }),
  }
});

const BackIcon = ({ nav }) => (
  <TouchableOpacity onPress={() => nav.goBack()} style={styles.backIconContainer}>
    <Image source={images.backArrow} style={styles.backIcon} />
  </TouchableOpacity>
);


import { NavigationActions } from 'react-navigation';

export default class NavigationUtils {

    static navigateWithoutAnAbilityToGoBackTo(navigation, _routeName) {
        const actionToDispatch = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: _routeName })]
        })
        navigation.dispatch(actionToDispatch);
    }

    static navigateTo(navigation, _routeName) {
        navigation.navigate(_routeName);
    }
}
`



Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions