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

height: 40,
    alignContent: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    borderRadius: 4,
    flex: 1,
  },
  back: {
    color: colors.red,
  },
  select: {
    color: colors.green,
  },
  backButton: {
    borderColor: colors.red,
    marginRight: 5,
  },
  selectButton: {
    borderColor: colors.green,
    marginLeft: 5,
  },
  text: {
    fontSize: 16,
    textAlign: 'center',
  },
  loading: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,

statusItemView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  statusItem__rating: {
    marginBottom: 4,
  },
  statusIcon: {
    fontSize: 17,
    marginRight: 5,
  },
  statusIcon__rating: {
    color: colors.yellow,
  },
  statusIcon__popularity: {
    color: colors.red,
  },

  followStatus: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  followStatus__followers: {
    marginLeft: 10,
  },
  followStatus__following: {
    marginLeft: 0,
  },

  categories: {
    marginTop: scenePadding,
  },

marginHorizontal: 8,
    marginTop: 4,
  },
  embedText: {
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    padding: 8,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  changeEmbed: {
    marginRight: 4,
  },
  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,
  },
});

flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 14,
    paddingTop: 5,
  },
  commentActionItem: {
    marginLeft: 14,
    flexDirection: 'row',
    alignItems: 'center',
  },
  likeIcon: {
    color: colors.grey,
    marginRight: 3,
  },
  likeIcon__active: {
    color: colors.red,
  },
  nestedComments: {
    marginTop: 14,
    marginLeft: 14,
  },
  linkStyle: {
    color: colors.orange,
    fontStyle: 'italic',
    fontWeight: 'bold',
  },
});

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

export const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 20,
    right: 12,
    left: 12,
    backgroundColor: colors.red,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 12,
    borderRadius: 2,
    zIndex: 99,
  },
  title: {
    color: 'white',
    fontSize: 12,
    fontWeight: 'bold',
    fontFamily: 'OpenSans',
    textAlign: 'center',
  },
  defaultStyles: {
  },
});

renderActionBarModal() {
    const { busy } = this.state;
    if (busy) return null;

    const actions = this.canSetActions();
    const data = [
      {
        image: photo,
        color: colors.red,
        title: `Attach Photos (Max ${prettyBytes(MAX_UPLOAD_SIZE_LIMIT)} or ${MAX_UPLOAD_COUNT} Images)`,
        onPress: () => this.handlePressUpload(),
        visible: actions.canSetUploads,
      },
      {
        image: giphy,
        color: '#8ABE53',
        title: 'Search & Share GIF',
        onPress: () => this.handleGiphyPickerModal(true),
        visible: true,
      },
      {
        image: tag,
        color: colors.blue,
        title: 'Tag Anime or Manga',
        onPress: () => this.handleMediaPickerModal(true),

minHeight: 82,
    textAlignVertical: 'center',
  },
  modalSlider: {
    marginHorizontal: 30,
  },
  textStar: {
    color: colors.yellow,
    fontWeight: '700',
  },
  textNotRated: {
    color: colors.lightGrey,
    fontWeight: '700',
  },
  textAwful: {
    color: colors.red,
    fontWeight: '700',
  },
  textMeh: {
    color: colors.yellow,
    fontWeight: '700',
  },
  textGood: {
    color: colors.green,
    fontWeight: '700',
  },
  textGreat: {
    color: colors.blue,
    fontWeight: '700',
  },
});

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

export const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  contentContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 40,
    backgroundColor: colors.red,
    margin: 16,
    paddingHorizontal: 4,
    borderRadius: 4,
  },
  title: {
    color: colors.white,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    fontWeight: '600',
    fontSize: 13,
    flex: 1,
  },
});

flexDirection: 'row',
    justifyContent: 'space-around',
  },
  button: {
    margin: 10,
    minWidth: 100,
    height: 40,
    alignContent: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    borderRadius: 4,
    flex: 1,
  },
  back: {
    color: colors.red,
  },
  select: {
    color: colors.green,
  },
  backButton: {
    borderColor: colors.red,
    marginRight: 5,
  },
  selectButton: {
    borderColor: colors.green,
    marginLeft: 5,
  },
  text: {
    fontSize: 16,
    textAlign: 'center',
  },

flex: 1,
    backgroundColor: colors.white,
  },
  loadingContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.7)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 666,
  },
  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,