undefined is not and object (evaluating '_props[registrationName]')

Question

react-native:0.43.3

The problem only occurs in Android system, iOS is fine. When I touch a TouchableOpacity component, the onTouch function won't be executed.

Anyone found this problem?

I built a Calendar with RN. The problem is that when I click the Day unit on Android devices or emulators I'll get the error undefined is not and object (evaluating '_props[registrationName]'). But it's okay to click it on iOS devices and emulators. The Day component' code is like this:

        <TouchableOpacity style={styles.calendarRowUnit} onPress={() => this.props.onSelect(this.props.date)}>
            <View style={dateWrapperStyle}>
                <Text style={dateTextStyle}>{dateString}</Text>
            </View>
        </TouchableOpacity>

And the error image: error info iamge

I've found that only when I touch the Text area the error will occur. I don't know it's a react-native bug or my fault. The error never occured before I updated the react-native version to 0.43.3.

Sat

Provide more context please – Pluviometer

Sorry, I only wanted to ask someone who met the problem for more information and I had no idea about it. Maybe I've found the problem. I'll edit the question right now. – Sat

Answer 1

/**
   * @param {object} inst The instance, which is the source of events.
   * @param {string} registrationName Name of listener (e.g. `onClick`).
   * @return {?function} The stored callback.
   */
  getListener: function(inst, registrationName) {
    var listener;

    // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
    // live here; needs to be moved to a better place soon
    if (typeof inst.tag === 'number') {
      const props = EventPluginUtils.getFiberCurrentPropsFromNode(
        inst.stateNode
      );
      if (!props) {
        // Work in progress.
        return null;
      }
      listener = props[registrationName];
      if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
        return null;
      }
    } else {
      if (typeof inst._currentElement === 'string') {
        // Text node, let it bubble through.
        return null;
      }
      if (!inst._rootNodeID) {
        // If the instance is already unmounted, we have no listeners.
        return null;
      }
      const props = inst._currentElement.props;
      listener = props[registrationName];
      if (shouldPreventMouseEvent(registrationName, inst._currentElement.type, props)) {
        return null;
      }
    }

    invariant(
      !listener || typeof listener === 'function',
      'Expected %s listener to be a function, instead got type %s',
      registrationName,
      typeof listener
    );
    return listener;
  },

There's currently a bug where if the Text inside the TouchableOpacity has a number it will error out. The way to fix it for the moment is to cast the number to a string and it will trigger the String check and throw a null appropriately.

EX:

Before: <Text>16</Text> After: <Text>String(16)</Text>

Calvillo

I had the same problem ... and indeed this was the right solution. Thank you. – Invalid

Awesome! Thank you! – Sat

the String('text') should be in {} like that: {String(16)} – Balduin

Answer 2

There is a bug in #12905 <Text /> This bug is specific to RN 0.43.x and has been fixed in later versions. The bug was , Whenever there is a number inside <Text /> then it will cause this error. The fix for this is :

1. Upgrade React Native with latest versions.
2. TypeCast the value to string.

For Example,

• <Text> {100} </Text> to <Text> {''100} </Text>
• <Text> {100} </Text> to <Text> {String(100)} </Text>
• <Text> {100} </Text> to <Text> {(100).toString} </Text>

Martyrize