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

const styles = StyleSheet.create({
  breadcrumbs: {
    padding: 12,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  page: {
    flex: 1,
    paddingLeft: 24,
  },
  pageTitleContainer: {
    borderBottomWidth: 1,
    paddingBottom: 4,
    borderColor: Colors.dark60,
  },
  pageTitleExtraDivider: {
    marginTop: 5,
    // marginBottom: 22,
  },
  entryTextDeprecated: {
    textDecorationLine: 'line-through',
  },
});

{this.renderContent('4', conversations[4])}

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
     */

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}`)}
        >

<button label="-" size="large"> this.setState({counter: counter !== 0 ? counter - 1 : 0})}
          /&gt;
        
        
          {visible &amp;&amp; _.map(items, (item, index) =&gt; this.renderItem(item, index))}
        
      
    );
  }
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: Colors.dark60,
  },
});
</button>

/**
     * text color
     */
    color: PropTypes.string,
    /**
     * text input container style
     */
    containerStyle: ViewPropTypes.style,
    /**
     * Use to identify the component in tests
     */
    testId: PropTypes.string,
  };

  static defaultProps = {
    placeholderTextColor: Colors.dark60,
  };

  constructor(props) {
    super(props);

    this.onChangeText = this.onChangeText.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onFocus = this.onFocus.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.focus = this.focus.bind(this);

    const typography = this.getTypography();
    this.state = {
      inputWidth: typography.fontSize * 2,
      value: props.value,
      floatingPlaceholderState: new Animated.Value(props.value ? 1 : 0),

};
}

export default connect(mapStateToProps)(PostsList);

const styles = StyleSheet.create({
  image: {
    width: 54,
    height: 54,
    borderRadius: BorderRadiuses.br20,
    marginHorizontal: 14,
    backgroundColor: Colors.purple70
  },
  border: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: Colors.dark60,
  }
});

renderDynamicLabelsTabBar() {
    const {selectedIndex4, labels} = this.state;
    
    return (

{visible && 
           this.renderItem(item, index)}
            keyExtractor={this.keyExtractor}
          />}
        
      
    );
  }
}

const styles = StyleSheet.create({
  item: {
    paddingHorizontal: 20,
    backgroundColor: Colors.dark60,
    borderBottomWidth: 2,
    borderColor: ThemeManager.dividerColor,
  },
});