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

Question

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;

Answer 1

Judging from your comment, there seems to be a misunderstanding on how this could work. I have created a little snack showcasing what you need.

Here is the code for completeness. I have created two buttons. One uses the default text color, the other one uses a different color which we have provided via props.

import React from 'react';
import {TouchableOpacity, Text, View, StyleSheet} from 'react-native'

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

export default function App() {
  return (
    <View style={{margin: 60}}>
      <AppButton textColor="red" title="TestButton" onPress={() => console.log("Hello World")} borderColor="yellow" />
      <AppButton title="TestButton" onPress={() => console.log("Hello World")} borderColor="yellow" />
    </View>
  );
}

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

The first one has a red text color, the second one is white.

Here is the result.