rn-resp-dim

    1.0.3 • Public • Published

    react-native-responsive-dimensions

    Responsive height, width and responsive fontSize for react native components that automatically adjust themselves based on the screen size of the device. The dimensions can be used for any components like View, Image, Text etc.

    Installation

    #npm 
    npm install --save react-native-responsive-dimensions
     
    #yarn 
    yarn add react-native-responsive-dimensions

    The below snippet will create styles with a container of dynamic height, width and a sample text with dynamic font-size relative to the screen size of the device the app is run.

    import { StyleSheet } from 'react-native';
    import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
     
    const styles = StyleSheet.create({
      container: {
        justifyContent: 'center',
        height: responsiveHeight(50), // 50% of screen height
        width: responsiveWidth(50), // 50% of screen width
        alignItems: 'center',
      },
      sampleText: {
        fontSize: responsiveFontSize(2), // 2% of total screen size
      }
    });

    This will create a container(view/image) with height that is exactly 50% of the device's screen-height and width exactly 50% of the device's screen-height and a font with fontSize that occupies exactly 2% of the screen size.

    License

    MIT

    Install

    npm i rn-resp-dim

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    5.66 kB

    Total Files

    6

    Last publish

    Collaborators

    • nr_77