rem units

Fluffle supports rem units for scalable and consistent sizing across devices.

Use rem values as strings in supported style properties.


const styles = StyleSheet.create({
  text: {
    fontSize: "1rem",
  },
  container: {
    padding: "2rem",
  },
});

1rem is based on a root font size, adjusted by the device's font scale.

You can override the root font size by adding this to your app's initialization file (e.g. App.tsx):


import { StyleSheet } from "@bibliolabs/react-native-fluffle";

StyleSheet.configRem.setRootFontSize(16);