How to use the react-native-ui-lib.Colors.green30 function in react-native-ui-lib

{_.map(posts, (post, i) => {
              const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
              
              return (
                 console.log('press on a card')}>

render() {
    const {reset} = this.state;
    const post = posts[0];
    const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
    return (

renderRow(row, id) {
    const statusColor = row.inventory.status === 'Paid' ? Colors.green30 : Colors.red30;
    const animationProps = AnimatableManager.presets.fadeInRight;
    const imageAnimationProps = AnimatableManager.getRandomDelay();

    return (
      
         Alert.alert(`pressed on order #${id + 1}`)}
        >

const map = _.map(data, (item, index) => {
      const initials = AvatarHelper.getInitials(item.name);
      const avatarBadgeProps = {backgroundColor: Number(index) < 3 ? Colors.green30 : undefined};
      const buttonPress = () => Alert.alert('Badge button press');
      const listOnPress = () => Alert.alert(`Pressed on contact #${index + 1}`);
      const imageSource = item.thumbnail ? {uri: item.thumbnail} : null;
      const rightButtons = [
        {
          text: 'More',
          icon: shareIcon,
          background: Colors.dark60,
          onPress: () => Alert.alert(`More button pressed for item #${item.name}`)
        },
        {
          text: 'Archive',
          icon: collectionsIcon,
          background: Colors.blue30,
          onPress: () => Alert.alert(`Archive button pressed for item #${item.name}`)
        },

this.setState({selectedIndex2: index})}
          style={{height: 48}}
          indicatorStyle={{borderBottomWidth: 2, borderColor: Colors.green30}}
          useGradientFinish
        >
          
          
          
          
        

renderContent(id, row) {
    const initials = AvatarHelper.getInitials(row.name);
    return (
       this.onContentPress(id)} style={styles.listContent}>
        
          
        
        
          
        
      
    );
  }

this.setState({selectedIndex2: index})}
          style={{height: 48}}
          indicatorStyle={{borderBottomWidth: 2, borderColor: Colors.green30}}
          useGradientFinish
        >
          
          
          
          

text: 'More',
          icon: shareIcon,
          background: Colors.dark60,
          onPress: () => Alert.alert(`More button pressed for item #${item.name}`)
        },
        {
          text: 'Archive',
          icon: collectionsIcon,
          background: Colors.blue30,
          onPress: () => Alert.alert(`Archive button pressed for item #${item.name}`)
        },
      ];
      const leftButton = {
        text: 'Read',
        icon: starIcon,
        background: Colors.green30,
        onPress: () => Alert.alert(`Read button pressed for item #${item.name}`)
      };

      return {
        ...item,
        initials,
        avatarBadgeProps,
        buttonPress,
        listOnPress,
        imageSource,
        rightButtons,
        leftButton
      };
    });