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

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

render() {
    return (

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

onTagPress={this.onTagPress}
            inputStyle={{...Typography.text60, color: Colors.blue30}}
          />
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
  },
  customTag: {
    backgroundColor: Colors.purple30,
    paddingVertical: 2,
    paddingHorizontal: 8,
    borderRadius: 3,
    marginRight: 10,
    marginBottom: 10,
  },
});

render() {
    return (

indicatorStyle={{borderBottomWidth: 2, borderColor: Colors.purple30}}
          useGradientFinish
        >
          
          
          
          
          
            
          
          
        

        

         this.setState({selectedIndex2: index})}
          style={{height: 48, backgroundColor: Colors.red80}}
          indicatorStyle={{borderBottomWidth: 4, borderColor: Colors.cyan30}}
          useGradientFinish
        >

};

    this.pannableTitle = {title: 'This is a pannable header Dialog'};
    this.title = 'This is a Dialog';
    this.supportedOrientations = ['portrait', 'landscape'];
    this.colors = [
      {value: Colors.red10, label: 'Red10'},
      {value: Colors.red30, label: 'Red30'},
      {value: Colors.red50, label: 'Red50'},
      {value: Colors.red70, label: 'Red70'},
      {value: Colors.blue10, label: 'Blue10'},
      {value: Colors.blue30, label: 'Blue30'},
      {value: Colors.blue50, label: 'Blue50'},
      {value: Colors.blue70, label: 'Blue70'},
      {value: Colors.purple10, label: 'Purple10'},
      {value: Colors.purple30, label: 'Purple30'},
      {value: Colors.purple50, label: 'Purple50'},
      {value: Colors.purple70, label: 'Purple70'},
      {value: Colors.green10, label: 'Green10'},
      {value: Colors.green30, label: 'Green30'},
      {value: Colors.green50, label: 'Green50'},
      {value: Colors.green70, label: 'Green70'},
      {value: Colors.yellow10, label: 'Yellow10'},
      {value: Colors.yellow30, label: 'Yellow30'},
      {value: Colors.yellow50, label: 'Yellow50'},
      {value: Colors.yellow70, label: 'Yellow70'}
    ];

    this.state = {
      panDirection: PanningProvider.Directions.DOWN,
      position: 'bottom',
      scroll: this.SCROLL_TYPE.NONE,

import {Avatar, AvatarHelper, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line

const star = require('../../assets/icons/star.png');

const onlineColor = Colors.green30;

const examples = [
  {title: 'Custom Background', backgroundColor: Colors.violet60},
  {title: 'Empty Avatar with ribbon', ribbonLabel: 'New'},
  {
    title: 'Initials with Color',
    label: 'AD',
    backgroundColor: Colors.yellow60,
    labelColor: Colors.orange20,
    ribbonLabel: 'New',
    ribbonStyle: {backgroundColor: Colors.purple30},
  },
  {title: 'Initials, badge ("online")', label: 'ES', badgeProps: {backgroundColor: onlineColor}},
  {
    title: 'Image, badge ("away")',
    imageSource: {
      uri:
        'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg',
    },
    badgeProps: {size: 'pimpleBig', backgroundColor: Colors.yellow30},
    badgePosition: 'BOTTOM_RIGHT',
  },

  {
    title: 'Smaller size, Badge ("offline")',
    size: 40,
    imageSource: {

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