Why is my React Native Component not responding to props?

Question

I am working on a React Native App that uses a custom text component, that is designed to pass take a font and color prop and then use the props to then render text in one of the five fonts or three font colors used in the project. However, the component I've built does not seem to respond to font or color fonts that I pass in. My component is currently the following:

import React from 'react'

import {
    Text,
} from 'react-native'

const defaultFont = { fontFamily: 'Scto Grotesk A Regular' }

const fonts = {
    "Recoleta Regular":{
        fontFamily: 'Recoleta Regular'
    },
    "Recoleta SemiBold":{
        fontFamily: 'Recoleta SemiBold'
    },
    "Scto Grotesk A Bold":{
        fontFamily: 'Scto Grotesk A Bold'
    },
    "Scto Grotesk A Medium":{
        fontFamily: 'Scto Grotesk A Medium'
    },
    "Scto Grotesk A Regular":{
        fontFamily: 'Scto Grotesk A Regular'
    },
    }
    
    const colors = {
        white:{
        color:'#ffffff'
        },
        'dark green':{
            color:'#1a3c34'
        },
        gray:{
            color: '#647632'
        }
    }

const AppText = ({ style, font, color, ...props }) => {
    
    let textFont = {}
    switch(font){
        case 'Recoleta Regular':
            textFont= fonts['Recoleta Regular']
            break;
        case "Recoleta SemiBold":
            textFont= fonts['Recoleta SemiBold']
            break;
        case "Scto Grotesk A Bold":
            textFont= fonts['Scto Grotesk A Bold']
            break;
        case "Scto Grotesk A Medium":
            textFont= fonts['Scto Grotesk A Medium']
            break;
        case "Scto Grotesk A Regular":
            textFont= fonts['Scto Grotesk A Regular']
            break;
        default:
            textFont= fonts['Scto Grotesk A Regular']
            break;
    }   

    let textColor = {}
switch(props.color){
    case 'white':
    textColor = colors['white']
    break;
    case 'dark green':
        textColor = colors['dark green']
        break;
    case 'gray':
        textColor= colors.gray
        break;
    default:
        textColor = colors['dark green']
        break;
}
    
    
    return(
    <Text
        style={[textFont, textColor, style]} {...props}
    />
    )
}

export default AppText

Currently if I call this component with something like ...

import { Spacer, Button, DriverSummaryRow, TripSummaryRow, Text } from '../
...
<Text color='white' font="Recoleta SemiBold">Test</Text>

... I will get the text component, but it will not respond to color or font props that I pass into it. What am I doing wrong?

Answer 1

cause your component name is "AppText", not "Text"!!!! turn your code into :

import { Spacer, Button, DriverSummaryRow, TripSummaryRow, AppText } from '../
<AppText color='white' font="Recoleta SemiBold">Test</AppText>

*Also I suggest you use typescript in which use enums for your props