How to use react-native-responsive-fontsize - 10 common examples

entriesContentContainer: {
    flex: 6, 
    alignItems: 'center', 
    justifyContent: 'center'
  },
  entriesHeader1: {
    flex: 1,
    fontSize: RF(3.1),
    textAlign: 'center',
    fontWeight: '700',
    marginTop: 3,
    color: lightText
  },
  entriesHeader2: {
    flex: 1,
    fontSize: RF(2.5), 
    fontWeight: '700',
    color: lightText,
    textAlign: 'center',
  },
  // entriesType: {
  //   flex: 1,
  //   textAlign: 'center',
  //   fontSize: RF(2), 
  //   fontWeight: '400',
  //   color: lightText,
  // },
  entriesHeader3: {
    fontSize: RF(2.1), 
    color: lightText,
    marginBottom: 3,
    textAlign: 'center',

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    backgroundColor: '#fafbfe'
  },
  mainContainer: {
    flex: 1,
    backgroundColor: '#fafbfe',
  },
  headerContainer: {
    flex:1,
    justifyContent:"flex-end"
  },
  textHeader: {
    fontFamily: 'Cairo-Light',
    fontSize: RF(4),
    marginLeft: '9%',
    color: '#1a1f3e',
  },
  coinListContainer: {
    alignItems: 'stretch',
    marginLeft: '9%',
    marginRight: '9%',
    flex: 4,
    paddingBottom: "2.5%",
  },
  btnContainer: {
    flex: 1,
    width: '100%',
    flex:1
  },
  button: {

marginBottom: '3.5%',
    marginTop: '7.5%',
  },
  footerGrandparentContainer: {
    alignItems: 'center',
    justifyContent: 'flex-end',
    position: 'absolute',
    bottom: '5%',
    flex: 1.25,
  },
  footerParentContainer: {
    alignItems: 'center',
  },
  textFooter: {
    fontFamily: 'WorkSans-Regular',
    fontSize: RF(1.7),
    color: '#c0c0c0',
    letterSpacing: 0.5,
  },
});

export default CreateOrRestore;

borderWidth: 1, 
    borderRadius: 10, 
    padding: 10, 
    width: wp('70%'),
    backgroundColor: lightText,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 3,
  },
  header: {
    fontSize: RF(4), 
    fontWeight: 'bold', 
    alignSelf: 'center'
  },
  statsContainer: {
    height: hp('26%')
  },
  lineContainer: {
    flex: 1,
    flexWrap: 'nowrap',
    flexDirection: 'row', 
    height: 10, 
    padding: 2
  },
  lineContainerLast: {
    flex: 1,
    flexWrap: 'nowrap',

borderWidth: 1, 
    borderRadius: 10, 
    padding: 10, 
    width: wp('80%'),
    backgroundColor: lightText,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 3,
  },
  header: {
    fontSize: RF(3.8), 
    fontWeight: 'bold', 
    textAlign: 'center',
    color: darkText,
  },
  myStatsContainer: {
    height: hp('26%')
  },
  lineContainer: {
    flex: 1,
    flexWrap: 'nowrap',
    flexDirection: 'row', 
    height: 10, 
    padding: 2
  },
  lineContainerLast: {
    flex: 1,

preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  footerGrandparentContainer: {
    alignItems: 'center',
    marginBottom: '3%',
    marginTop: '3%',
  },
  footerParentContainer: {
    alignItems: 'center',
  },
  textFooter: {
    fontFamily: 'WorkSans-Regular',
    fontSize: RF(1.7),
    color: '#c0c0c0',
    letterSpacing: 0.5,
  },
  msgText: {
    backgroundColor: '#f4f7f9',
    borderRadius: 5,
    color: 'black',
    padding: '2%',
  },
});

/**
 * Reterives the name of the page that invoked the screen.
 * @param {Object} state
 */
const mapStateToProps = ({ QrScanner, contacts }) => {

flex: 0.75,
  },
  contentContainer: {
    width: '82%',
    flex: 1,
  },
  cardText: {
    paddingBottom: '7.5%',
    paddingTop: '7.5%',
    paddingLeft: '7.5%',
    paddingRight: '7.55%',
    fontFamily: 'WorkSans-Light',
    color: '#000000',
    letterSpacing: 0.4,
    fontSize: RF(2.4),
    lineHeight: RF(2.8),
  },
  mnemonicText: {
    paddingTop: '2.5%',
    paddingLeft: '7.5%',
    paddingRight: '7.55%',
    fontFamily: 'WorkSans-Light',
    letterSpacing: 0.4,
    color: '#12c1a2',
    fontSize: RF(2.2),
    lineHeight: RF(3),
  },
  btnContainer: {
    flex: 2,
    alignItems: 'stretch',
    justifyContent: 'flex-end',
    width: '100%',

paddingTop: '2%',
  },
  iconImage: {
    height: Dimensions.get('window').height * 0.04,
    width: Dimensions.get('window').width * 0.07,
    alignItems: 'center',
  },
  CoinTypeText: {
    fontSize: RF(2.4),
    letterSpacing: 0.5,
    fontFamily: 'Cairo-Regular',
    marginBottom: 0,
    paddingBottom: 0,
  },
  textAddressText: {
    fontSize: RF(1.7),
    letterSpacing: 0.4,
    fontFamily: 'Cairo-Light',
    flexWrap: 'wrap',
  },
  btnContainer: {
    flex: 1.2,
    width: '100%',
  },
  button: {
    width: '82%',
    height: Dimensions.get('window').height * 0.082,
  },
  coinType: {
    fontSize: 14,
    fontFamily: 'WorkSans-Regular',
  },

tabsContainer: {
    flexDirection: 'row',
    marginLeft: '9%',
    marginRight: '9%',
  },
  tabContainer: {
    flex: 1,
    borderBottomWidth: 3,
    borderBottomColor: 'transparent',
  },
  tabContainerActive: {
    borderBottomColor: '#12c1a2',
  },
  tabText: {
    alignSelf: 'center',
    fontSize: RF(2.8),
    fontFamily: 'Cairo-Light',
    letterSpacing: 0.6,
  },
  tabTextActive: {
    alignSelf: 'center',
    fontSize: RF(2.8),
    fontFamily: 'Cairo-Light',
    letterSpacing: 0.6,
    color: '#12c1a2',
  },
  contentContainer: {
    flex: 1,
  },
});

}

const gradientColors = {
    Enabled: ['#04b79f', '#5cfab1'],
    Disabled: ['#a2a3a5', '#e5e5e5']
}
const styles = StyleSheet.create({
    buttonStyles: {
        borderRadius: 100,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: '9%',
    },
    textStyles: {
        fontFamily: "Cairo-Regular",
        fontSize: RF(2.5),
        color: "#ffffff",
        letterSpacing: 0.4
    },
})


export default LinearButton;