Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How do I create typescript type definitions for react-native native ui component?

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>