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

import { isX, paddingX } from 'kitsu/utils/isX';
import { navigationBarHeight, statusBarHeight } from 'kitsu/constants/app';

export const styles = StyleSheet.create({
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    // Height is different for android because the modal doesn't cover the status bar
    // If it does in the future then the height would be the nav bar height + Status bar height
    height: navigationBarHeight + (isX ? paddingX : 0) + Platform.select({
      ios: statusBarHeight,
      android: 0,
    }),
    paddingTop: Platform.select({ ios: statusBarHeight, android: 0 }) + (isX ? paddingX : 0),
    backgroundColor: colors.listBackPurple,
  },
  modalButton: {
    flex: 1,
  },
  modalRightButton: {
    alignItems: 'flex-end',
  },
  modalTitle: {
    flex: 1,
    alignItems: 'center',
  },
});

renderEmptyFeed = () => (
    
  );

typeContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  opacityFill: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    flex: 1,
  },
  typeSelectContainer: {
    backgroundColor: colors.darkPurple,
  },
  typeTextContainer: {
    backgroundColor: colors.listBackPurple,
    padding: 14,
    justifyContent: 'center',
    marginTop: 1,
  },
  typeText: {
    textAlignVertical: 'center',
  },
});

import { StyleSheet } from 'react-native';
import { flattenCommon } from 'kitsu/common/styles';
import * as colors from 'kitsu/constants/colors';
import { navigationBarHeight, statusBarHeight } from 'kitsu/constants/app';
import { isX, paddingX } from 'kitsu/utils/isX';

export const styles = StyleSheet.create({
  headerContainer: {
    alignItems: 'flex-end',
    backgroundColor: colors.listBackPurple,
    flexDirection: 'row',
    height: navigationBarHeight + statusBarHeight + (isX ? paddingX : 0),
    shadowColor: 'rgba(0,0,0,0.2)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
    elevation: 3,
    zIndex: 2,
  },
  headerItemText: {
    ...flattenCommon('text'),
    color: colors.lightGrey,
    fontSize: 16,
  },

favorite: {
      characters: [...c],
      manga: [...m],
      anime: [...a],
    },
    entries: [...l],
    favoritesLoading,
    userFeed: filteredFeed,
    loadingUserFeed,
  };
};

const styles = {
  container: {
    flex: 1,
    backgroundColor: colors.listBackPurple,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customHeader: {
    position: 'absolute',
    top: 0,
    flex: 1,
    alignSelf: 'stretch',
    right: 0,
    left: 0,
  },
  tabBarIcon: {
    width: 22,
    height: 22,
    overflow: 'visible',
  },

render() {
    const { active } = this.props;
    const data = this.props[active];
    return (

renderGallery = (array, title, type) => {
    const { active } = this.props;
    const data = array.length > 0
      ? array
      : Array(10).fill(1).map((item, index) => ({ key: index }));

    return (

render() {
    return (
      
        
          {this.props.tabs.map((tab, i) => (

import { commonStyles } from 'kitsu/common/styles';

const SidebarTitle = ({ title, style }) => (
  
);

const styles = StyleSheet.create({
  titleWrapper: {
    marginTop: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: colors.listBackPurple,
  },
});

SidebarTitle.propTypes = {
  title: PropTypes.string.isRequired,
};

SidebarTitle.defaultProps = {
  title: 'Settings',
};

export default SidebarTitle;

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

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.listBackPurple,
  },
  videoContainer: {
    backgroundColor: colors.white,
  },
  webContainer: {
    width: Dimensions.get('window').width,
    height: 200
  },
  languageContainer: {
    padding: 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  languageButton: {
    paddingVertical: 5,