如何为 react-native 本机 ui 组件创建打字稿类型定义？

Question

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?

Answer 1

I guess for the topic starter my answer is a bit late but for everyone else who's facing the same issue I solved it with this approach:

import { requireNativeComponent, HostComponent } from 'react-native';

// Specify all your properties
interface Props {
  teste: boolean;
}

const FoobarView: HostComponent<Props> = requireNativeComponent('FoobarView');

module.exports = FoobarView;

TS will recognize only teste property but in your example you also pass style property to the component, so in order to support it as well you should either specify it explicitly in the Props above, eg

interface Props {
  teste: boolean;
  style: ViewStyle;
}

Or you can extend View properties (if they're suitable for your usecase), eg

interface Props extends ViewProps {
  teste: boolean;
}

Answer 2

So this is definitely a good read

And here is an example of a component.

If you have the component like:

// MapBox.js
import { requireNativeComponent } from ‘react-native’;
// requireNativeComponent automatically resolves this to “MapBoxManager”
module.exports = requireNativeComponent(‘MapBox’, null);

Just create the declaration file for that component.

something.js

const React = require('react');


class Something extends React.Component {

  render() {

  }
}

module.exports = {
  Something,
}

something.d.ts

import React from 'react';

export declare interface State {
  something: boolean;
}
export declare interface Props {
  argument: number;
}

export declare class Something extends React.Components<Props, State> {

  public render(): React.ReactNode;
}

Don't look too closely on the js I haven't worked with plain JavaScript in ages.

Answer 3

For React native versions below 0.62

Make sure to create .tsx file.

//FoobarView.tsx

import React, { ReactElement } from 'react'
import { requireNativeComponent, ViewProps } from 'react-native'

interface Props extends ViewProps {
    teste: boolean
}
const _FoobarView = requireNativeComponent('FoobarView')

const FoobarView = (props: Props): ReactElement<Props> => {
    return <_FoobarView {...props} style={props.style} />
}

export default FoobarView

Inspired from: https://shopify.engineering/creating-native-components-accept-react-native-subviews