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

To help you get started, we’ve selected a few react-native-safe-area-context examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github berty / berty / js / packages / components / main / CreateGroupFinalize.tsx View on Github external
}> = ({ 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<number>(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,
github berty / berty / js / packages / components / chat / OneToOne.tsx View on Github external
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 <CenteredActivityIndicator />
	}
	const title = (conv as any).fake ? `FAKE - ${contact.displayName}` : contact?.displayName || ''
	return (
		<View style={{ position: 'absolute', top: 0, left: 0, right: 0 }} onLayout={onLayoutHeader}>
github EvanBacon / Expo-Crossy-Road / screens / GameOverScreen.js View on Github external
//     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 (
    <View style={[styles.container, { paddingTop: top || 12, paddingBottom: bottom || 8 }, props.style]}>
      <View key="content" style={{ flex: 1, justifyContent: 'center' }}>
        {banner.map((val, index) => (
          <Banner
            animatedValue={animations[index].interpolate({
              inputRange: [0.2, 1],
              outputRange: [-width, 0],
              extrapolate: 'clamp',
            })}
            key={index}
            style={{
              backgroundColor: val.color,
github EvanBacon / Expo-Crossy-Road / components / ScoreText.js View on Github external
function Score({ gameOver, score, highScore, ...props }) {

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


    }
  }, [gameOver])


  const { top, left } = useSafeArea();

  return (
    <View pointerEvents="none" style={{ position: 'absolute', top: Math.max(top, 16), left: Math.max(left, 8) }}>
      <Text
        style={{
          color: 'white',
          fontFamily: 'retro',
          fontSize: 48,
          backgroundColor: 'transparent',
        }}
      >
        {score}
      </Text>

      {highScore && (
        <Text
github berty / berty / js / packages / components / chat / MultiMember.tsx View on Github external
}> = ({ 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 (
		<View style={{ position: 'absolute', top: 0, left: 0, right: 0 }} onLayout={onLayoutHeader}>
			<BlurView
				overlayColor=''
				blurType='light'
				blurAmount={30}
				style={{ position: 'absolute', bottom: 0, top: 0, left: 0, right: 0 }}
			/>
			<View
				style={[
					{
						alignItems: 'center',
github expo / expo / apps / test-suite / components / RunnerError.js View on Github external
export default function RunnerError({ children }) {
  const { top } = useSafeArea();

  return (
    <View style={[styles.container, top || 18]}>
      <Text style={styles.text}>{children}</Text>
    </View>
  );
}
github syousif94 / frugalmaps / buncha / components / EventList.js View on Github external
const MenuButton = () => {
  const insets = useSafeArea();
  return (
    <View
      style={{
        position: "absolute",
        bottom: insets.bottom > 0 ? insets.bottom : 15,
        right: 18,
        height: 58,
        width: 58,
        borderRadius: 29,
        backgroundColor: "#157AFC",
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowOpacity: 0.3,
github EvanBacon / Sunset-Cyberspace / screens / LicensesScreen.js View on Github external
export default function LicensesScreen({ navigation }) {
  const [top, left, bottom, right] = useSafeArea();
  return (
    <View
      style={[
        styles.container,
        {
          paddingTop: top,
          paddingBottom: bottom,
          paddingLeft: left,
          paddingRight: right,
        },
      ]}
    >
      <Licenses licenses={licenses} />
      <Animatable.View
        style={styles.animatableIView}
        animation="pulse"
github react-navigation / navigation-ex / packages / drawer / src / views / DrawerNavigatorItems.tsx View on Github external
activeTintColor,
  activeBackgroundColor,
  inactiveTintColor,
  inactiveBackgroundColor,
  getLabel,
  renderIcon,
  onItemPress,
  itemsContainerStyle,
  itemStyle,
  labelStyle,
  activeLabelStyle,
  inactiveLabelStyle,
  iconContainerStyle,
  drawerPosition,
}: DrawerNavigationItemsProps) => {
  const insets = useSafeArea();

  return (
    <View style={[styles.container, itemsContainerStyle]}>
      {items.map((route, index: number) => {
        const focused = activeItemKey === route.key;
        const color = focused ? activeTintColor : inactiveTintColor;
        const backgroundColor = focused
          ? activeBackgroundColor
          : inactiveBackgroundColor;
        const scene = { route, index, focused, tintColor: color };
        const icon = renderIcon(scene);
        const label = getLabel(scene);
        const accessibilityLabel =
          typeof label === 'string' ? label : undefined;
        const extraLabelStyle = focused ? activeLabelStyle : inactiveLabelStyle;
github wcandillon / can-it-be-done-in-react-native / season3 / src / UberEats / Header.tsx View on Github external
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
  });

react-native-safe-area-context

A flexible way to handle safe area, also works on Android and web.

MIT
Latest version published 2 months ago

Package Health Score

86 / 100
Full package analysis