0

I am trying to export the Send Button from Facebook Messenger as a Native UI Component in react native. I am not getting any errors, but I am also not seeing the button.

my references for this are: https://facebook.github.io/react-native/docs/native-components-ios.html and https://developers.facebook.com/docs/messenger/ios#messenger_buttons

Here is what I have so far:

RCTFBMessengerButtonManager.m

#import "RCTViewManager.h"
#import <FBSDKMessengerShareKit/FBSDKMessengerShareKit.h>

@interface RCTFBMessengerButtonManager : RCTViewManager
@end


@implementation RCTFBMessengerButtonManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
  return [FBSDKMessengerShareButton rectangularButtonWithStyle:FBSDKMessengerShareButtonStyleBlue];
}

@end

FBMessengerButton.js is where I get the Native component:

var { requireNativeComponent } = require('react-native');

module.exports = requireNativeComponent('RCTFBMessengerButton', null);

and my send component where I implement the FBMesssengerButton component:

'use strict';

var React = require('react-native');

var {
    View,
} = React;


var FBMessengerButton = require('../Components/FBMessengerButton');

class Send extends React.Component{

    constructor(props){
        super(props);
    }


    render() {
        return (
            <View>
                <FBMessengerButton />
            </View>
        );
    }
}

module.exports = Send;
Fisch
  • 3,775
  • 1
  • 27
  • 38

1 Answers1

2

The problem was not that the FB Messenger was not appearing, it turned out that background and size of the button was not coming through to React Native. By setting the width, height, and background color on the <FBMessenger> component, the button was fine.

The next issue was related to binding events on the button which I also resolved.

I turned my solution into an npm package that can be found here: https://github.com/1985media/react-native-facebook-messenger

Fisch
  • 3,775
  • 1
  • 27
  • 38
  • I was looking for facebook messenger react native module, yours one looks really good. Gonna give it a try. Thanks for the effort and sharing your solution. – moshfiqur May 30 '16 at 11:06