BlaBla.tsx

import * as React from 'react';
import { StyleSheet } from 'react-native';
import { gestureHandlerRootHOC, TouchableWithoutFeedback } from 'react-native-gesture-handler';
import A, { useAnimatedProps, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

import { colors, container, screenWidth } from 'src/theme';

import { Box } from '../Box';
import { Text } from '../Text';

interface Props {
  visible: boolean;
  dismiss: () => void;
  children: JSX.Element | JSX.Element[] | null;
  title: string;
  description: string;
  dismissable?: boolean;
}

const DIALOG_MAX_WIDTH = screenWidth * 0.9;
export function ConfirmationDialog({ visible, children, description, dismiss, title, dismissable }: Props) {
  const visibleValue = useSharedValue<boolean>(false);

  React.useEffect(() => {
    visibleValue.value = visible;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible]);

  const containerStyle = useAnimatedStyle(() => {
    return {
      opacity: visibleValue.value ? 1 : 0,
    };
  }, []);

  const animatedProps = useAnimatedProps(() => {
    return {
      pointerEvents: visibleValue.value ? 'auto' : 'none',
    };
  }, []);

  return (
    <A.View style={[StyleSheet.absoluteFillObject, containerStyle]} {...{ animatedProps }}>
      <TouchableWithoutFeedback
        containerStyle={styles.overlay}
        onPress={dismissable ? dismiss : () => {}}
        style={styles.container}>
        <Box maxWidth={DIALOG_MAX_WIDTH} backgroundColor="white" padding="s16" borderRadius="m">
          <Text variant="textLargeBold" marginBottom="s3" color="black">
            {title}
          </Text>
          <Text variant="textSmall" marginBottom="s8">
            {description}
          </Text>
          {children}
        </Box>
      </TouchableWithoutFeedback>
    </A.View>
  );
}

const styles = StyleSheet.create({
  overlay: { flex: 1, backgroundColor: colors.backdrop },
  container: { flex: 1, ...container.boxCentered },
});