Common.md

Header Height

import { useHeaderHeight } from "@react-navigation/stack";

const headerHeight = useHeaderHeight();

import { HeaderHeightContext } from '@react-navigation/stack';

<HeaderHeightContext.Consumer>
  {headerHeight => (
    /* render something */
  )}
</HeaderHeightContext.Consumer>

Ref: react-navigation

Dimensions

Dimensions

import { useWindowDimensions } from "react-native";

Unlike Dimensions, it updates as the window's dimensions update.

import { Dimensions } from "react-native";
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

useEffect(() => {
  Dimensions.addEventListener("change", onChange);
  return () => {
    Dimensions.removeEventListener("change", onChange);
  };
});

Device Information

react-native-device-info

let hasNotch = DeviceInfo.hasNotch();

AppState

AppState

AppState can tell you if the app is in the foreground or background, and notify you when the state changes.

React Native Async Storage

Async Storage

Internally to AsyncStorage, all keys you provide are prepended with a unique identifier to reference your application to segment storage needs between apps.

Storage stays local to the device, is unencrypted and goes away if you delete the app, but should be saved as part of your device's backups and persists during upgrades.

6MB on Android, indefinite on iOS

Increasing Storage size

Add a AsyncStorage_db_size_in_MB property to your android/gradle.properties:

AsyncStorage_db_size_in_MB=10

Extreme Optimization of AsyncStorage in React Native

const clearAppData = async function () {
  try {
    const keys = await AsyncStorage.getAllKeys();
    await AsyncStorage.multiRemove(keys);
  } catch (error) {
    console.error("Error clearing app data.");
  }
};

import { Platform } from "react-native";
import AsyncStorage from "@react-native-community/async-storage";

const asyncStorageKeys = await AsyncStorage.getAllKeys();
if (asyncStorageKeys.length > 0) {
  if (Platform.OS === "android") {
    await AsyncStorage.clear();
  }
  if (Platform.OS === "ios") {
    await AsyncStorage.multiRemove(asyncStorageKeys);
  }
}

https://github.com/MiRinZhang/react-native-expire-storage

npm i -S react-native-expire-storage

Open Settings

import { TouchableOpacity, Linking } from "react-native";
const Component = (props) => {
  return (
    <TouchableOpacity
      activeOpacity={0.8}
      onPress={() => Linking.openURL("app-settings:")}
    >
      <SettingsIcon />
    </TouchableOpacity>
  );
};

import { openSettings } from "react-native-permissions";
const Component = (props) => {
  return (
    <TouchableOpacity activeOpacity={0.8} onPress={() => openSettings()}>
      <SettingsIcon />
    </TouchableOpacity>
  );
};

Ref: React Native: Managing App Permissions for iOS

Linking to the app-settings: URL will jump directly into the app’s settings within the Settings app.

Get nested active route name

<Tab.Screen
  name="Calendar"
  component={CalendarModalWrapper}
  options={({ route }) => ({
    tabBarVisible: NavigationService.getActiveRouteName(route) === "Calendar",
  })}
/>;

const getActiveRouteName = (route) => {
  if (route.state) {
    return getActiveRouteName(route.state.routes[route.state.index]);
  }

  return route.name;
};

Ref