How to change the style with props

Question

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 1

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'
  }),
});

Answer 2

You can also pass the condition to the style prop

const MyText = ({isLive}) => {
  return (
      <Text style={{color: isLive? 'green' : 'red' }}>
        Your text
      </Text>
  )
}