Unable to declare ref for TextInput

Environment

react-native-paper 3.0.0-alpha.3 react-native 0.59.8 Typescript 3.6.2

Description

I’m trying to convert my component that uses TextInput to typescript, but I’m getting an error at React.RefObject<TextInput>: ‘TextInput’ refers to a value, but is being used as a type here.ts(2749)

I tried yarn add https://github.com/callstack/react-native-paper.git to try to pull in #1218, but the command failed with this error:

✖ Errors found when building definition files.
example/src/index.native.tsx(1,25): error TS2307: Cannot find module 'expo'.
example/src/index.native.tsx(2,30): error TS2307: Cannot find module 'expo-keep-awake'.
example/src/index.native.tsx(18,39): error TS2307: Cannot find module 'react-navigation'.
example/src/RootNavigator.native.tsx(2,38): error TS2307: Cannot find module 'react-navigation'.

bob build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Error: Failed to build definition files.
    at build (/Users/frank/Library/Caches/Yarn/v4/.tmp/37678653438a710e932e2eb30c14dbbe.d644354d396ad8e765c85886ab3033b45f7a7c00.prepare/node_modules/@react-native-community/bob/lib/targets/typescript.js:63:11)
    at <anonymous>
error Command failed with exit code 1.

Reproducible Demo

import React from 'react';
import { TextInput } from 'react-native-paper';
class MyScreen extends React.Component<any, any> { 
    private input: React.RefObject<TextInput> = React.createRef();
    render() {
        return <TextInput ref={this.input} ... />
    }
    onSubmit() {
        this.input.current.focus()
    }
}

Am I doing this right? I know the ref spec in general went through a few iterations. Great library by the way, beautiful components. 👍

[lafiosca]

Per the lines here: https://github.com/callstack/react-native-paper/blob/efe17beafcc3bd83f4d84971499bd85647df9c84/src/components/TextInput/TextInput.tsx#L21-L23

I think you just need to use the react-native TextInput type for your ref, rather than trying to use the react-native-paper version.

Based on @savagematt’s example, I’d try:

import React, { Component, createRef } from 'react';
import { TextInput as RNTextInput } from 'react-native';
import { TextInput } from 'react-native-paper';

export class Example extends Component {
  private firstInput = createRef<RNTextInput>();

  componentDidMount(): void {
    this.firstInput.current?.focus();
  }

  render() {
    return <TextInput
      ref={this.firstInput}
    />

  }
}

I haven’t tested the above though. I’m using function components as seen here: https://github.com/callstack/react-native-paper/issues/1453#issuecomment-699163546

[hugoh59]

Has react native removed the ref attribute for TextInput? It’s no longer in the docs