react-native-breakpoints v1.0.0

react-native-breakpoints

📱 📐 Simple device size breakpoints for React Native apps.

This module creates breakpoints based on device width.

Installation

npm i react-native-breakpoints

Usage

import * as Breakpoints from 'react-native-breakpoints';

export YourComponent extends React.Component {
  render() {
    return (
      <View>
        { Breakpoints.isSmall && <Text>Small Device</Text> }
        { Breakpoints.isMedium && <Text>Medium Device</Text> }
        { Breakpoints.isLarge && <Text>Large Device</Text> }
        <Text style={Breakpoints.select({
          small: {
            fontSize: 12,
          },
          medium: {
            fontSize: 14
          },
          large: {
            fontSize: 16
          },
          default: {
            fontSize: 14
          }
        })}>This Text will vary in size.</Text>
      </View>
    );
  }
}

Todo

• Base breakpoints on Width and Height
• Set breakpoint size
• Add custom breakpoints