feat: dialog screen

src/components/Animations/Slide/types.ts

@@ -5,5 +5,5 @@ export interface SlideProps extends ViewProps {
   show: boolean,
   /** initial offset */
   initialOffset?: number,
-  inverted: boolean,
+  inverted?: boolean,
 }

src/screens/Dialog/index.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { useFocusEffect } from '@react-navigation/native'
+import { BackHandler } from 'react-native'
+import { Card, Button, Surface } from 'react-native-paper'
+import { Fade, Slide } from 'components/Animations'
+
+import styles from './styles'
+import { DialogScreenProps } from './types'
+
+export const DialogScreen: React.FC<DialogScreenProps> = ({ navigation, route }) => {
+  const [show, setShow] = React.useState(false)
+
+  const dismiss = React.useCallback(() => {
+    const { onDismiss } = route.params
+    setShow(false)
+
+    setTimeout(() => {
+      navigation.goBack()
+      onDismiss && onDismiss()
+    }, 300)
+  }, [setShow, navigation, route])
+
+  const confirm = React.useCallback(() => {
+    const { onConfirm } = route.params
+    setShow(false)
+
+    setTimeout(() => {
+      navigation.goBack()
+      onConfirm && onConfirm()
+    }, 300)
+  }, [setShow, navigation, route])
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setShow(true)
+
+      const onBackPress = () => {
+        dismiss()
+
+        return true
+      }
+
+      BackHandler.addEventListener('hardwareBackPress', onBackPress)
+
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress)
+    }, [dismiss]),
+  )
+
+  return (
+    <Fade value={Number(show)} style={styles.root}>
+      <Slide show={show}>
+        <Surface style={styles.card}>
+          <Card.Title title={route.params.title} />
+          <Card.Content>
+            {route.params.renderContent()}
+          </Card.Content>
+
+          <Card.Actions style={styles.cardActions}>
+            <Button onPress={confirm}>{route.params.confirmText}</Button>
+            {route.params.dismissText && <Button onPress={dismiss}>{route.params.dismissText}</Button>}
+          </Card.Actions>
+        </Surface>
+      </Slide>
+    </Fade>
+  )
+}

src/screens/Dialog/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet, Dimensions } from 'react-native'
+import { theme } from 'constants/theme'
+
+const { colors, roundness } = theme('light')
+
+export default StyleSheet.create({
+  root: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: colors.backdrop,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    width: Dimensions.get('window').width / 1.2,
+    borderRadius: roundness,
+    padding: 8,
+  },
+  cardActions: {
+    flexDirection: 'row-reverse',
+  },
+})

src/screens/Dialog/types.ts

@@ -0,0 +1,9 @@
+
+import { StackNavigationProp } from '@react-navigation/stack'
+import { RouteProp } from '@react-navigation/native'
+import { RootNavigatorParamsList } from 'routes/types'
+
+export interface DialogScreenProps {
+  navigation: StackNavigationProp<RootNavigatorParamsList, 'Dialog'>,
+  route: RouteProp<RootNavigatorParamsList, 'Dialog'>,
+}