How to use the react-native-responsive-screen.widthPercentageToDP function in react-native-responsive-screen

oceanCapitalized = this.props.ocean.charAt(0).toUpperCase() + this.props.ocean.slice(1);
    }
    let header1;
    let header2;
    let header3;
    if (this.props.statsType === 'myStats') {
      header1 = (this.props.type === 'ocean' ? oceanCapitalized : `${this.props.stateRegion}, ${this.props.country}`);
      header2 = this.props.timeStamp;
      header3 = type[this.props.type];
    } else if (this.props.statsType === 'globalStats') {
      header1 = this.props.username;
      header2 = (this.props.type === 'ocean' ? oceanCapitalized : `${this.props.stateRegion}, ${this.props.country}`);
      header3 = this.props.timeStamp;
    }
    return (
      
    );
  }
}

import { StyleSheet } from 'react-native';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import layout from '../constants/layout';
import { colors } from '../constants/theme';

export default StyleSheet.create({
  flatList: {
    flex: layout.isSmallDevice ? 1 : 1,
    backgroundColor: colors.BACKGROUND,
    // paddingTop: headerBottomSpace * 1.125,
  },
  container: {
    flex: 1,
    marginBottom: wp('2%'),
    marginLeft: wp('1%'),
    marginRight: wp('1%'),
    padding: wp('2%'),
    borderRadius: wp('1.125%'),
    backgroundColor: colors.LIST_CONTAINER_BACKGROUND,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    alignSelf: 'flex-end',
    marginTop: wp('2%'),
  },
  title: {
    flex: 0.2,

}
    return (
      
    );
  }
}

TITLE: 20,
  SUB_TITLE: 16,
  BODY: 14,
  BUTTON: fontFix(14),
  DETAIL: 12,
  MINOR: 10,

  FORM_LABEL: 18,
  FORM_INPUT: 16,
};

const THUMB_WIDTH = 320;
const THUMB_HEIGHT = 320;

export const touchableOpacity = 0.75;
export const wikiBadgeSize = Layout.isSmallDevice ? wp('5%') : wp('3%');
export const detailViewImageSize = Layout.isSmallDevice ? wp('60%') : wp('47%');
export const detailViewCloseIconSize = Layout.isSmallDevice
  ? wp('8%')
  : wp('8%');
export const overviewListSmallIconSize = Layout.isSmallDevice
  ? wp('5%')
  : wp('2.25%');
export const overviewListBigIconSize = Layout.isSmallDevice
  ? wp('15%')
  : wp('9%');
export const overviewListNumColumns = Layout.isSmallDevice ? 1 : 2;
export const settingsListItemIconSize = Layout.isSmallDevice
  ? wp('8%')
  : wp('5%');
export const overviewListIconBorderWidth = Layout.isSmallDevice
  ? wp('0.35%')

BUTTON: fontFix(14),
  DETAIL: 12,
  MINOR: 10,

  FORM_LABEL: 18,
  FORM_INPUT: 16,
};

const THUMB_WIDTH = 320;
const THUMB_HEIGHT = 320;

export const touchableOpacity = 0.75;
export const wikiBadgeSize = Layout.isSmallDevice ? wp('5%') : wp('3%');
export const detailViewImageSize = Layout.isSmallDevice ? wp('60%') : wp('47%');
export const detailViewCloseIconSize = Layout.isSmallDevice
  ? wp('8%')
  : wp('8%');
export const overviewListSmallIconSize = Layout.isSmallDevice
  ? wp('5%')
  : wp('2.25%');
export const overviewListBigIconSize = Layout.isSmallDevice
  ? wp('15%')
  : wp('9%');
export const overviewListNumColumns = Layout.isSmallDevice ? 1 : 2;
export const settingsListItemIconSize = Layout.isSmallDevice
  ? wp('8%')
  : wp('5%');
export const overviewListIconBorderWidth = Layout.isSmallDevice
  ? wp('0.35%')
  : wp('0.25%');

