title: How do I create typescript type definitions for react-native native ui component?
body: <p>Let us say that I have a react native native UI component like the one in <a href="https://medium.com/@yrezgui/create-native-ui-component-in-react-native-6f4b7fe4cc95" rel="nofollow noreferrer">this example</a>. 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.</p>
  
  <p>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?</p>
  
  <p>The iOS/objc side </p>
  
  <ul>
  <li>FoobarView.h:</li>
  </ul>
  
  <pre><code>
      #ifndef FoobarView_h
      #define FoobarView_h
      #import &lt;UIKit/UIKit.h&gt;
      #import &lt;Foundation/Foundation.h&gt;
      @interface FoobarView : UITextView
      @property (nonatomic, assign) BOOL teste;
      @end
      #endif
  
  </code></pre>
  
  <ul>
  <li>FoobarView.m:</li>
  </ul>
  
  <pre><code>
      #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
  
  </code></pre>
  
  <ul>
  <li>FoobarManager.m</li>
  </ul>
  
  <pre><code>
      #import &lt;Foundation/Foundation.h&gt;
      #import &lt;React/RCTViewManager.h&gt;
      #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
  
  </code></pre>
  
  <p>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. </p>
  
  <p>To use it in the javascript side of react native, I'm using this code in FoobarView.js:</p>
  
  <pre><code>import { requireNativeComponent } from 'react-native';
  module.exports = requireNativeComponent('FoobarView');
  </code></pre>
  
  <p>And, finally, i can use FoobarView in a render block:</p>
  
  <pre><code>    &lt;FoobarView style={{width:'100%', height:30}} teste={true} /&gt;
  </code></pre>
  
  <p>My question is:
  How can I define that FoobarView, something defined in the ios, has the property teste, and that teste is a boolean? </p>