safe-area.md

🛡️ Safe area

It is really useful for fixed elements on screen

To start using integration with react-native-safe-area-context module

You need install it using instructions!

Then you need to render <StylexSaveAreaConsumer/> inside SafeAreaProvider.

import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { StylexSaveAreaConsumer } from "react-native-stylex/safe-area";

import App from "./App";

const Root = () => {
  return (
    <SafeAreaProvider>
      <App />
      <StylexSaveAreaConsumer />
    </SafeAreaProvider>
  );
};

Or you can use custom SafeAreaProvider from stylex

import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-stylex/safe-area";

import App from "./App";

const Root = () => {
  return (
    <SafeAreaProvider>
      <App />
    </SafeAreaProvider>
  );
};

After that you can use getSafeArea() method to get edge insets

Example:

import { makeUseStyles } from "react-native-stylex";
import { getSafeArea } from "react-native-stylex/safe-area";

export const useStyles = makeUseStyles(() => ({
  fixedButton: {
    position: "absolute",
    start: 20,
    bottom: 30 + getSafeArea().bottom,
  },
}));