Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mikhail709 opened this issue Jun 20, 2017 · 5 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@mikhail709
Copy link

mikhail709 commented Jun 20, 2017

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);
    }
}
`



@hramos
Copy link
Contributor

hramos commented Jun 20, 2017

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.

@hramos hramos closed this as completed Jun 20, 2017
@mikhail709
Copy link
Author

mikhail709 commented Jun 21, 2017

Ok, I'm sure StackOverflow is amazing for Q&A. But still it is TextInput issue! As any other components stay ok
Sorry for my English
Reopen the issue, please

@t4deu
Copy link
Contributor

t4deu commented Jul 7, 2017

Dude, you can even close the issue, but don't need to be rude

@Moumene
Copy link

Moumene commented Nov 2, 2017

Any new about this issue?

@Moumene
Copy link

Moumene commented Jan 8, 2018

In my case the issue was in react-native-elements it throws the native error

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

@facebook facebook locked as resolved and limited conversation to collaborators Jun 20, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

5 participants