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

export const styles = StyleSheet.create({
  browseText: {
    paddingBottom: 10,
    textAlign: 'center',
  },
  browseButton: {
    ...flattenCommon('centerCenter'),
    width: 125,
    height: 30,
    borderRadius: 4,
    backgroundColor: colors.green,
  },
  container: {
    ...flattenCommon('centerCenter'),
    flex: 1,
    backgroundColor: colors.darkPurple,
  },
  emptyList: {
    ...flattenCommon('centerCenter'),
    ...emptyBorderStyle,
    flex: 1,
    height: constants.EMPTY_LIST_HEIGHT,
    marginHorizontal: 15,
  },
  emptyPosterImageCard: {
    ...emptyBorderStyle,
    height: constants.POSTER_CARD_HEIGHT,
    marginHorizontal: 4,
    width: constants.POSTER_CARD_WIDTH,
  },
  listLastChild: {
    marginBottom: 12,

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

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.darkPurple,
  },
  imageContainer: {
    backgroundColor: colors.offBlack,
  },
  seperator: {
    marginBottom: 8,
  },
  buttonContainer: {
    backgroundColor: colors.offWhite,
    height: 40,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  button: {
    height: '100%',

fontSize: 12,
    lineHeight: 12,
    fontWeight: '600',
  },
  parentItem: {
    height: 43,
    flexDirection: 'row',
    borderTopWidth: StyleSheet.hairlineWidth,
    backgroundColor: colors.darkPurple,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: '#382534',
    alignItems: 'center',
  },
  sliderItem: {
    borderTopWidth: StyleSheet.hairlineWidth,
    backgroundColor: colors.darkPurple,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: '#382534',
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  childItem: {
    height: 41,
    flexDirection: 'row',
    paddingRight: 10,
    borderTopWidth: StyleSheet.hairlineWidth,
    backgroundColor: '#352834',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: '#2D1D29',
  },
  itemContainer: {

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

export default StyleSheet.create({
  container: {
    paddingBottom: isX ? safeAreaInsetX.bottom : 0,
    flex: 1,
    backgroundColor: colors.darkPurple,
  },
  stretch: {
    flex: 1,
  },
  logo: {
    position: 'absolute',
    bottom: Platform.select({ ios: 30, android: 20 }),
    width: 150,
    height: 42,
    resizeMode: 'contain',
    alignSelf: 'center',
  },
  tabsWrapper: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,

},
  stepContainer: {
    width: Dimensions.get('window').width,
    justifyContent: 'center',
  },
  stepImage: {
    width: 210,
    height: 240,
    resizeMode: 'contain',
  },
  getStartedButton: {
    marginBottom: 12,
    backgroundColor: colors.white,
  },
  getStartedText: {
    color: colors.darkPurple,
    fontSize: 17,
    fontWeight: 'bold',
  },
  dotContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  stepDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    margin: 3,
    backgroundColor: colors.lightPink,
  },

const data = [
      { key: 'release', title: 'Year' },
      { key: 'categories', title: 'Category' },
      { key: 'released', title: 'Released' },
      { key: 'length', title: 'Length' },
      { key: 'avail', title: 'Availability' },
    ];
    return (

minWidth: 120,
    paddingHorizontal: 8,
    paddingVertical: 4,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    backgroundColor: colors.transparentWhite,
  },
  customHeaderButtonText: {
    fontWeight: '600',
    fontFamily: 'Open Sans',
    color: colors.darkPurple,
    fontSize: 12,
  },
  container: {
    backgroundColor: colors.darkPurple,
    flex: 1,
  },
  noticeContainer: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 3,
    backgroundColor: colors.white,
    marginBottom: 6,
    position: 'relative',
  },
  noticeText: {
    fontWeight: '600',
    fontFamily: 'Open Sans',
    paddingVertical: 10,
  },

color: 'black',
    fontFamily: 'OpenSans',
    fontSize: 12,
    lineHeight: 12,
    fontWeight: '600',
  },
  parentItem: {
    backgroundColor: colors.offWhite,
    paddingHorizontal: 8,
    paddingVertical: 12,
    flexDirection: 'row',
    flex: 1,
  },
  itemSeperator: {
    borderWidth: 1,
    borderColor: colors.darkPurple,
  },
  iconContainer: { marginLeft: 2, justifyContent: 'center', width: 20 },
  icon: { fontSize: 10, color: '#444' },
  iconUnread: { color: '#f0705a' },
  detailsContainer: { alignItems: 'center', flexDirection: 'row', flex: 1 },
  userAvatar: { width: 40, height: 40, borderRadius: 20 },
  activityContainer: { flex: 1, justifyContent: 'center', marginLeft: 4 },
  activityTextContainer: {
    alignItems: 'flex-start',
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  activityText: { color: '#333', fontFamily: 'OpenSans', fontSize: 12 },
  activityTextHighlight: { fontWeight: 'bold' },
  activityMetaContainer: { justifyContent: 'flex-start' },
  activityMetaText: { fontSize: 11, color: '#919191', fontFamily: 'OpenSans' },

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


export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.darkPurple,
    paddingTop: 77 + Platform.select({ ios: 0, android: 4 }),
    paddingBottom: isX ? safeAreaInsetX.bottom : 0,
  },
  contentWrapper: {
    flex: 1,
    paddingHorizontal: 16,
  },
  rowWrapper: {
    minHeight: 47,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 8,
    padding: 8,
    borderRadius: 8,
    borderWidth: StyleSheet.hairlineWidth,

import React, { Component } from 'react';
import { StyleSheet, RefreshControl, ActivityIndicator } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { search } from 'kitsu/store/anime/actions';
import * as colors from 'kitsu/constants/colors';
import { NavigationHeader } from 'kitsu/components/NavigationHeader';
import { getMaxVisibleRows, getCurrentVisibleRows } from 'kitsu/screens/Search/Lists/ResultsList/spacing';
import { ResultsList } from './Lists';


const styles = StyleSheet.create({
  list: {
    backgroundColor: colors.darkPurple,
  },
});

class SearchResults extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    header: () => (
       {
          navigation.goBack(navigation.state.params.previousRoute || null);
        }}
        rightIcon="sliders"
        rightAction={() => (
          screenProps.rootNavigation.navigate('SearchFilter', {
            ...navigation.state.params,