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

* The height of the selected item
     */
    itemHeight: PropTypes.number,
    /**
     * The color of the wheel picker (hex only)
     */
    color: PropTypes.string,
    /**
     * pass custom style for the picker item
     */
    itemStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), //eslint-disable-line
  };

  static defaultProps = {
    labelStyle: {fontSize: Typography.text70.fontSize, fontFamily: Typography.text70.fontFamily},
    color: Colors.blue30
  };

  constructor(props) {
    super(props);
    this.onValueChange = this.onValueChange.bind(this); //eslint-disable-line
    this.getItems();
    DeviceEventEmitter.addListener('log', this.onLogReceived); // TODO: consider moving to a more generic place (base class?)
  }

  state = {
    items: this.getItems(),
  };

  onLogReceived = (event) => {
    console[event.LogType](event.TAG, event.text);
  }

renderHighlighterOverlay() {
    return (

actions={action}
        />

        

         this.setState({showToast: false})}
          allowDismiss={showDismiss}

Modal,
  Text,
  Typography,
  View,
} from 'react-native-ui-lib';
import BaseInput from './BaseInput';
import TextArea from './TextArea';

const DEFAULT_COLOR_BY_STATE = {
  default: Colors.dark40,
  focus: Colors.blue30,
  error: Colors.red30,
};
const DEFAULT_UNDERLINE_COLOR_BY_STATE = {
  default: Colors.dark70,
  focus: Colors.blue30,
  error: Colors.red30,
};

/**
 * @description: A wrapper for Text Input component with extra functionality like floating placeholder
 * @extends: TextInput
 * @extendslink: https://facebook.github.io/react-native/docs/textinput.html
 * @modifiers: Typography
 * @gif: https://media.giphy.com/media/xULW8su8Cs5Z9Fq4PS/giphy.gif, https://media.giphy.com/media/3ohc1dhDcLS9FvWLJu/giphy.gif, https://media.giphy.com/media/oNUSOxnHdMP5ZnKYsh/giphy.gif
 * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/InputsScreen.js
 */
export default class TextField extends BaseInput {
  static displayName = 'TextField';
  static propTypes = {
    ...RNTextInput.propTypes,
    ...BaseInput.propTypes,

onChangePage={currentPage => this.setState({currentPage})}
          initialPage={this.state.currentPage}
        >

<button label="Show Toast" size="medium"> this.setState({showToast: true})}/&gt;
                

                 this.setState({showToast: false}),
                    },
                    {label: 'Yes, close it', onPress: () =&gt; this.setState({showToast: false})},
                  ]}
                /&gt;
              
            
          

          </button>

import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import {Colors, View, Text, ColorPicker, ColorPalette} from 'react-native-ui-lib';


const INITIAL_COLOR = Colors.blue30;
const colors = [
  '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
  '#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
  '#00AAAF', '#32BABC', '#3CC7C5', '#64D4D2', '#8BDFDD', '#B1E9E9', '#D8F4F4', '#EBF9F9',
  '#00A65F', '#32B76C', '#65C888', '#84D3A0', '#A3DEB8', '#C1E9CF', '#E8F7EF', '#F3FBF7',
  '#E2902B', '#FAA030', '#FAAD4D', '#FBBD71', '#FCCE94', '#FDDEB8', '#FEEFDB', '#FEF7ED',
  '#D9644A', '#E66A4E', '#F27052', '#F37E63', '#F7A997', '#FAC6BA', '#FCE2DC', '#FEF0ED',
  '#CF262F', '#EE2C38', '#F2564D', '#F57871', '#F79A94', '#FABBB8', '#FCDDDB', '#FEEEED',
  '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
];


export default class ColorPickerScreen extends Component {
  constructor(props) {
    super(props);

column
            style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
          >

render() {
    const {loading, animationConfig} = this.state;
    return (
      
    );
  }
}