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

style={{
          position: 'absolute',
          alignSelf: 'flex-end',
          padding: 20,
          opacity: animationValue,
          transform: [
            {scale: animationValue}
          ]
        }}
      >

useNativePicker
            value={this.state.nativePickerValue}
            onChange={nativePickerValue => this.setState({nativePickerValue})}
            rightIconSource={dropdown}
            containerStyle={{marginTop: 20}}
            // renderNativePicker={(props) => {
            //   return (
            //     
            //   );
            // }}
            // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
            wheelPickerProps={{
              style: {width: 200},
              color: Colors.violet30,
              labelStyle: {fontSize: 32, fontFamily: 'sans-serif-condensed-light'},
              itemHeight: 55
            }}
            selectLabelStyle={{color: Colors.violet30}}
            cancelLabelStyle={{color: Colors.violet30}}
          >
            {_.map(options, option => (
              
            ))}

constructor(props) {
    super(props);

    this.state = {
      itemsTintColor: undefined,
      leftItem: {icon: collectionsIcon, text: 'Archive', onPress: this.onLeftItemPressed},
      rightItems: [
        {icon: starIcon, text: 'Accessories', onPress: this.onItemPress, background: Colors.violet10},
        {icon: shareIcon, text: 'Share', onPress: this.onItemPress, background: Colors.violet30},
        {icon: videoIcon, text: 'Video', onPress: this.onItemPress, background: Colors.violet40},
        // {icon: tagsIcon, text: 'Video', background: Colors.red30},
      ],
    };
  }

import _ from 'lodash';
import React, {Component} from 'react';
import {Alert, StyleSheet} from 'react-native';
import {Constants, Assets, Colors, View, Button, Text, Image, TouchableOpacity, Toast} from 'react-native-ui-lib'; //eslint-disable-line


const colors = [Colors.green30, Colors.red30, Colors.violet30];

export default class ToastsScreen extends Component {

  constructor(props) {
    super(props);

    this.state = {
      showToast: false,
      showTopToast: false,
      showRelativeToast: false,
      selectedColor: 'none',
      showLoader: false,
      showDismiss: false,
    };
  }

render() {
    return (
      
    );
  }
}

render() {
    return (
      
    );
  }
}

render() {
    const {selectedValue, items} = this.state;

    return (
      
    );
  }
}

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

        

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

import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import {StyleSheet, PanResponder, ViewPropTypes, AccessibilityInfo} from 'react-native';
import {Constants, Colors, PureBaseComponent, View} from 'react-native-ui-lib';

const TRACK_SIZE = 6;
const THUMB_SIZE = 24;
const BORDER_WIDTH = 6;
const SHADOW_RADIUS = 4;
const DEFAULT_COLOR = Colors.dark50;
const ACTIVE_COLOR = Colors.violet30;
const INACTIVE_COLOR = Colors.dark60;

/**
 * @description: A Slider component
 * @example: https://github.com/wix/react-native-ui-lib/blob/feat/new_components/demo/src/screens/componentScreens/SliderScreen.js
 */
export default class Slider extends PureBaseComponent {
  static displayName = 'Slider';

  static propTypes = {
    /**
     * Initial value
     */
    value: PropTypes.number,
    /**
     * Minimum value

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