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
@@ -41,7 +41,9 @@
TermsAndPrivacyRouteName,
RegistrationRouteName,
InviteLinkModalRouteName,
+ ViewInviteLinksModalRouteName,
} from './route-names.js';
+import ViewInviteLinksModal from './view-invite-links-modal.react.js';
import LoggedOutModal from '../account/logged-out-modal.react.js';
import RegistrationNavigator from '../account/registration/registration-navigator.react.js';
import TermsAndPrivacyModal from '../account/terms-and-privacy-modal.react.js';
@@ -210,6 +212,11 @@
component={InviteLinkModal}
options={modalOverlayScreenOptions}
/>
+
,
+ +route: NavigationRoute<'ViewInviteLinksModal'>,
+};
+
+const confirmCopy = () => displayActionResultModal('copied!');
+
+function ViewInviteLinksModal(props: Props): React.Node {
+ const { community, inviteLink } = props.route.params;
+ const styles = useStyles(unboundStyles);
+ const { modalForegroundLabel } = useColors();
+ const linkUrl = `https://comm.app/invite/${inviteLink.name}`;
+ const onPressCopy = React.useCallback(() => {
+ Clipboard.setString(linkUrl);
+ setTimeout(confirmCopy);
+ }, [linkUrl]);
+ const { uiName } = useResolvedThreadInfo(community);
+ return (
+
+
+ {`Invite people to ${uiName}`}
+
+
+ PUBLIC LINK
+
+
+ {linkUrl}
+
+
+ Copy
+
+
+
+ Use this public link to invite your friends into the community!
+
+
+
+
+ );
+}
+
+const unboundStyles = {
+ modal: {
+ padding: 0,
+ },
+ header: {
+ paddingVertical: 16,
+ alignItems: 'center',
+ borderBottomColor: 'modalSeparator',
+ borderBottomWidth: 1,
+ flex: 0,
+ },
+ headerText: {
+ fontSize: 16,
+ fontWeight: '500',
+ lineHeight: 24,
+ color: 'inviteLinkHeaderColor',
+ },
+ content: {
+ flex: 1,
+ paddingTop: 24,
+ },
+ sectionTitle: {
+ fontSize: 12,
+ fontWeight: '400',
+ lineHeight: 18,
+ color: 'modalBackgroundLabel',
+ paddingHorizontal: 16,
+ paddingBottom: 4,
+ },
+ section: {
+ borderBottomColor: 'modalSeparator',
+ borderBottomWidth: 1,
+ borderTopColor: 'modalSeparator',
+ borderTopWidth: 1,
+ backgroundColor: 'modalForeground',
+ padding: 16,
+ },
+ link: {
+ paddingHorizontal: 16,
+ paddingVertical: 9,
+ backgroundColor: 'inviteLinkButtonBackground',
+ borderRadius: 20,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ linkText: {
+ fontSize: 14,
+ fontWeight: '400',
+ lineHeight: 22,
+ color: 'inviteLinkHeaderColor',
+ },
+ button: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ copy: {
+ fontSize: 12,
+ fontWeight: '400',
+ lineHeight: 18,
+ color: 'modalForegroundLabel',
+ paddingLeft: 8,
+ },
+ details: {
+ fontSize: 12,
+ fontWeight: '400',
+ lineHeight: 18,
+ color: 'modalForegroundLabel',
+ paddingTop: 16,
+ },
+};
+
+export default ViewInviteLinksModal;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -95,6 +95,8 @@
messageLabel: '#0A0A0A',
modalSeparator: '#CCCCCC',
secondaryButtonBorder: '#FFFFFF',
+ inviteLinkHeaderColor: '#0A0A0A',
+ inviteLinkButtonBackground: '#CCCCCC',
});
export type Colors = $Exact;
@@ -186,6 +188,8 @@
messageLabel: '#CCCCCC',
modalSeparator: '#404040',
secondaryButtonBorder: '#FFFFFF',
+ inviteLinkHeaderColor: '#EBEBEB',
+ inviteLinkButtonBackground: '#404040',
});
const colors = { light, dark };