Is there a way to change text colour of a text element on a parent component from the child component in React Native?

Question

Is there a way to change the text colour of a text element on a parent component from the child component in React Native?

I have done it with the icon in the code below, can I do it with text?

Discover More Parent Component

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

import Colors from '@miniclementine:common/appearance/Colors';
import ClementineIcon from '@miniclementine:common/components/ClementineIcon';

export default function DiscoverMore({title, onPress, color}) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.btnContainerStyle}>
        <ClementineIcon name="add-circle-bold" color={color} size={24} />
        <Text style={styles.btnTextStyle}> {title} </Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
    btnContainerStyle: {
        paddingVertical: 16,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      btnTextStyle: {
        color: Colors.cornflower,
        fontSize: 16,
        textAlign: 'center',
      }
});

HomePage bringing in DiscoverMore component and changing colour of icon using props

export default function SessionHomepage({navigation, passData, onPress}) {
  const onPressSectionHeader = ({onPress}) => {
    navigation.navigate(SESSIONS_LIST_PAGE, passData)
    // @TODO: navigate to a page using navigation.navigate(pageName, params);
  };

  const onPressSectionHeaderInvalid = () => {
    alert('Out of scope for this task')
    // @TODO: navigate to a page using navigation.navigate(pageName, params);
  };

  const onContactPress = () => {
    Linking.openURL('mailto:alina@clementineapp.co.uk?subject=SendMail&body=Description') 
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
      <View style={styles.content}>
        <SectionHeader
          title="Morning Sessions"
          onPress={onPressSectionHeaderInvalid}
        />
        <DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeaderInvalid}
          color={Colors.cornflower}
        />
        <SectionHeader
          title="Pick-me-ups"
          onPress={onPressSectionHeader}
        />
        <DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeader}
          color={Colors.cornflower}
        />
      </View>
      <View style={styles.sleepSection}>
        <Image
          source={require('../../assets/illustrations/sleep_section.png')}
          style={{height: 250, width: '100%'}}
        />
      </View>
      <View style={styles.content}>
      <View style={styles.sleepSection}>
      <SectionHeader
          title="Sleep Sessions"
          onPress={onPressSectionHeaderInvalid}
        />
        <Text>test</Text>
        <DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeaderInvalid}
          color={Colors.powderBlue}
        />
      </View>
      
      </View>
      
      <BlueButton title="Leave us feedback" onPress={onContactPress}/>
      </ScrollView>
    </SafeAreaView>
  );
}

Answer 1

Try this way

Discover page

export default function DiscoverMore({title, onPress, color, textColor}) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.btnContainerStyle}>
        <ClementineIcon name="add-circle-bold" color={color} size={24} />
        <Text style={[styles.btnTextStyle,{color: textColor}]}> {title} </Text>
      </View>
    </TouchableOpacity>
  );
}

Home Page

<DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeaderInvalid}
          color={Colors.cornflower}
      textColor={Colors.cornflower} // add text color here
        />