@tactics/toddle-styleguide 5.4.48 → 5.4.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.48",
+  "version": "5.4.50",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/backdrop/backdrop.component.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import {useContext, useEffect, useRef} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
-import {Animated} from 'react-native';
+import {Animated, Pressable} from 'react-native';
 import {Stylesheet} from './backdrop.styles';
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 type PopoverBackdropProps = {
   isVisible: boolean;
   touchBackDrop?: (value: boolean) => void;
@@ -25,12 +27,11 @@ const Backdrop = ({isVisible, touchBackDrop}: PopoverBackdropProps) => {
   }, [isVisible, opacity]);
 
   return (
-    <Animated.View
+    <AnimatedPressable
       accessible={true}
       accessibilityRole="button"
       accessibilityLabel="Close modal"
-      onAccessibilityTap={() => (touchBackDrop ? touchBackDrop(false) : null)}
-      onTouchStart={() => (touchBackDrop ? touchBackDrop(false) : null)}
+      onPress={() => (touchBackDrop ? touchBackDrop(false) : null)}
       style={[styles.element, {opacity: opacity}]}
     />
   );

package/src/components/templates/popover/components/foreground/foreground.component.tsx

@@ -10,6 +10,10 @@ type PopoverForegroundProps = {
 const Foreground = ({children}: PopoverForegroundProps) => {
   const styles = Stylesheet();
 
-  return <View style={styles.element}>{children}</View>;
+  return (
+    <View style={styles.element} pointerEvents="box-none">
+      {children}
+    </View>
+  );
 };
 export {Foreground as Foreground};

package/src/components/templates/popover/components/modal/close/close.component.tsx

@@ -15,7 +15,7 @@ const Close = ({onPress}: ModalCloseProps) => {
   const styles = Stylesheet();
 
   return (
-    <Pressable onPress={onPress} style={styles.container}>
+    <Pressable onPress={onPress} hitSlop={12} style={styles.container}>
       <Icon
         style={'regular'}
         name={'xmark'}

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -14,6 +14,7 @@ type PopoverModalProps = {
   isVisible: boolean;
   children: React.ReactNode;
   windowHeight: number;
+  bottomInset?: number;
   disableScrollContent?: boolean;
 };
 
@@ -24,6 +25,7 @@ const Modal = ({
   onClose,
   children,
   windowHeight,
+  bottomInset = 0,
   disableScrollContent,
 }: PopoverModalProps) => {
   // Keep element and window size in local state.
@@ -35,19 +37,27 @@ const Modal = ({
 
   const elementHeight = Math.round(elementSize.height);
 
-  const maxHeight = Math.round(windowHeight / 100) * 90;
-  const translateYStartingPoint = windowHeight;
+  const maxHeight = Math.round(windowHeight * 0.9);
+  // windowHeight already reflects the full edge-to-edge screen height on
+  // Android, but it excludes the space behind the navigation bar, so the
+  // sheet's rest/closed position needs bottomInset added or its top edge
+  // peeks out from behind the nav bar when closed (see PopoverAction).
+  const translateYStartingPoint = windowHeight + bottomInset;
 
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 
   const translateY = useRef(new Animated.Value(translateYStartingPoint)).current;
 
-  // Animate when visibility changes
+  // Animate when visibility changes.
+  // useNativeDriver is off: on Android, Pressables nested inside a view whose
+  // transform is driven on the native thread (bypassing the JS shadow tree)
+  // can stop receiving onPress entirely (onPressIn/onPressOut still fire) on
+  // some OS/device combinations, even long after the animation has settled.
   useEffect(() => {
     Animated.timing(translateY, {
       toValue: isVisible ? translateYStartingPoint - saveHeight : translateYStartingPoint,
       duration: 500,
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
   }, [isVisible, saveHeight, translateYStartingPoint, translateY]);
 
@@ -77,7 +87,7 @@ const Modal = ({
         {disableScrollContent ? (
           <View>{children}</View>
         ) : (
-          <ScrollContent>{children}</ScrollContent>
+          <ScrollContent bottomInset={bottomInset}>{children}</ScrollContent>
         )}
       </Animated.View>
     </Animated.View>

package/src/components/templates/popover/components/modal/scroll-content/scroll-content.component.tsx

@@ -4,17 +4,26 @@ import {useContext} from 'react';
 import {ScrollView} from 'react-native';
 import {Stylesheet} from './scroll-content.styles';
 import {ThemeCtx} from '../../../../../../context/theme.context';
+import {Scale} from '../../../../../../theme/scale';
 
 type ModalScrollContentProps = {
   children: React.ReactNode;
+  bottomInset?: number;
 };
 
-const ScrollContent = ({children}: ModalScrollContentProps) => {
+const ScrollContent = ({children, bottomInset = 0}: ModalScrollContentProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
   return (
-    <ScrollView contentContainerStyle={styles.element}>{children}</ScrollView>
+    <ScrollView
+      contentContainerStyle={[
+        styles.element,
+        {paddingBottom: bottomInset + Scale.xxxxl},
+      ]}
+    >
+      {children}
+    </ScrollView>
   );
 };
 export {ScrollContent as ScrollContent};

package/src/components/templates/popover/popover.component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {useEffect, useState} from 'react';
-import {Dimensions, Platform, StatusBar, View} from 'react-native';
+import {Dimensions, Platform, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Stylesheet} from './popover.styles';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Modal, Foreground} from './components';
@@ -23,17 +24,14 @@ const Popover = ({
   disableScrollContent,
 }: PopoverProps) => {
   const styles = Stylesheet();
+  const insets = useSafeAreaInsets();
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
   );
 
   useEffect(() => {
     const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
+      setWindowHeight(Dimensions.get('window').height);
     };
 
     updateWindowHeight();
@@ -48,10 +46,11 @@ const Popover = ({
 
   return (
     <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
-      <Backdrop isVisible={isVisible} />
+      <Backdrop isVisible={isVisible} touchBackDrop={() => onClose()} />
       <Foreground>
         <Modal
           windowHeight={windowHeight}
+          bottomInset={Platform.OS === 'android' ? insets.bottom * 1.7 : 0}
           isVisible={isVisible}
           onClose={onClose}
           title={title}

package/src/components/templates/popover/popover.preview.tsx

@@ -30,6 +30,12 @@ export const PopoverPreview = ({}: {}) => {
         title={'Taal'}
         subtitle={'Welke taal wilt u gebruiken?'}
       >
+        <View>
+          <Button
+            label={'Confirm'}
+            onPress={() => setPopoverIsVisible(false)}
+          />
+        </View>
         <View>
           <Button label={'test'} />
         </View>

package/src/components/templates/popover-action/popover-action.component.tsx

@@ -12,7 +12,6 @@ import {
   Dimensions,
   LayoutChangeEvent,
   Platform,
-  StatusBar,
   View,
   ViewProps,
 } from 'react-native';
@@ -114,11 +113,7 @@ export const PopOverAction = ({
 
   useEffect(() => {
     const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
+      setWindowHeight(Dimensions.get('window').height);
     };
 
     updateWindowHeight();
@@ -143,11 +138,15 @@ export const PopOverAction = ({
 
   const translateY = React.useRef(new Animated.Value(translateYStartingPoint)).current;
 
+  // useNativeDriver is off: on Android, Pressables nested inside a view whose
+  // transform is driven on the native thread (bypassing the JS shadow tree)
+  // can stop receiving onPress entirely (onPressIn/onPressOut still fire) on
+  // some OS/device combinations, even long after the animation has settled.
   const open = () => {
     Animated.timing(translateY, {
       toValue: translateYStartingPoint - saveHeight,
       duration: 500,
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
   };
 
@@ -155,7 +154,7 @@ export const PopOverAction = ({
     Animated.timing(translateY, {
       toValue: translateYStartingPoint,
       duration: 500,
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
   };
 

package/src/components/templates/popover-action/popover-action.preview.tsx

@@ -27,6 +27,7 @@ const renderActionContent = ({
   minutes,
   setHours,
   setMinutes,
+  onButtonPress,
 }: {
   pageKey: string;
   actionLabel: string;
@@ -37,6 +38,7 @@ const renderActionContent = ({
   minutes: string;
   setHours: (value: string) => void;
   setMinutes: (value: string) => void;
+  onButtonPress?: () => void;
 }) => (
   <View key={pageKey} style={{height: '100%', width: '100%'}}>
     <View style={{alignItems: 'center', marginBottom: Scale.s}}>
@@ -117,7 +119,10 @@ const renderActionContent = ({
           gap: Scale.m * 1.25,
         }}
       >
-        <Button label={buttonLabel} onPress={() => console.log('pressed')} />
+        <Button
+          label={buttonLabel}
+          onPress={onButtonPress ?? (() => console.log('pressed'))}
+        />
         <MoreInfoButton
           label={secondaryButtonLabel}
           textColor={'#000000'}
@@ -169,6 +174,7 @@ export const PopOverActionPreview = () => {
           minutes: messageMinutes,
           setHours: setMessageHours,
           setMinutes: setMessageMinutes,
+          onButtonPress: () => setIsVisible(false),
         })}
       </PopOverAction>
     </View>