How to have different text colour for 2 different imports of a custom component in React Native-CodePudding

I am having an issue changing the text colour on a few specific imports of a custom component.

I am able to change the border colour and background colour for the button itself depending on its use when I import it by changing the value of the props where it is used. However I cant work out how to do the same for the text. I imagine its something trivial but any help would be appreciated.

The code below is the code for the button.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import colors from '../config/colors';


function AppButton({title, onPress, color = "primary", borderColor}) {
    return (
        <TouchableOpacity style={[
            styles.button, 
            {backgroundColor: colors[color], borderColor: colors[borderColor] }]} 
            onPress={onPress}
        >
            <Text style={[styles.text]}>{title}</Text>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    button:{
        backgroundColor: colors.primary,
        borderRadius:15,
        padding: 15,
        width: "100%",
        marginVertical: 10,
        justifiedContent: 'center',
        alignItems: 'center',
        borderWidth: 6,
    },
    text:{
        color: colors.white,
        fontSize: 18,
        textTransform: 'uppercase',
        fontWeight: 'bold',
    }
})

export default AppButton;

CodePudding user response：

Judging from your comment, there seems to be a misunderstanding on how this could work. I have