How to use the kitsu/constants/colors.lightGrey function in kitsu

import * as colors from 'kitsu/constants/colors';
import Icon from 'react-native-vector-icons/FontAwesome';
import { upperFirst } from 'lodash';
import { ProgressiveImage } from 'kitsu/components/ProgressiveImage';
import { StyledText } from 'kitsu/components/StyledText';
import * as Layout from 'kitsu/screens/Feed/components/Layout';

const styles = StyleSheet.create({
  container: {
    // padding: 8,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    paddingRight: 4,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    borderRadius: 4,
  },
  iconContainer: {
    width: 28,
    height: 28,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 8,
  },
  icon: {
    color: colors.lightGrey,
    fontSize: 18,
  },
  image: {
    width: 60,
    height: 90,

alignItems: 'center',
    backgroundColor: colors.darkPurple,
  },
  statusTitle: {
    fontWeight: 'bold',
    fontSize: 16,
    color: colors.white,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    margin: 4,
    maxWidth: '85%',
  },
  statusText: {
    maxWidth: '85%',
    fontSize: 12,
    color: colors.lightGrey,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    margin: 4,
  },
  statusImage: {
    marginTop: 16,
    width: 140,
    height: 160,
    resizeMode: 'contain',
  },
});

shadowColor: 'rgba(0,0,0,0.2)',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.5,
    elevation: 3,
    zIndex: 2,
  },
  listHeader: {
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: colors.offWhite,
    borderBottomWidth: 1,
    borderBottomColor: colors.lightGrey,
  },
  listHeaderText: {
    fontFamily: 'OpenSans',
    fontWeight: '800',
    fontSize: 10,
    color: colors.grey,
    paddingVertical: 8,
  },
  searchBox: {
    height: 35,
    margin: 10,
  },
  loading: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 12,

},
  error: {
    backgroundColor: colors.red,
    padding: 6,
  },
  errorText: {
    color: colors.white,
    fontSize: 15,
  },
  dateStarted: {
    flex: 1,
  },
  dateFinished: {
    flex: 1,
    borderLeftWidth: StyleSheet.hairlineWidth,
    borderLeftColor: colors.lightGrey,
  },
  deleteEntry: {
    borderBottomWidth: 0,
  },
  editRow: {
    alignItems: 'center',
    borderBottomColor: colors.lightGrey,
    borderBottomWidth: StyleSheet.hairlineWidth,
    flexDirection: 'row',
    justifyContent: 'space-between',
    maxHeight: 60,
    minHeight: 60,
    padding: 14,
  },
  editRowLabel: {
    ...flattenCommon('text'),

backgroundColor: colors.listBackPurple,
  },
  modalStarRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: '32%',
  },
  modalRatingText: {
    color: 'rgb(255, 218, 168)',
    fontSize: 60,
    fontFamily: 'OpenSans',
    fontWeight: '700',
    marginLeft: 16,
  },
  modalNoRatingText: {
    color: colors.lightGrey,
    fontSize: 30,
    fontFamily: 'OpenSans',
    fontWeight: '700',
    minHeight: 82,
    textAlignVertical: 'center',
  },
  modalSlider: {
    marginHorizontal: 30,
  },
  textStar: {
    color: colors.yellow,
    fontWeight: '700',
  },
  textNotRated: {
    color: colors.lightGrey,
    fontWeight: '700',

backgroundColor: colors.darkPurple,
  },
  rowPickerSeparator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: colors.lightGrey,
  },
  pickerRow: {
    backgroundColor: '#FFFFFF',
    padding: 8,
  },
  pickerIconCircle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 8,
  },
  pickerIconCircle__isPicked: {
    backgroundColor: colors.green,
    borderColor: colors.green,
  },
  pickerIcon: {
    fontSize: 28,
    backgroundColor: 'transparent',
    paddingTop: Platform.select({ ios: 4, android: 0 }),
  },
});

margin: 2,
    backgroundColor: colors.darkGrey,
  },
  emptyWrapper: {
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: 1,
    minHeight: '95%',
  },
  emptyImage: {
    width: 180,
    height: 180,
    margin: 25,
  },
  emptyText: {
    color: colors.lightGrey,
    fontFamily: 'OpenSans',
    fontSize: 16,
    fontWeight: '800',
    textAlign: 'center',
  },
};

alignItems: 'center',
    backgroundColor: colors.darkPurple,
  },
  statusTitle: {
    fontWeight: 'bold',
    fontSize: 16,
    color: colors.white,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    margin: 4,
    width: 240,
  },
  statusText: {
    width: 240,
    fontSize: 12,
    color: colors.lightGrey,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    margin: 4,
  },
  statusImage: {
    marginTop: 16,
    width: 140,
    height: 160,
    resizeMode: 'contain',
  },
});

export default styles;

justifyContent: 'center',
  },
  searchBox: {
    height: 35,
    margin: 10,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.white,
    borderRadius: 3,
  },
  searchText: {
    fontFamily: 'OpenSans',
    fontSize: 12,
    fontWeight: '600',
    color: colors.lightGrey,
    textAlign: 'center',
  },
  searchIcon: {
    paddingHorizontal: 4,
    color: colors.lightGrey,
  },
});

renderItem = (item, spacing) => {
    const images = item.images;

    const downsized = images.downsized_small && images.downsized_small.url;
    const fixedWidth = images.fixed_width && images.fixed_width.url;

    return (
      
    );
  }