Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using createRef in react-native with typescript?

I am trying to figure out how I need to use React.createRef() in react native with typescript as following code throws errors

 // ...

  circleRef = React.createRef();

  componentDidMount() {
    this.circleRef.current.setNativeProps({
      someProperty: someValue
    });
  }

  // ...

Currently following errors are thrown for this.circleRef.current.setNativeprops

[ts] Object is possibly 'null'. (property) React.RefObject<{}>.current: {} | null

and

[ts] Property 'setNativeProps' does not exist on type '{}'. any

any ideas?

like image 404
Ilja Avatar asked Oct 12 '18 08:10

Ilja


People also ask

How do you use refs in react native with TypeScript?

To use refs with functional components use a special useRef hook. It is a generic function, so we can pass a type-parameter, that will tell TypeScript what type is acceptable for this ref. // using `HTMLInputElement` as a type parameter. // to bind the element with the ref.

How do you use createRef in react native?

You can create a ref by calling React. createRef() and attaching a React element to it using the ref attribute on the element. We can “refer” to the node of the ref created in the render method with access to the current attribute of the ref. From the example above, that would be this.

What is the type of ref in React TypeScript?

createRef() in React With TypeScript. In the class component for getting the reference of the input field, we use the createRef() method, which is used to access any DOM element in a component and returns a mutable ref object.

How to use React refs in typescript?

Using React Refs in Typescript 1 Introduction. For the vast majority of React components, everything can be done using the declarative model which communicates with child components using props to re-render. 2 Functional Components. ... 3 Class Components. ... 4 Ref Callback. ... 5 Forwarding Refs. ... 6 Conclusion

How do I create a typescript transformer in React Native?

The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following: Rename the generated App.js and __tests_/App.js files to App.tsx. index.js needs to use the .js extension.

How do you create a ref In react?

Using a callback function for creating refs can give you more control over how the ref is created, set and unset. Starting from React 16.3, the React API included a createRef() method that can be used for creating refs in much the same way as we did using the callback function.

Does Babel support React Native and typescript?

However, there are some limitations to Babel's TypeScript support, which the blog post above goes into in detail. The steps outlined in this post still work, and Artsy is still using react-native-typescript-transformer in production, but the fastest way to get up and running with React Native and TypeScript is using the above command.


1 Answers

The first issue can be solved with a null check before proceeding with your logic since React.createRef() can also return null:

componentDidMount() {
  if(this.circleRef !== null && this.circleRef.current !== null) {
    this.circleRef.current.setNativeProps({
      someProperty: someValue
    });
  }
}

The second is solved by passing the class name of the Node element for which you want to create a reference. For example, if your referenced element is a <Text>, then do:

circleRef = React.createRef<Text>();

This way, circleRef will be correctly typed and setNativeProps will exist if and only if the referenced component is directly backed by a native view:

The methods [of current] are available on most of the default components provided by React Native. Note, however, that they are not available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app. - Direct Manipulation - React Native documentation

like image 78
Matei Radu Avatar answered Oct 14 '22 02:10

Matei Radu