Let us say that I have a react native native UI component like the one in this example. How do I create a typescript type definition for it, like the ones that can be imported, for example with 'npm i @types/somelib'? I didn't find explanations about how to do this in the documentation.
The idea is to be able to use the native component seamlessly in a react-native typescript project and for that I need to create the type definition for native components. So, how do I create typescript type definitions for native components?
The iOS/objc side
- FoobarView.h:
#ifndef FoobarView_h #define FoobarView_h #import <UIKit/UIKit.h> #import <Foundation/Foundation.h> @interface FoobarView : UITextView @property (nonatomic, assign) BOOL teste; @end #endif
- FoobarView.m:
#import "FoobarView.h" @implementation FoobarView -(void) setTeste:(BOOL)teste { if (teste == YES) { [self setText:@"é true"]; }else { [self setText:@"é false"]; } } -(BOOL)getTeste { if ([[self text] isEqual:@"é true"]) { return YES; }else { return NO; } } @end
- FoobarManager.m
#import <Foundation/Foundation.h> #import <React/RCTViewManager.h> #import "FoobarView.h" @interface FooManager : RCTViewManager @end @implementation FooManager RCT_EXPORT_MODULE(FoobarView) RCT_EXPORT_VIEW_PROPERTY(teste, BOOL)+(BOOL) requiresMainQueueSetup { return YES; } - (UIView*)view { FoobarView *v = [[FoobarView alloc]init]; return v; } @end
So, FoobarView is a native iOS view, written in objc. It is not a react native ui component. I am using a simple descendent from UITextView but it could be anything, like a SceneKit view.
To use it in the javascript side of react native, I'm using this code in FoobarView.js:
import { requireNativeComponent } from 'react-native';module.exports = requireNativeComponent('FoobarView');
And, finally, i can use FoobarView in a render block:
<FoobarView style={{width:'100%', height:30}} teste={true} />
My question is:How can I define that FoobarView, something defined in the ios, has the property teste, and that teste is a boolean?