[native] bottom sheet for exploring communities

Summary: in a subsequent diff, the buttons in this bottom sheet will lead to different navigations

Test Plan:
successfully navigated to and dismissed bottom sheet on android and ios. confirmed that the buttons were positioned correctly on multiple screen sizes

{F3332425}

Reviewers: ashoat

Reviewed By: ashoat

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D13986

native/components/directory-prompt-bottom-sheet.react.js

@@ -0,0 +1,97 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import DirectoryPrompt from './directory-prompt.react.js';
+import PrimaryButton from './primary-button.react.js';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js';
+import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';
+import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+
+const directoryPromptHeight = 293;
+const marginBottom = 10;
+const buttonHeight = 61;
+
+type Props = {
+  +navigation: RootNavigationProp<'DirectoryPromptBottomSheet'>,
+  +route: NavigationRoute<'DirectoryPromptBottomSheet'>,
+};
+
+function DirectoryPromptBottomSheet(props: Props): React.Node {
+  const { navigation } = props;
+
+  const { goBack } = navigation;
+
+  const bottomSheetRef = React.useRef(null);
+
+  const bottomSheetContext = React.useContext(BottomSheetContext);
+  invariant(bottomSheetContext, 'bottomSheetContext should be set');
+  const { setContentHeight } = bottomSheetContext;
+
+  const insets = useSafeAreaInsets();
+
+  React.useLayoutEffect(() => {
+    setContentHeight(
+      directoryPromptHeight +
+        marginBottom +
+        buttonHeight +
+        buttonHeight +
+        insets.bottom,
+    );
+  }, [insets.bottom, setContentHeight]);
+
+  const onPressAccept = React.useCallback(() => {
+    console.log('User accepted the prompt');
+  }, []);
+
+  const onPressDecline = React.useCallback(() => {
+    console.log('User declined the prompt');
+  }, []);
+
+  const directoryPromptBottomSheet = React.useMemo(
+    () => (
+      <BottomSheet ref={bottomSheetRef} onClosed={goBack}>
+        <View style={styles.container}>
+          <View style={styles.promptContainer}>
+            <DirectoryPrompt />
+          </View>
+          <View style={styles.buttonContainer}>
+            <PrimaryButton
+              onPress={onPressAccept}
+              label="Explore communities"
+              variant="enabled"
+            />
+            <PrimaryButton
+              onPress={onPressDecline}
+              label="No thanks"
+              variant="outline"
+            />
+          </View>
+        </View>
+      </BottomSheet>
+    ),
+    [goBack, onPressAccept, onPressDecline],
+  );
+
+  return directoryPromptBottomSheet;
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  promptContainer: {
+    marginBottom,
+  },
+});
+
+export default DirectoryPromptBottomSheet;

native/components/directory-prompt.react.js

@@ -0,0 +1,56 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+import { useStyles } from '../themes/colors.js';
+import CommunityPreviewIcon from '../vectors/community-preview-icon.react.js';
+
+function DirectoryPrompt(): React.Node {
+  const headerText = 'Discover communities';
+  const bodyText = 'Want to join some communities on Comm?';
+
+  const styles = useStyles(unboundStyles);
+  const directoryPrompt = React.useMemo(
+    () => (
+      <>
+        <Text style={styles.header}>{headerText}</Text>
+        <Text style={styles.body}>{bodyText}</Text>
+        <View style={styles.communityLogoContainer}>
+          <CommunityPreviewIcon />
+        </View>
+      </>
+    ),
+    [
+      bodyText,
+      headerText,
+      styles.body,
+      styles.communityLogoContainer,
+      styles.header,
+    ],
+  );
+
+  return directoryPrompt;
+}
+
+const unboundStyles = {
+  header: {
+    fontSize: 24,
+    color: 'panelForegroundLabel',
+    paddingBottom: 16,
+  },
+  body: {
+    fontFamily: 'Arial',
+    fontSize: 15,
+    lineHeight: 20,
+    color: 'panelForegroundSecondaryLabel',
+    paddingBottom: 16,
+  },
+  communityLogoContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
+
+export default DirectoryPrompt;

native/navigation/root-navigator.react.js

@@ -53,6 +53,7 @@ import {
   UserProfileBottomSheetNavigatorRouteName,
   KeyserverSelectionBottomSheetRouteName,
   ConnectFarcasterBottomSheetRouteName,
+  DirectoryPromptBottomSheetRouteName,
   TagFarcasterChannelNavigatorRouteName,
   CreateMissingSIWEBackupMessageRouteName,
   LinkedDevicesBottomSheetRouteName,
@@ -75,6 +76,7 @@ import SubchannelsListModal from '../chat/subchannels-list-modal.react.js';
 import CommunityCreationNavigator from '../community-creation/community-creation-navigator.react.js';
 import TagFarcasterChannelNavigator from '../community-settings/tag-farcaster-channel/tag-farcaster-channel-navigator.react.js';
 import ConnectFarcasterBottomSheet from '../components/connect-farcaster-bottom-sheet.react.js';
+import DirectoryPromptBottomSheet from '../components/directory-prompt-bottom-sheet.react.js';
 import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js';
 import CustomServerModal from '../profile/custom-server-modal.react.js';
 import KeyserverSelectionBottomSheet from '../profile/keyserver-selection-bottom-sheet.react.js';
@@ -304,6 +306,11 @@ function RootComponent(): React.Node {
         component={ConnectFarcasterBottomSheet}
         options={modalOverlayScreenOptions}
       />
+      <Root.Screen
+        name={DirectoryPromptBottomSheetRouteName}
+        component={DirectoryPromptBottomSheet}
+        options={modalOverlayScreenOptions}
+      />
       <Root.Screen
         name={TagFarcasterChannelNavigatorRouteName}
         component={TagFarcasterChannelNavigator}

native/navigation/route-names.js

@@ -169,6 +169,7 @@ export const AccountDoesNotExistRouteName = 'AccountDoesNotExist';
 export const FarcasterAccountSettingsRouteName = 'FarcasterAccountSettings';
 export const ConnectFarcasterBottomSheetRouteName =
   'ConnectFarcasterBottomSheet';
+export const DirectoryPromptBottomSheetRouteName = 'DirectoryPromptBottomSheet';
 export const TagFarcasterChannelNavigatorRouteName =
   'TagFarcasterChannelNavigator';
 export const TagFarcasterChannelRouteName = 'TagFarcasterChannel';
@@ -211,6 +212,7 @@ export type RootParamList = {
   +KeyserverSelectionBottomSheet: KeyserverSelectionBottomSheetParams,
   +LinkedDevicesBottomSheet: LinkedDevicesBottomSheetParams,
   +ConnectFarcasterBottomSheet: void,
+  +DirectoryPromptBottomSheet: void,
   +TagFarcasterChannelNavigator: void,
   +CreateMissingSIWEBackupMessage: void,
   +QRAuthNavigator: void,