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

);
  }
}

const styles = StyleSheet.create({
  wrapper: {
    justifyContent: 'center',
    width: '120%', // We need to overflow our parent, as we're actually wider than we technically should be.
    height: 45,
  },
  filterContext: {
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '800',
    fontSize: 13,
    textAlign: 'center',
  },
  instructions: {
    color: colors.lightGrey,
    fontFamily: 'OpenSans',
    fontSize: 11,
    fontWeight: '600',
    textAlign: 'center',
  },
});

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

export const styles = StyleSheet.create({
  container: {
    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,
  },

renderCheckboxes() {
    const { nsfw, spoiler } = this.state;
    return (

text: {
    fontFamily: 'OpenSans',
    fontSize: 12,
    fontWeight: '600',
  },
  textSmall: {
    fontSize: 10,
  },
  textHeavy: {
    fontWeight: '800',
  },
  transparent: {
    backgroundColor: 'transparent',
  },
  colorWhite: {
    color: colors.white,
  },
  colorActiveRed: {
    color: colors.activeRed,
  },
  colorLightGrey: {
    color: colors.lightGrey,
  },
});

export const flattenCommon = (...styles) => {
  const includedStyles = styles.map(style => commonStyles[style]);
  return StyleSheet.flatten(includedStyles);
};

posterImage: {
    flexGrow: 1,
    borderRadius: 10,
    justifyContent: 'flex-end',
    padding: 4,
  },
  posterImageGradient: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  currentEpisodeText: {
    backgroundColor: 'transparent',
    color: colors.white,
    fontFamily: 'OpenSans',
    fontSize: 12,
  },
  totalEpisodesText: {
    backgroundColor: 'transparent',
    color: '#999999',
    fontFamily: 'OpenSans',
    fontSize: 12,
    flex: 1,
  },
  episodeName: {
    backgroundColor: 'transparent',
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '700',
    fontSize: 16,

height: 40,
    borderRadius: 20,
    resizeMode: 'contain',
  },
  brandImage: {
    width: 32,
    height: 32,
    borderRadius: 16,
    resizeMode: 'contain',
  },
  textWrapper: {
    marginHorizontal: 8,
    flex: 1,
  },
  libraryCount: {
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '200',
    fontSize: 11,
  },
  ps: {
    marginVertical: 16,
    color: colors.white,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    fontSize: 11,
  },
  iceBackground: {
    width: Dimensions.get('window').width,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

height: 80 + (isX ? paddingX : 0),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(44, 34, 43, 0.95)',
    borderBottomWidth: 1,
    borderBottomColor: 'rgb(46, 34, 45)',
  },
  text: {
    color: colors.offWhite,
    fontWeight: '700',
    fontFamily: 'OpenSans',
    fontSize: 12,
    margin: 10,
  },
  userAvatar: { width: 40, height: 40, borderRadius: 20 },
  activityText: { color: colors.white, fontFamily: 'OpenSans', fontSize: 12 },
  activityTextHighlight: { fontWeight: 'bold', color: colors.tabRed },
});

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 }),
  },
});

rowRating: {
    paddingHorizontal: 14,
    minHeight: 58,
    borderRadius: 8,
  },
  text: {
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '600',
  },
  textSelected: {
    color: colors.darkPurple,
  },
  tutorialText: {
    marginVertical: 16,
    color: colors.white,
    fontFamily: 'OpenSans',
    textAlign: 'center',
    fontWeight: '600',
    fontSize: 16,
  },
  button: {
    marginHorizontal: 0,
  },
  buttonSecondary: {
    backgroundColor: colors.transparent,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
  },
  buttonTitleStyle: {
    fontWeight: '600',
  },

totalEpisodesText: {
    backgroundColor: 'transparent',
    color: '#999999',
    fontFamily: 'OpenSans',
    fontSize: 12,
    flex: 1,
  },
  episodeName: {
    backgroundColor: 'transparent',
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '700',
    fontSize: 16,
  },
  cardWrapper: {
    backgroundColor: colors.white,
    top: 80,
    width: Dimensions.get('window').width * 0.85,
    height: 198,
    borderRadius: 10,
    zIndex: 3,
  },
  cardHeaderWrapper: { flex: 1, justifyContent: 'flex-end' },
  cardHeaderArea: {
    backgroundColor: 'rgb(250, 250, 250)',
    borderBottomWidth: 1,
    borderColor: 'rgb(236, 236, 236)',
    padding: 8,
  },
  episodeRow: {
    justifyContent: 'center',
    alignItems: 'center',