question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Typescript] Export component props such as TextInputProps

See original GitHub issue

First of all, thanks for this delightful library! This is not a feature request nor exactly a bug, I guess somewhere in the middle, so I didn’t use any template.

I would like to extend TextInput. To do so, I need the prop type, TextInputProp. As of today, I have to import the types like this:

import { TextInputProps } from 'react-native-paper/lib/typescript/src/components/TextInput/TextInput'

This is very unsatisfying, because this path could change at any time and depends on your build logic. A tool such as api-extractor would rightfully forbid you from not exporting indirect types, as it undermines the clear identification of your library API surface and prevent users from easily extending core features.

Component props are obviously part of the API surface, and as such must be exported.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

43reactions
Trancevercommented, Dec 12, 2019

For anyone who also encounters this problem:

React.ComponentProps<typeof TextInput>

This will extract the Props from any component, not only Paper’s one. It works with both class and function components.

19reactions
satya164commented, Dec 11, 2019

You can do:

type IconButtonProps = RNIconButtonProps & {
  backgroundColor?: string;
}

Interfaces don’t really provide any advantage.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Set Up Custom Component Type That Using TextInput props ...
export default React.forwardRef((props: CustomProps, ref) => { // All other existing code });. in the parent component,
Read more >
Using TypeScript - React Native
components /Hello.tsx. import React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; export type Props = {
Read more >
React Hook Form for React Native - Echobind
It will be a wrapper for the React Native Core TextInput component, with some styling (originally defined in App.tsx ) and props such...
Read more >
Better React Components with TypeScript Union Types
FC<TextInputProps> = ({ value, onChange, label}) => { ... } Three fairly simple components with a few properties, nicely typed. I haven't ...
Read more >
Using TypeScript with React Native - LogRocket Blog
In the first three lines, we declared an interface, which serves as the structure for the props object we'd normally access in our...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found