diff --git a/native/components/directory-prompt-bottom-sheet.react.js b/native/components/directory-prompt-bottom-sheet.react.js
new file mode 100644
--- /dev/null
+++ b/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(
+ () => (
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ [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;
diff --git a/native/components/directory-prompt.react.js b/native/components/directory-prompt.react.js
new file mode 100644
--- /dev/null
+++ b/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(
+ () => (
+ <>
+ {headerText}
+ {bodyText}
+
+
+
+
+ ),
+ [
+ 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;
diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -53,6 +53,7 @@
UserProfileBottomSheetNavigatorRouteName,
KeyserverSelectionBottomSheetRouteName,
ConnectFarcasterBottomSheetRouteName,
+ DirectoryPromptBottomSheetRouteName,
TagFarcasterChannelNavigatorRouteName,
CreateMissingSIWEBackupMessageRouteName,
RestoreSIWEBackupRouteName,
@@ -75,6 +76,7 @@
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 @@
component={ConnectFarcasterBottomSheet}
options={modalOverlayScreenOptions}
/>
+
(
+
+ ),
+ [height, width],
+ );
+
+ return communityPreviewIcon;
+}
+
+export default CommunityPreviewIcon;