feat: modalize component (#151)

JoyboyCommunity/package.json

@@ -46,6 +46,7 @@
     "react-native": "0.74.1",
     "react-native-gesture-handler": "^2.16.2",
     "react-native-keychain": "^8.2.0",
+    "react-native-modalize": "^2.1.1",
     "react-native-pager-view": "6.3.0",
     "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "~3.10.1",

JoyboyCommunity/src/components/Modalize/index.tsx

@@ -0,0 +1,55 @@
+import {forwardRef} from 'react';
+import {Platform, StyleProp, View, ViewStyle} from 'react-native';
+import {Modalize as RNModalize, ModalizeProps as RNModalizeProps} from 'react-native-modalize';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+import {useStyles} from '../../hooks';
+import {Divider} from '../Divider';
+import {Text} from '../Text';
+import stylesheet from './styles';
+
+export type Modalize = RNModalize;
+
+export type ModalizeProps = RNModalizeProps & {
+  title?: string;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+};
+
+export const Modalize = forwardRef<RNModalize, ModalizeProps>((props, ref) => {
+  const {title, style: styleProp, modalStyle: modalStyleProp, children, ...modalizeProps} = props;
+
+  const styles = useStyles(stylesheet);
+
+  return (
+    <RNModalize
+      ref={ref}
+      handlePosition={Platform.OS === 'ios' ? 'inside' : 'outside'}
+      adjustToContentHeight
+      modalStyle={[styles.modal, modalStyleProp]}
+      {...modalizeProps}
+    >
+      <SafeAreaView edges={['bottom', 'left', 'right']} style={[styles.content, styleProp]}>
+        {title && (
+          <View style={styles.header}>
+            <Text
+              weight="bold"
+              color="textSecondary"
+              align="center"
+              fontSize={18}
+              style={styles.title}
+            >
+              {title}
+            </Text>
+
+            <Divider />
+          </View>
+        )}
+
+        {children}
+      </SafeAreaView>
+    </RNModalize>
+  );
+});
+
+Modalize.displayName = 'Modalize';

JoyboyCommunity/src/components/Modalize/styles.ts

@@ -0,0 +1,22 @@
+import {Platform} from 'react-native';
+
+import {Spacing, ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  modal: {
+    backgroundColor: theme.colors.surface,
+  },
+
+  header: {
+    width: '100%',
+    marginBottom: Spacing.medium,
+  },
+  title: {
+    marginBottom: Spacing.xsmall,
+  },
+
+  content: {
+    padding: Spacing.xlarge,
+    paddingTop: Platform.OS === 'ios' ? Spacing.xlarge : Spacing.xsmall,
+  },
+}));

JoyboyCommunity/src/components/index.ts

@@ -5,6 +5,7 @@ export {IconButton} from './IconButton';
 export {Input} from './Input';
 export {Menu} from './Menu';
 export {Modal} from './Modal';
+export {Modalize} from './Modalize';
 export {InputAccessoryView} from './Skeleton/InputAccessoryView';
 export {KeyboardAvoidingView} from './Skeleton/KeyboardAvoidingView';
 export {KeyboardFixedView} from './Skeleton/KeyboardFixedView';

JoyboyCommunity/yarn.lock

@@ -6809,6 +6809,11 @@ react-native-keychain@^8.2.0:
   resolved "https://registry.yarnpkg.com/react-native-keychain/-/react-native-keychain-8.2.0.tgz#aea82df37aacbb04f8b567a8e0e6d7292025610a"
   integrity sha512-SkRtd9McIl1Ss2XSWNLorG+KMEbgeVqX+gV+t3u1EAAqT8q2/OpRmRbxpneT2vnb/dMhiU7g6K/pf3nxLUXRvA==
 
+react-native-modalize@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-modalize/-/react-native-modalize-2.1.1.tgz#dcb67d208f4c5bdc76f45075e727be43fd008561"
+  integrity sha512-4/7EZWsrUqAAkkAVEnOsSdpAPQaEBewX7TvwFuzgvGDzxKpq3O58I9SnSeU8QtG/r91XYHJNaU5dAuDrcLjUaQ==
+
 react-native-pager-view@6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.3.0.tgz#7e734e84b1692f877591335373f6fd92f0d67aa6"