How to use react-native-safe-area-context - 10 common examples

}> = ({ members, onRemoveMember }) => {
	const { goBack, reset } = useNativeNavigation()
	const [groupName, setGroupName] = useState('New group')
	const { call, error, done, reply } = (messengerMethodsHooks as any).useConversationCreate()

	const createGroup = React.useCallback(
		() => call({ displayName: groupName, contactsToInvite: members.map((m) => m.publicKey) }),
		[groupName, members, call],
	)
	const [layout, setLayout] = useState(0)
	const [{ flex, background, padding }] = useStyles()
	const ctx = useMsgrContext()
	const insets = useSafeAreaInsets()
	const { t }: { t: any } = useTranslation()

	React.useEffect(() => {
		// TODO: better handle error
		if (done) {
			if (error) {
				console.error('Failed to create group:', error)
			} else if (reply?.publicKey) {
				reset({
					index: 0,
					routes: [
						{
							name: Routes.Main.Home,
						},
						{
							name: Routes.Chat.Group,

export const ChatHeader: React.FC<{ convPk: any; stickyDate: any; showStickyDate: any }> = ({
	convPk,
	stickyDate,
	showStickyDate,
}) => {
	const insets = useSafeAreaInsets()
	const { navigate, goBack } = useNavigation()
	const conv = useConversation(convPk)
	const contact = useContact(conv?.contactPublicKey || null)

	const [{ flex, padding, text, opacity, color, row }, { scaleSize }] = useStyles()

	const [layoutHeader, onLayoutHeader] = useLayout() // to position date under blur

	if (!conv || !contact) {
		goBack()
		console.warn('OneToOne: no conv', conv, contact)
		return 
	}
	const title = (conv as any).fake ? `FAKE - ${contact.displayName}` : contact?.displayName || ''
	return (

//     this.setState({result: 'shared with an activityType: ' + result.activityType});
    //   } else {
    //     this.setState({result: 'shared'});
    //   }
    // } else if (result.action === Share.dismissedAction) {
    //   this.setState({result: 'dismissed'});
    // }
  };

  const select = () => {

    // props.setCharacter(characters[currentIndex]);
    dismiss();
  };

  const { top, bottom, left, right } = useSafeArea();

  const imageStyle = { width: 60, height: 48 };

  return (

function Score({ gameOver, score, highScore, ...props }) {

  React.useEffect(() => {
    if (gameOver) {
      if (score > highScore) {
        // setHighScore(score);
      }


    }
  }, [gameOver])


  const { top, left } = useSafeArea();

  return (

}> = ({ id, stickyDate, showStickyDate }) => {
	const { navigate, goBack } = useNavigation()
	const insets = useSafeAreaInsets()
	const [{ row, padding, flex, text, color }, { scaleSize }] = useStyles()
	const conversation = useConversation(id)
	const [layoutHeader, onLayoutHeader] = useLayout() // to position date under blur

	return (

export default function RunnerError({ children }) {
  const { top } = useSafeArea();

  return (
    
  );
}

const MenuButton = () => {
  const insets = useSafeArea();
  return (

export default function LicensesScreen({ navigation }) {
  const [top, left, bottom, right] = useSafeArea();
  return (

activeTintColor,
  activeBackgroundColor,
  inactiveTintColor,
  inactiveBackgroundColor,
  getLabel,
  renderIcon,
  onItemPress,
  itemsContainerStyle,
  itemStyle,
  labelStyle,
  activeLabelStyle,
  inactiveLabelStyle,
  iconContainerStyle,
  drawerPosition,
}: DrawerNavigationItemsProps) => {
  const insets = useSafeArea();

  return (

export default ({ y, tabs, scrollView }: HeaderProps) => {
  const { goBack } = useNavigation();
  const [toggle] = useValues<0 | 1>([0], []);
  const insets = useSafeArea();
  const transition = withTimingTransition(toggle, { duration: 100 });
  const { top: paddingTop } = insets;
  const translateX = interpolate(y, {
    inputRange: [0, HEADER_IMAGE_HEIGHT],
    outputRange: [-ICON_SIZE - PADDING, 0],
    extrapolate: Extrapolate.CLAMP
  });
  const translateY = interpolate(y, {
    inputRange: [-100, 0, HEADER_IMAGE_HEIGHT],
    outputRange: [
      HEADER_IMAGE_HEIGHT - MIN_HEADER_HEIGHT + 100,
      HEADER_IMAGE_HEIGHT - MIN_HEADER_HEIGHT,
      0
    ],
    extrapolateRight: Extrapolate.CLAMP
  });