Why is React Native not passing on simple strings in Typescript?-CodePudding

new to React Native, coming from React.js. I'm trying to emulate CSS-like cascading by passing on properties, in this case colors, to a component. However, even though everything seems fine, no colours are passed to the Header component. How can I alleviate the problem? App.tsx:

export type Colors = {
  backgroundLight: string,
  mainLight: string,
  secondaryLight: string,
  tertiaryLight: string,
  commentLight: string,
}

const COLORS: Colors = {
  backgroundLight: '#F6F6F2',
  mainLight: '#388087',
  secondaryLight: '#6FB3B8',
  tertiaryLight: '#BADFE7',
  commentLight: '#C2EDCE',

}

return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <Header colors={COLORS}/>
//...
    </SafeAreaView>

Header.tsx:

import { Text, StyleSheet } from "react-native"
import { Colors } from '../App'

const Header = ({mainLight} : Colors) => {
    return (
        <Text style={[
            styles.appTitle,
            {
                color: mainLight,
            },
        ]}>Header</Text>
    )
}

const styles = StyleSheet.create({
    appTitle: {
        fontWeight: '800',
        fontSize: 32
    },
});


export default Header

CodePudding user response：

You're destructuring mainLight from your props not colors ( the hierarchy of props would be: props->colors->mainLight ), try this:

const Header = ({colors} : {colors: Colors}) => {
    return (
        <Text style={[
            styles.appTitle,
            {
                color: colors.mainLight,
            },
        ]}>Header</Text>
    )
}