How to get style props suggestions with react native typescript re-usable component?

Question

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:

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

Answer 1

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>;

}