Provide solutions to make your app flexible for different screen sizes, different devices.

Overview

react-native-size-scaling

Provide solutions to make your app flexible for different screen sizes, different devices, based on your device's pixel ratio. When developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes. This package provides some simple tooling to make your scaling a whole lot easier.

Installation

npm install react-native-size-scaling

or

yarn add react-native-size-scaling

Jest setup

  jest.mock('react-native-size-scaling', () => {
      const sizeScaling = require('react-native-size-scaling/mock');
      return sizeScaling;
  });

Demo

Before After

Documents

API Type Description
StyleSheet StyleSheet Will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you
scale Function Will return a linear scaled result of the provided size
isAndroid Boolean Tells if the device is Android operating system
isIOS Boolean Tells if the device is IOS operating system
isTablet Boolean Tells if the device is a tablet
width Number Screen width
height Number Screen height

API

scale(size: number)

Will return a linear scaled result of the provided size, based on your device's pixel ratio.

import { scale } from 'react-native-size-scaling';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello word {scale(30)}</Text>
    </View>
  );
}

StyleSheet

Will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you.

import * as React from 'react';

import { View, Text } from 'react-native';
import { StyleSheet } from 'react-native-size-scaling';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello word</Text>
      <View style={styles.box}>
      <Text style={styles.text}>Device: IPhone 13</Text>
        <Text style={styles.text}>Before: 300x300</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 22,
  },
  box: {
    width: 300,
    height: 300,
    marginVertical: 20,
    backgroundColor: 'gray',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Donate

Support maintainers with a donation and help them continue with activities. Buy me a coffee and you can request quick processing of issues.


fateh999




You might also like...
React native full screen modal component.

react-native-fs-modal React native full screen modal component. Demo Usage NOTE: If you are using the native status bar you will need to combine this

Full screen functionality for Android

React native full screen functionality Android There is plenty of room for improvment by adding additional react bindings for props and callbacks. Pro

A React Native component for user to draw anything by touching screen
A React Native component for user to draw anything by touching screen

react-native-drawpad Basic useful feature list: Let users draw anything they want! change color of input easily change thickness of input easily defau

Quick React Native component for a full screen ScrollView
Quick React Native component for a full screen ScrollView

pagescrollview Very simple React Native / Expo ScrollView component that fills all the available area and have a working scrolling. It fixes some very

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped. A Virutal Screen keyboard implementation for React-Native
A Virutal Screen keyboard implementation for React-Native

React Native Screen Keyboard is a virutal screen keyboard implementation for React Native. It is fully customizable, the last row of the keys can be completely customized or changed to fit perfectly with your projects.

:computer: :dash: Make your component visible with animations and a set of rules or simple props

Make your component visible with animations and a set of rules or simple props Content Installation Display content with simple props Display content

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. 🌟

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible.

React Native Search Box A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/

Comments
  • In svg element

    In svg element "d" height and circleWidth gets wrong value because of "scale()" function

    Screen Shot 2022-09-22 at 17 45 40

    const height = scale(iHeight); const circleWidth = scale(centerWidth) + scale(16);

    "scale()" function works fine for bigger screen but in my example I use iPhone 8 emulator and there is a space bottom of SVG element. Maybe issue related to your repo (react-native-curved-bottom-bar) however problem in function. Would you check it please ?

    opened by ae-loggma 1
Releases(v0.5.1)
Owner
Hoà Phan
Hoà Phan
Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.

React Native Orientation Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per scr

Yamill Vallecillo 1.7k Sep 20, 2022
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app

react-native-idle-timer A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app Install npm insta

Marc Shilling 154 Sep 20, 2022
RN-TourGuide - A flexible tourguide for your react native app

??Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)

Xavier Carpentier 510 Sep 21, 2022
Make your app reactive with MobX and react-native-router-flux

Package is obsolete with latest react-native-router-flux v4 - RNRF allows now wrapping all scenes and navbar by passing wrapBy param (equal to MobX ob

Pavel Aksonov 222 Jul 29, 2022
react-native-egg make your react native app infinitely more fun !!

react-native-egg react-native-egg make your react native app infinitely more fun !! Implementation simple gestures detection achieve trigger easter eg

FuYaoDe 258 Aug 4, 2022
Simple and flexible Radio button for React Native App

React Native Flexi Radio Button Simple and flexible Radio button for React Native App Installation npm i react-native-flexi-radio-button --save Usage

Watcharachai Kanjaikaew 156 Mar 22, 2022
A splash screen for react-native, hide when application loaded ,it works on iOS and Android.

react-native-splash-screen A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android. C

Devio.org 5.3k Sep 30, 2022
Images etc in Full Screen Lightbox Popovers for React Native

react-native-lightbox Installation yarn add react-native-lightbox Usage navigator property is optional but recommended on iOS, see next section for N

Joel Arvidsson 2.8k Sep 18, 2022
A notification bar alert displayed at the top of the screen for react-native

react-native-message-bar A message bar notification component displayed at the top of the screen for React Native (Android and iOS) projects. Content

Kevin 441 Sep 20, 2022
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

YunJiang.Fang 371 Jul 25, 2022