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.
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:
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).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.