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

style={{
            overflow: 'hidden',
            height: INITIAL_WIDTH,
            width: leftPanelWidth, 
            backgroundColor: Colors.rgba(Colors.red20, 0.9), 
            borderRadius: 20
          }}
        >
          {leftPanelWidth > INITIAL_WIDTH &&

size={'xSmall'}
              round
              backgroundColor="transparent"
              iconSource={icon2}
              iconStyle={{tintColor: this.state.selected ? Colors.yellow40 : Colors.white}}
              onPress={() => {
                // console.warn('action 2 press');
                this.setState({selected: !this.state.selected});
              }}
            />
            <button size="{'xSmall'}"> console.warn('action 3 press')}
            /&gt;
          }
        
      
    );
  }
</button>

fontSize: Typography.text70.fontSize,
        fontFamily: Constants.isAndroid ? 'sans-serif-bold' : '.SFUIText-Heavy',
        alignment: 'center',
      },
      subtitle: {
        color: Colors.white,
        fontSize: Typography.text80.fontSize,
        fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
      },
      backButton: {
        // visible: true,
        color: Colors.white,
        showTitle: Constants.isIOS ? false : undefined,
        testID: 'pop',
      },
      leftButtonColor: Colors.white, 
      leftButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
      rightButtonColor: Colors.white, 
      rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
    },
  };
}

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

round
                backgroundColor={Colors.yellow30}
                white
                onPress={() => this.onButtonPress('1')}
              />
            
          
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.white
  },
  contentContainer: {
    paddingBottom: 50
  },
  drawer: {
    marginTop: 20
  },
  listContent: {
    backgroundColor: Colors.dark80
  },
  rowContent: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.dark80
  },
  rowIcon: {

row: {
    height: 56,
    justifyContent: 'center',
  },
  separator: {
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark70,
  },
  sectionContainer: {
    backgroundColor: Colors.dark20,
    paddingVertical: 4,
    paddingLeft: 12,
  },
  sectionText: {
    ...Typography.text60,
    color: Colors.white,
  },
});

import React from 'react';
import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
import {Text, View, Assets, Constants, Button, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
import DemoScreen from '../DemoScreen';

const ButtonSpace = 20;
const plusIcon = require('../../assets/icons/plus.png');

const labelButton = {label: 'Animated'};
const iconButton = {round: true, iconStyle: {tintColor: Colors.white}};

export default class ButtonsScreen extends DemoScreen {
  constructor(props) {
    super(props);

    this.propsToRender = [
      'label',
      'color',
      'backgroundColor',
      'size',
      'outlineColor',
      'outline',
      'disabled',
      'link',
      'enableShadow',
      'borderRadius',