{"library":"react-native-size-matters","title":"React Native UI Scaling Utility","description":"react-native-size-matters is a lightweight utility library for React Native designed to simplify the scaling of UI elements across various device screen sizes. It helps developers avoid manually adjusting layouts for different screen dimensions by providing a set of robust scaling functions (e.g., `scale`, `verticalScale`, `moderateScale`, `moderateVerticalScale`) and a `ScaledSheet` API that automatically processes style annotations. The library is currently stable at version `0.4.2`, with recent minor updates suggesting an active development and maintenance cadence. Its key differentiators include being lightweight with zero external dependencies beyond `react-native` itself, and offering flexible scaling options, including linear and moderate scaling with adjustable factors. It promotes a \"develop once\" approach, aiming for consistent UI appearance starting from a standard ~5-inch mobile device.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-size-matters"],"cli":null},"imports":["import { scale, verticalScale, moderateScale } from 'react-native-size-matters';","import { ScaledSheet } from 'react-native-size-matters';","const { scale, verticalScale, ScaledSheet } = require('react-native-size-matters');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { scale, verticalScale, moderateScale, ScaledSheet } from 'react-native-size-matters';\n\nconst App = () => {\n  return (\n    <View style={styles.container}>\n      <Text style={styles.scaledText}>Scaled Text (Width based: 20@s)</Text>\n      <View style={styles.box}>\n        <Text style={styles.boxText}>Box</Text>\n      </View>\n      <Text style={{ fontSize: moderateScale(16, 0.3), marginTop: verticalScale(10) }}>\n        Moderately Scaled Text\n      </Text>\n      <Text style={rawStyles.normalText}>Normal Text (No Scaling)</Text>\n    </View>\n  );\n};\n\nconst rawStyles = StyleSheet.create({\n  normalText: {\n    fontSize: 16,\n    color: '#666',\n    marginTop: 20\n  }\n});\n\nconst styles = ScaledSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n    padding: '20@ms'\n  },\n  scaledText: {\n    fontSize: '20@s',\n    color: '#333',\n    marginBottom: '10@vs'\n  },\n  box: {\n    width: '150@s',\n    height: '100@vs',\n    backgroundColor: 'lightblue',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: '8@ms0.3',\n    marginVertical: '20@vs'\n  },\n  boxText: {\n    fontSize: '18@ms',\n    color: 'darkblue'\n  }\n});\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates both functional scaling (`moderateScale`, `verticalScale`) and the `ScaledSheet` API with various annotations (`@s`, `@vs`, `@ms`, `@ms<factor>`) to scale UI elements like text and boxes, adapting them to different screen sizes in React Native. It also shows a regular `StyleSheet` for comparison.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}