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

export const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    backgroundColor: colors.listBackPurple,
    paddingTop: Platform.select({ ios: 77, android: 72 }),
  },
  headerCoverImage: {
    height: isX ? 150 + paddingX : 150,
    justifyContent: 'center',
  },

  hintText: {
    fontFamily: 'OpenSans',
    fontSize: 10,
    color: colors.grey,
  },
  valueText: {
    // TODO: Find a better name for this and remove margin to generalize more.
    fontFamily: 'OpenSans',
    fontSize: 12,
    marginTop: 4,
    color: colors.softBlack,
  },
  linkText: {
    fontFamily: 'OpenSans',
    fontSize: 12,
    color: colors.linkBlue,
  },
  emptyText: {
    marginVertical: 4,
    marginLeft: 13,

emptyBubble: {
    backgroundColor: 'transparent',
  },
  commentActions: {
    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',
  },
});

}
           this.handleFeedPickerModal(true)}
          />
           { this.postTextInput = el; }}
            multiline
            numberOfLines={4}
            onChangeText={content => this.setState({ content })}
            value={this.state.content}
            placeholder="Write something...."
            placeholderTextColor={colors.grey}
            autoCorrect={false}
            autoFocus
            returnKeyType="done"
            underlineColorAndroid="transparent"
          />
        
         this.handleFeedPickerModal(false)}
          onDonePress={feed => this.handleFeedPicker(feed)}
        />
      
    );
  }

const { gifModalVisible } = this.state;

    return (
      
        {showAvatar && }
        
          
        
        {!isEmpty(comment.trim()) && (

elevation: 3,
    zIndex: 2,
  },
  listHeader: {
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: colors.offWhite,
    borderBottomWidth: 1,
    borderBottomColor: colors.lightGrey,
  },
  listHeaderText: {
    fontFamily: 'OpenSans',
    fontWeight: '800',
    fontSize: 10,
    color: colors.grey,
    paddingVertical: 8,
  },
  searchBox: {
    height: 35,
    margin: 10,
  },
  loading: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 12,
  },

  emptyStateContainer: {
    flex: 1,
    width: '100%',
    flexDirection: 'column',

},

  mainButtonView: {
    flex: 3,
  },
  moreButton: {
    flex: 1,
  },
  mainButton: {
    height: 35,
    marginLeft: 0,
    marginRight: 0,
  },
  moreIcon: {
    paddingLeft: scenePadding * 2,
    color: colors.grey,
    fontSize: 28,
  },

  descriptionView: {
    backgroundColor: '#FFFFFF',
    paddingHorizontal: scenePadding,
    marginTop: scenePadding,
  },
  statusView: {
    flexDirection: 'row',
    paddingHorizontal: scenePadding,
    marginTop: scenePadding,
    alignItems: 'center',
  },
  kitsuScore: {
    flexDirection: 'column',

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

settingHeader: {
    fontFamily: 'OpenSans',
    fontSize: 12,
    fontWeight: 'normal',
    color: colors.white,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  customRow: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.lightGrey,
  },
  hintText: {
    fontFamily: 'OpenSans',
    fontSize: 10,
    color: colors.grey,
  },
  valueText: {
    fontFamily: 'OpenSans',
    fontSize: 13,
    marginTop: 3,
    color: colors.softBlack,
  },
});

fontSize: 16,
  },
  button: {
    marginHorizontal: 0,
  },
  buttonSecondary: {
    backgroundColor: colors.transparent,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
  },
  buttonTitleStyle: {
    fontWeight: '600',
  },
  buttonSecondaryTitle: {
    fontWeight: '600',
    color: colors.grey,
  },
  imageSimple: {
    width: 30,
    height: 30,
    resizeMode: 'contain',
    marginHorizontal: 2,
  },
  imageRegular: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
    marginHorizontal: 2,
  },
  imageAdvanced: {
    width: 15,
    height: 15,

paddingLeft: scenePadding * 2,
  },
  submitButtonIcon: {
    fontSize: 24,
  },
  gifButton: {
    marginLeft: 6,
    marginRight: 8,
    paddingVertical: 3,
    paddingHorizontal: 5,
    borderWidth: 1,
    borderColor: colors.grey,
    borderRadius: 16,
  },
  gifText: {
    color: colors.grey,
    fontSize: 12,
    fontWeight: 'bold',
  },
});