🚢 blueship

Helpful React Native utilities for building responsive UIs that look great on every screen size.

Installation

npm install blueship
# or
yarn add blueship

Note: react-native is a peer dependency — make sure it's already installed in your project.

Usage

createResponsive

Creates a set of scaling functions calibrated to your design's reference screen dimensions.

import { createResponsive } from 'blueship';

// Pass in the dimensions of your design mockup (e.g. iPhone 14 = 375 x 812)
const { width, height, scale } = createResponsive({
  standardWidth: 375,
  standardHeight: 812,
});

Then use those functions in your StyleSheet:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: width(20),   // scales with screen width
    marginTop: height(10),          // scales with screen height
  },
  text: {
    fontSize: scale(16),            // scales uniformly (uses the smaller ratio)
  },
});

Return values

| Function | Description | |---|---| | width(v) | Scales v proportionally to screen width | | height(v) | Scales v proportionally to screen height | | scale(v) | Scales v uniformly using the smaller of width/height ratio (safe for fonts) |

API

createResponsive(config)

| Parameter | Type | Description | |---|---|---| | standardWidth | number | Width of your design reference screen | | standardHeight | number | Height of your design reference screen |

License

ISC © Ahmed