question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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



Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

26reactions
hramoscommented, 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.

3reactions
t4deucommented, Jul 7, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-native: TypeError: expected dynamic type `double', but ...
dispatchViewManagerCommand at argument index 0) appears. It seems that findNodeHandle returns null. But how to fix this issue?? React Native ...
Read more >
Bountysource
TypeError : expected dynamic type `double', but had type `null' (constructing arguments for UiManager.dispatchViewManagerCommand at argument index 0)
Read more >
react-native-router-flux/CHANGELOG.md - UNPKG
153, - Transition history using this same scene but with other parameters ... 701, - Element type is invalid: expected a string.
Read more >
react-native-codegen | Yarn - Package Manager
Crash on pre-26 Android devices when setting TextInput content type (d4aa1e7a52 by @hramos); Crash when scroll to index 0 in a SectionList (8fa116cc0e...
Read more >
Make your React components great with TypeScript mapped ...
You may have heard someone claiming how great type safety is. ... Union types, Index types, mapped types and conditional types.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found