Branch integration error: TypeError: Cannot read property 'showShareSheet' of undefined

[kraegpoeth]

Hi.

I’m trying to integrate Branch.io into our CRNA/Expo app. I have followed the documentation, and only changed minor things to make it fit our project.

When clicking the designated button we get the following error:

Possible Unhandled Promise Rejection (id: 1):
TypeError: Cannot read property 'showShareSheet' of undefined
TypeError: Cannot read property 'showShareSheet' of undefined
    at ShareButton._onShareLinkPress$ (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:156604:76)
    at tryCatch (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:17044:19)
    at Generator.invoke [as _invoke] (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:17217:24)
    at Generator.prototype.(anonymous function) [as next] (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:17087:23)
    at tryCatch (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:17044:19)
    at invoke (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:17120:22)
    at blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:17148:13
    at tryCallTwo (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:16382:7)
    at doResolve (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:16546:15)
    at new Promise (blob:file:///38d00e7c-a980-4285-ad3f-f1d562013495:16405:5)

This is the code:

import React, { Component } from 'react';
import { TouchableOpacity, Share, Platform, Alert } from 'react-native';
import { DangerZone } from 'expo';
import PropTypes from 'prop-types';
import styles from './shareButtonStyles.js';
import globalStyles from '@utils/globalStyles';

import Icon from '@components/Icon/Icon';

class ShareButton extends Component {
  componentDidMount() {
    this._createBranchUniversalObject();
  }

  render() {
    return (
    <TouchableOpacity style={[styles.container, styles.style]} onPress={this._onShareLinkPress.bind(this)}>
      <Icon
        type='ion'
        name='ios-share-outline'
        size={30}
        color={globalStyles.colors.black}
      />
    </TouchableOpacity>
    );
  }

  _share() {
    let shareObj = {
      message: this.props.link,
      title: this.props.title,
    };
    if (Platform.OS === 'ios') {
      shareObj.url = this.props.link;
      shareObj.subject = 'share Pj recipe';
    } else {
      shareObj.dialogTitle = 'share Pj recipe';
    }
    Share.share(shareObj)
      .then(result => console.log(result))
      .catch(error => console.log(error));
  }

  async _createBranchUniversalObject() {
    const { recipe } = this.props.recipe;
    Alert.alert('hello1');
    this._branchUniversalObject = await DangerZone.Branch.createBranchUniversalObject(
      `recipe_${recipe.id}`,
      {
        title: recipe.title,
        contentImageUrl: recipe.thumbnail,
        contentDescription: recipe.description,
        // This metadata can be used to easily navigate back to this screen
        // when implementing deep linking with `Branch.subscribe`.
        metadata: {
          screen: 'recipeScreen',
          params: JSON.stringify({ recipeId: recipe.id }),
        },
      }
    );
    Alert.alert('hello2');
  }

  async _onShareLinkPress() {
    const shareOptions = {
      messageHeader: this.props.recipe.title,
      messageBody: `Checkout my new recipe!`,
    };
    await this._branchUniversalObject.showShareSheet(shareOptions);
  };
}

ShareButton.propTypes = {
  link: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  style: PropTypes.object,
};

export default ShareButton;

I have already tried building it as a standalone app. The button remains unresponsive.

It seems like this._branchUniversalObject doesn’t get initialized when this._createBranchUniversalObject() is called. Notice the two alerts in that function. The first one gets called, the second one doesn’t. Perhaps DangerZone.Branch.createBranchUniversalObject() never returns the promise.

Any help would be greatly appreciated.

[notbrent]

cc @janic