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.