1

I have a text re-usable component coded like this :

import React, {FC, ReactNode} from 'react';
import {StyleSheet, Text as RNText} from 'react-native';

interface TextProps {
  style?: any;
  children: ReactNode | ReactNode[];
}

const Text: FC<TextProps> = ({style, children}) => {
  return <RNText style={{...styles.text, ...style}}>{children}</RNText>;
};

export default Text;

const styles = StyleSheet.create({
  text: {
    color: colors.black,
    fontFamily: fonts.light,
  },
});

So every time I want to style it I don't get any prop suggestions for styling a react native text component :

enter image description here

How can I get all react native styles props suggestions for a custom re-usable made component with typescript ?

1
  • 1
    There are many similar questions, are you asking how to get the style type? Did you try something like import { TextStyle, ViewStyle } from "react-native"; ? Apr 19, 2022 at 20:19

1 Answer 1

4

you should use StyleProp, look at the code below:

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

interface LazyLoadImageType {
  imgUri: string;
  onLoadEnd?: () => void;
  style?: StyleProp<TextStyle>;
  // or
  style?: StyleProp<ViewStyle>;
  // or
  style?: StyleProp<ViewStyle | TextStyle>;

}
2
  • What is the use of StyleProp If I may ask ? Apr 19, 2022 at 20:44
  • 1
    you can compare it with "foo=[]: Array<number|string>" here "Array" is a general type of the foo variable that is an array, so styleProp is also the general type for style attribute and by using viewStyle | testStyle you define which types of styles have to include in your type Apr 21, 2022 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.