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?