CODEWITHSUNDEEP
reactjstypescriptreact-native
Reza Sam
Reza Sam

Reputation: 1344

TextInput style Props type react native

I'm trying to pass style as props to my custom TextInput component.I found this snippet to type button and label style in props :

import {  
  StyleProp,
  Text,
  TextStyle,
  View,
  ViewStyle
} from 'react-native';

interface IProps {
 label: string;
  buttonStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
}
// rest

but I did not find anything for TextInput nor any documentation about StyleProp So what is the proper way to pass style to TextInput?

Upvotes: 2

Views: 1891

Answers (1)

Reza Sam
Reza Sam

Reputation: 1344

I was checking TextInputProps interface and I found TextStyle is also used for TextInput :

style?: StyleProp<TextStyle>;

so it can be used in these ways :

import {StyleSheet, TextInput, TextInputProps , StyleProp , 
TextStyle } from 'react-native';

type Props = {
style?: StyleProp<TextStyle>,
// or 
style?: Pick<TextInputProps, "style">

};

const Input: React.FC<Props> = ({style: propStyles}) =>
    <TextInput
      style={ [styles.input, propStyles] }
    />


const styles = StyleSheet.create({
  input: {...}, 
});

Upvotes: 2

Related Questions