Menu
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?
404
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.
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.
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.
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
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.
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.
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.
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
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
