;

rem units (legacy v0.3)

Legacy documentation (v0.3)

This page documents the behavior of Fluffle v0.3. Starting in v0.4, configureRem() was removed.

Aside from the removal of configureRem(), the rem API remains unchanged. See the latest rem documentation for current behavior.

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

Basic usage

Use rem values as strings in supported style properties.

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

How it works

1rem is resolved from a root font size and automatically respects the user’s font scaling preferences.

  • Native platforms default to 14
  • Web uses the browser root font size (usually 16px)

Configuration

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

ts 

import { configureRem } from "@bibliolab/react-native-fluffle";

configureRem({ rootFontSize: 12 });

Notes

  • Only supported style properties accept rem
  • Values are resolved to numbers at runtime