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

marginHorizontal: 4,
    marginBottom: 4,
  },
  descriptionRow: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    marginHorizontal: 4,
    marginVertical: 4,
  },
  seriesTitle: {
    fontFamily: 'OpenSans',
    fontWeight: '600',
    marginRight: 5,
    color: colors.white,
    backgroundColor: colors.transparent,
  },
  seriesExtraInfo: {
    fontFamily: 'OpenSans',
    color: colors.grey,
    fontWeight: '200',
    fontSize: 12,
    marginRight: 5,
  },
  seriesNextEpisodeTitle: {
    // inherits from extra info,
    fontWeight: 'bold',
    color: '#999999',
  },
  seriesFinishedTitle: {
    color: '#999999',
    fontWeight: 'bold',

},
  title: {
    fontFamily: 'OpenSans',
    fontWeight: '600',
    color: colors.white,
    textAlign: 'center',
    fontSize: 12,
    top: -3,
    marginBottom: 3,
  },
  buttonWatchlistWrapper: {
    alignItems: 'center',
  },
  buttonWatchlist: {
    minWidth: 140,
    backgroundColor: colors.transparent,
    borderRadius: 8,
    borderColor: colors.grey,
    borderWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  buttonWatchlistTitle: {
    color: colors.white,
    fontSize: 12,
    textAlign: 'center',
    backgroundColor: colors.transparent,
  },
  ratingWrapper: {
    marginVertical: 20,
  },
  loadingWrapper: {

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

export const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: colors.transparent,
  },
  content: {
    paddingTop: statusBarHeight + (isX ? paddingX : 0),
    paddingHorizontal: 12,
    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,

items.map(item => (
                <button style="{{">
                  
                </button>
              ))
            }

loading,
      loadingUserFeed,
      currentUser,
      favoritesLoading,
      favorite: { characters, anime, manga },
      entries,
    } = this.props;

    const { userId } = this.state;
    const libraryActivity = entries.slice(0, 12);

    return (

height: 115,
    borderRadius: 8,
  },
  buttonsWrapper: {
    justifyContent: 'center',
  },
  fbIcon: {
    color: colors.white,
    paddingRight: 8,
    paddingLeft: 8,
  },
  buttonFacebook: {
    backgroundColor: colors.fbBlueDark,
  },
  buttonCreateAccount: {
    backgroundColor: colors.transparent,
    borderWidth: 1.5,
    borderColor: colors.darkGrey,
  },
  buttonAlreadyAccount: {
    backgroundColor: colors.transparent,
  },
});

},
  contentWrapper: {
    flex: 1,
    paddingHorizontal: 16,
  },
  rowWrapper: {
    minHeight: 47,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 8,
    padding: 8,
    borderRadius: 8,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    backgroundColor: colors.transparent,
  },
  rowSelected: {
    backgroundColor: colors.white,
  },
  rowRating: {
    paddingHorizontal: 14,
    minHeight: 58,
    borderRadius: 8,
  },
  text: {
    color: colors.white,
    fontFamily: 'OpenSans',
    fontWeight: '600',
  },
  textSelected: {
    color: colors.darkPurple,

color: 'grey',
    textAlign: 'left',
    fontSize: 14,
  },
  buttonsWrapper: {
    flex: 1,
    justifyContent: 'center',
  },
  fbIcon: {
    color: colors.white,
    paddingRight: 8,
    paddingLeft: 8,
  },
  buttonFacebook: {
    borderWidth: 2,
    backgroundColor: colors.transparent,
    borderColor: 'rgba(255, 255, 255, 0.2)',
  },
  termsWrapper: {
    marginVertical: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  terms: {
    fontSize: 12,
    color: 'grey',
    fontFamily: 'OpenSans',
  },
  termsHightlight: {
    fontWeight: 'bold',
  },

alignItems: 'center',
  },
  buttonWatchlist: {
    minWidth: 140,
    backgroundColor: colors.transparent,
    borderRadius: 8,
    borderColor: colors.grey,
    borderWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  buttonWatchlistTitle: {
    color: colors.white,
    fontSize: 12,
    textAlign: 'center',
    backgroundColor: colors.transparent,
  },
  ratingWrapper: {
    marginVertical: 20,
  },
  loadingWrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.7)',
  },
});

export const Input = ({ style, containerStyle, ...otherProps }) => (
  
);