'RecursiveArray':

I have a custom icon component like this:

type BackArrowProps = {  arrowStyles?: StyleProp<ViewStyle>;  containerStyles?: StyleProp<ViewStyle>;  handleGoBack?: () => void;};export const BackArrow: React.FunctionComponent<BackArrowProps> = ({  arrowStyles,  containerStyles,  handleGoBack,}) => {  return (<View style={[styles.container, containerStyles]}><IconFA        name="arrow-left"        size={moderateScale(20)}        style={[styles.arrow, arrowStyles]}      /></View>  );};const styles = StyleSheet.create({  arrow: { color: 'white' },  container: {    width: moderateScale(300),    marginTop: moderateScale(20),    marginLeft: moderateScale(20),    marginBottom: moderateScale(20),  },});

On one place, I have used it like this and it works ok:

<BackArrow arrowStyles={styles.arrow}></BackArrow> arrow: {    paddingTop: 20,    color: 'black',  },

However, now I am trying to use it in another screen like this but I get an error on arrowStyles if I use it without paddingTop. Why is this so and how can I fix it?

<BackArrow arrowStyles={styles.arrow} containerStyles={styles.arrowContainer} ></BackArrow>  arrow: {    //paddingTop: 0,    color: 'black',  },

If I use it with padding then it works.

Error:

Type '{ color: string; }' is not assignable to type 'StyleProp<ViewStyle>'.  Type '{ color: string; }' is missing the following properties from type 'RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle> | null | undefined>': length, pop, push, concat, and 26 more.ts(2322)