How to import React-Native types via Typescript for Flow?

Question

In my react-native application I have a TextInput component. The TextInput reads some types from the following path:

/Users/karl/Library/Caches/typescript/3.6/node_modules/@types/react-native/index.d.ts

This file has a bunch of types in including:

export type KeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad';

I can access this file by cmd + clicking on a prop I have added, (using vscode) to go to it's definition.

What I am wondering though is how I can reference the types in this file, so I can use them in my Flow typing definitions?

I want to be able to do something like:

// pseudocode
import type { KeyboardType } from 'react-native'

How I can go about this?

Actually I've same issue and leave an answer for flow-typed and typescript both. I leave an upvote to your awesome post. — AmerllicA
– AmerllicA, Commented Aug 15, 2020 at 6:33

AmerllicA · Accepted Answer · 2022-03-31 04:16:41Z

4

Actually, for flow-typed you should directly add the types from component source:

import type {
  KeyboardType,
  ReturnKeyType,
} from 'react-native/Libraries/Components/TextInput/TextInput';

But for typescript first, install @types/react-native and then get all the types from react-native;

import type { ReturnKeyType, KeyboardType } from 'react-native';

edited Mar 31, 2022 at 4:16

answered Aug 15, 2020 at 6:28

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user6269864 · Accepted Answer · 2019-09-30 10:58:40Z

0

You're doing everything right, except you don't need the word type after import:

import { Image, StyleSheet, ReturnKeyType, KeyboardType } from "react-native";

answered Sep 30, 2019 at 10:58

user6269864

2 Comments

Karl Taylor Over a year ago

Wow. It really is Monday. Thank you 🎉

Karl Taylor Over a year ago

I actually now get this Flow(InferError). But it's typed absolutely fine. Any ideas? Cannot import 'KeyboardType' because there is no 'KeyboardType' export in 'react-native'. Flow(InferError)

Collectives™ on Stack Overflow

How to import React-Native types via Typescript for Flow?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related