How to change the style with props

How to change the style in React Native?

I need to change the color of the text when it is true or false here is my code:

Styles Area

LIVE:{
        color: "red"
    },
    Comp: {
        color: "green"
},

Main

<Text style={MyCardStyle.AnyText}>{isLive == false ? /* MyCardStyle.Comp */ : /* MyCardStyle.LIVE */ }</Text>
// The commented out codes have error as "Objects are not valid as a React child"

Props

<MyMatchCard 
    isLive={true}
    />

Here i want to change the color of the Text to green when its false or red when its true How to actually apply the color without getting an error?

Answer

One way to do it is to change the style object to function instead. That function will take a parameter that will be used to define the text color:

import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants'



// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';


const MyText = ({isLive}) => {
  return (
      <Text style={styles.text(isLive)}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
  )
}
export default function App() {
  return (
    <View style={styles.container}>
      <MyText isLive />
      <MyText />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  text: (isLive) => ({
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: isLive ? 'green' : 'black'
  }),
});