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

import { StyleSheet, Dimensions } from 'react-native';
import * as colors from 'kitsu/constants/colors';
import { isX } from 'kitsu/utils/isX';

export const styles = StyleSheet.create({
  contentWrapper: {
    flex: 1,
  },
  line: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: colors.darkGrey,
    marginVertical: 10,
  },
  carouselWrapper: {
    height: Dimensions.get('window').height * 0.58,
    marginTop: 10,
  },
  poster: {
    width: Dimensions.get('window').width * 0.7, // should match carousel component itemWidth prop value.
    height: Dimensions.get('window').height * 0.58,
    borderRadius: 8,
    justifyContent: 'flex-end',
  },
  posterInnerContainer: {
    height: 180,
    justifyContent: 'flex-end',
    alignItems: 'center',

alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  swipeButton: {
    alignContent: 'flex-start',
    paddingLeft: 12,
    flex: 1,
    justifyContent: 'center',
    backgroundColor: colors.green,
  },
  swipeButtonActive: {
    backgroundColor: colors.green,
  },
  swipeButtonInactive: {
    backgroundColor: colors.darkGrey,
  },
  swipeButtonText: {
    ...StyleSheet.flatten(commonStyles.text),
    ...StyleSheet.flatten(commonStyles.colorWhite),
    fontSize: 16,
  },
  titleSection: {
    alignContent: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  titleText: {
    ...StyleSheet.flatten(commonStyles.text),
    marginRight: MENU_BUTTON_WIDTH + 2, // for padding
  },

headerText: {
    fontSize: 12,
    fontColor: '#333333',
    fontFamily: 'OpenSans',
  },
  footerDivider: {
    width: 0,
    height: '60%',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#EEEEEE',
  },
  activityText: {
    marginLeft: 90,
    fontFamily: 'OpenSans',
    fontSize: 12,
    color: colors.darkGrey,
    lineHeight: 17,
  },
};

export default CardActivity;

},
  button: {
    marginHorizontal: 5,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderRadius: 4,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  buttonText: {
    color: colors.white,
    fontFamily: 'OpenSans',
    fontSize: 12,
  },
  seriesCompleteText: {
    color: colors.darkGrey,
    fontSize: 10,
    fontWeight: 'bold',
    fontFamily: 'OpenSans',
  },
  markWatchedButton: {
    flex: 1,
    backgroundColor: colors.green,
  },
  loadingSpinner: {
    flexGrow: 1,
    marginTop: 8,
  },
});

export default styles;

},
  clearEmbed: {
    backgroundColor: colors.red,
  },
  emptyEmbed: {
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    height: 70,
    marginHorizontal: 8,
    marginTop: 4,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.lightestGrey,
  },
  emptyEmbedText: {
    color: colors.darkGrey,
  },
});

borderWidth: 1,
    borderRadius: 5,
    margin: scenePadding,
    padding: scenePadding * 1.5,
  },
  backgroundText: {
    position: 'absolute',
    right: scenePadding,
    ...text,
    fontSize: 26,
  },
  foregroundText: {
    ...text,
    flex: 1,
    textAlign: 'center',
    color: colors.darkGrey,
  },
});

contentWrapper: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  carousel: {
    flexGrow: 0,
    zIndex: 5,
  },
  socialContent: {
    flex: 1,
    backgroundColor: colors.listBackPurple,
    zIndex: 1,
  },
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: colors.darkGrey,
  },
  discussionTitle: {
    color: 'white',
    fontFamily: 'OpenSans',
    textAlign: 'center',
    padding: 16,
  },
  closeButton: {
    alignItems: 'center',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 80,
  },

renderItem={({ item }) => (
           navigation.navigate('SearchResults', { ...item, active })}
          >
            
          
        )}
      />

backgroundColor: colors.green,
  },
  itemUrl: {
    flex: 1,
    textAlignVertical: 'center',
    fontWeight: 'bold',
  },
  itemUrl__selected: {
    color: colors.white,
  },
  checkmark: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.darkGrey,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 8,
  },
  checkmark__selected: {
    backgroundColor: colors.green,
    borderColor: colors.white,
  },
  checkmarkIcon: {
    fontSize: 24,
    backgroundColor: 'transparent',
    paddingTop: Platform.select({ ios: 4, android: 0 }),
  },
});

style={{ resizeMode: 'contain', width: 24, height: 24, borderRadius: 12 }}
              cache="web"
            />