androidiosobjective-creact-nativenative-module

Call exported method in react native


I want to create a view in Objective C and use in react native, but don't know how to do this Here's my code: Obj-C:

#import "DGTAuthenticateButtonView.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "UIView+React.h"
#import <DigitsKit/DigitsKit.h>

@implementation DGTAuthenticateButtonView

RCT_EXPORT_MODULE()
- (UIView *) view {
  UIButton *button = [[UIButton alloc] init];
  [button setTitle:@"REGISTER" forState:UIControlStateNormal];
  return button;

}

RCT_EXPORT_METHOD(authenticate) {
  Digits *digits = [Digits sharedInstance];
  DGTAuthenticationConfiguration *configuration = [[DGTAuthenticationConfiguration alloc] initWithAccountFields:DGTAccountFieldsDefaultOptionMask];
  configuration.phoneNumber = @"+345555555555";
  [digits authenticateWithViewController:nil configuration:configuration completion:^(DGTSession *newSession, NSError *error){
  }];

}

@end

I want to call authenticate in TouchableOpacity but it didn't work :(

import React, {Component} from 'react';
import {
    AppRegistry,TouchableOpacity
} from 'react-native';



var requireNativeComponent = require('requireNativeComponent');

var DGTAuthenticateButtonView = requireNativeComponent('DGTAuthenticateButtonView', DGTAuthenticateButtonView);

class TestProj extends Component {
    render() {
        return (

            <TouchableOpacity style={{flex: 1, backgroundColor: 'green'}}
                onPress={() => DGTAuthenticateButtonView.authenticate()}
            />

        )
    }
}

AppRegistry.registerComponent('TestProj', () => TestProj);

Anyone know how to do this? Thanks in advance.


Solution

  • It seems that's you're mixing 2 different concepts here.

    You can either create a Native UI Component - a native view that you can use as a component in your RN render functions; or you can create a Native Module - a module which allows you to add native functionality and call it from your JS code, this module doesn't have a view.

    As far as I can tell (you didn't include the code for your RCTViewManager subclass), you're attempting to create a Native UI Components on the native side (which returns a view), but not using it as such in your JS (not used as a component in your render). You should also know that you can't simply call methods directly on your native views like you're trying to do here.

    I suggest that you use one of following solutions:

    1. If you really need a customized native UI - follow the instruction for creating a Native UI Component and then use your component in your render function. You can then communicate the button press using a prop that is mapped to a callback (see here about events from native to JS).
    2. If you don't need a custom UI (you want to keep using TouchableOpacity as in your example) you can follow the instruction to create a Native Module. You'll then be able to call your authenticate method statically as you were trying to do here to perform only the native logic. You can even modify the authenticate method to receive additional parameters - a reject/resolve promise or a callback to notify the JS when it's done.