A modal dialog component that provides animated transitions and platform-specific implementations.

​
Installation

npm install react-native-reanimated expo-blur

​
Import

// Platform specific imports
import Dialog from '@/components/common/modal/dialog';
// or
import Dialog from '@/components/common/modal/dialog/index.ios';

​
Props

PropTypeRequiredDefaultDescription
titlestringYes-Dialog title
descriptionstringYes-Dialog description
onConfirm() => voidNo() => {}Confirmation handler
bgColorstringYes-Background color
childrenReact.ReactNodeYes-Trigger component
rightButtonstringYes-Right button text
isLoadingbooleanNofalseLoading state
visiblebooleanYes-Visibility state
setVisible(visible: boolean) => voidYes-Visibility handler
animationDurationnumberNoANIMATION_DURATION.D3Animation duration

​
Platform Specific Features

​
iOS

  • Uses BlurView for background blur effect
  • Native blur intensity control
  • iOS-specific animations
// iOS Example
function iOSExample() {
  const [visible, setVisible] = useState(false);
  
  return (
    <Dialog
      visible={visible}
      setVisible={setVisible}
      title="iOS Dialog"
      description="This is an iOS specific dialog"
      bgColor="#FFFFFF"
      rightButton="Confirm"
      onConfirm={() => console.log('Confirmed')}
    >
      <Button onPress={() => setVisible(true)}>
        Show Dialog
      </Button>
    </Dialog>
  );
}

​
Android

  • Uses themed background opacity
  • Platform-optimized animations
  • Android-specific styling
// Android Example
function AndroidExample() {
  const [visible, setVisible] = useState(false);
  
  return (
    <Dialog
      visible={visible}
      setVisible={setVisible}
      title="Android Dialog"
      description="This is an Android specific dialog"
      bgColor="#FFFFFF"
      rightButton="OK"
      onConfirm={() => console.log('Confirmed')}
    >
      <Button onPress={() => setVisible(true)}>
        Show Dialog
      </Button>
    </Dialog>
  );
}

​
Animation Details

The dialog uses Reanimated for smooth animations:

  • Entry animation: Scale from 0.7 to 1.0 with opacity
  • Exit animation: Scale down with fade out
  • Custom easing functions for natural movement
  • Platform-specific timing adjustments

​
Implementation References

​
iOS Implementation