export const mapSize = Layout.isSmallDevice ? wp('75%') : wp('85%');

: wp('8%');
export const overviewListSmallIconSize = Layout.isSmallDevice
  ? wp('5%')
  : wp('2.25%');
export const overviewListBigIconSize = Layout.isSmallDevice
  ? wp('15%')
  : wp('9%');
export const overviewListNumColumns = Layout.isSmallDevice ? 1 : 2;
export const settingsListItemIconSize = Layout.isSmallDevice
  ? wp('8%')
  : wp('5%');
export const overviewListIconBorderWidth = Layout.isSmallDevice
  ? wp('0.35%')
  : wp('0.25%');

export const mapSize = Layout.isSmallDevice ? wp('75%') : wp('85%');

const HEADER_WIDTH = 256 / 100;
const HEADER_HEIGHT = 38 / 100;

const SPLASH_WIDTH = 563 / 100;
const SPLASH_HEIGHT = 1059 / 100;

const headerWPercent = '7%';

export const splashImageWidth = SPLASH_WIDTH * wp('8%');
export const splashImageHeight = SPLASH_HEIGHT * wp('8%');

export const headerImageWidth = Layout.isSmallDevice
  ? HEADER_WIDTH * hp(headerWPercent)
  : HEADER_WIDTH * hp(headerWPercent);
export const headerImageHeight = Layout.isSmallDevice

alignSelf: 'center',
  },
  missionContent: {
    width: '90%',
    alignSelf: 'center',
  },
  padContent: {
    marginLeft: wp('1%'),
    marginRight: wp('1%'),
    alignSelf: 'center',
  },
  agencyContent: {
    marginTop: wp('2%'),
    marginLeft: wp('2%'),
    marginRight: wp('2%'),
    marginBottom: wp('2%'),
  },
  cardItem: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  titleStyle: {
    fontWeight: 'bold',
    color: 'black',
    fontSize: fontSize.DETAILS_VIEW_TITLE,
  },
  subTitleStyle: {
    color: 'grey',
    fontSize: fontSize.DETAILS_VIEW_SUBTITLE,
  },
});

borderRadius: 3,
    paddingLeft: wp('3%'),
    paddingRight: wp('3%'),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchIcon: {
    color: colors.PRIMARY_ALPHA,
  },
  textInput: {
    flex: 1,
    textDecorationLine: 'none',
    fontSize: fontSize.FORM_INPUT,
    marginLeft: wp('2%'),
    marginRight: wp('2%'),
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: 0,
    paddingRight: wp('2%'),
  },
});

borderWidth: 1,
    borderColor: '#ccc',
    width: '100%',
    padding: 0,
    margin: 0,
    justifyContent: 'center',
    height: layout.isSmallDevice
      ? footerTabIconSize * 2.5
      : footerTabIconSize * 2.25,
    backgroundColor: colors.TABBAR_BACKGROUND,
  },
  tabBarIconStyle: {
    width: '100%',
  },
  tabBarLabelStyle: {
    fontSize: layout.isSmallDevice ? wp('3%') : wp('2%'),
    width: '100%',
  },
  splashImage: {
    alignSelf: 'center',
    width: splashImageWidth,
    height: splashImageHeight,
  },
});

marginRight: wp('1%'),
    padding: wp('2%'),
    borderRadius: wp('1.125%'),
    backgroundColor: colors.LIST_CONTAINER_BACKGROUND,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    alignSelf: 'flex-end',
    marginTop: wp('2%'),
  },
  title: {
    flex: 0.2,
    fontSize: layout.isSmallDevice ? wp('3%') : wp('2%'),
    color: colors.DARK_TEXT_PRIMARY,
    fontWeight: 'bold',
  },
  text: {
    flex: 0.8,
    fontSize: layout.isSmallDevice ? wp('2.5%') : wp('1.5%'),
    color: colors.DARK_TEXT_SECONDARY,
    margin: wp('0.75%'),
  },
  textContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'flex-start',
    flex: 1,
    paddingLeft: 10,
  },