0
125
ViewsHow to have different text colour for 2 different imports of a custom component in React Native
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;
1 answers
Answer question0
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.
