[native] bottom sheet for exploring communities
AcceptedPublic
Actions

Authored by varun on Nov 20 2024, 11:50 PM.

Details

Reviewers

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

Simulator Screenshot - iPhone 16 Pro Max - 2024-11-21 at 02.40.15.png (2×1 px, 248 KB)

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

varun created this revision.Nov 20 2024, 11:50 PM

Herald added a subscriber: tomek. · View Herald TranscriptNov 20 2024, 11:50 PM

varun added inline comments.Nov 20 2024, 11:55 PM

native/components/directory-prompt-bottom-sheet.react.js
41 ↗	(On Diff #45917)	we add buttonHeight twice here since there are two buttons
47–53 ↗	(On Diff #45917)	this will be replaced with navigations in a subsequent diff
native/components/directory-prompt.react.js
10 ↗	(On Diff #45917)	Maybe something like this would be better. "Explore communities" would be redundant with our button text, though

varun edited the test plan for this revision. (Show Details)Nov 20 2024, 11:56 PM

varun attached a referenced file: F3332425: Simulator Screenshot - iPhone 16 Pro Max - 2024-11-21 at 02.40.15.png. (Show Details)

Harbormaster completed remote builds in B32742: Diff 45917.Nov 21 2024, 12:08 AM

varun requested review of this revision.Nov 21 2024, 12:08 AM

varun added a child revision: D13987: [native] button in community drawer for exploring communities.Nov 21 2024, 12:15 AM

varun added inline comments.Nov 21 2024, 7:31 AM

native/components/directory-prompt.react.js
7 ↗	(On Diff #45917)	This comment should be removed
native/vectors/community-logo.react.js
6 ↗	(On Diff #45917)	Logo doesn’t really make sense here. Will change this to CommunityIcon

Code is great, but I want to workshop the design & copy just a little bit

native/components/directory-prompt.react.js
10 ↗	(On Diff #45917)	How about "Discover communities"
11–13 ↗	(On Diff #45917)	This text feels weird and superfluous... I feel like it's not really communicating anything. How about: Want to join some interest-based communities on Comm? "Interest-based" sounds corpo, but maybe something like that?
native/vectors/community-logo.react.js
6 ↗	(On Diff #45917)	Where'd you get this SVG? What's the license? Why not use one of the icons? I'm not sure I love the cutout that the foreground silhouette makes against the background silhouettes
9 ↗	(On Diff #45917)	Thinking more about this SVG graphic, I think it could be cool to have one if we do something more with it than an icon. I wonder if we could use the graphic to preview some communities that people on the app might want to join... eg. Geopolitics, Screens, NYC, etc. Maybe worth checking with Rahul about?

This revision now requires changes to proceed.Nov 21 2024, 5:50 PM

varun mentioned this in D13996: [native] community joiner modal.Nov 21 2024, 7:58 PM

varun added inline comments.Nov 25 2024, 10:30 PM

native/components/directory-prompt.react.js
11–13 ↗	(On Diff #45917)	Want to join some communities on Comm that match your vibe? Want to join some communities on Comm that match your interests? Want to join some communities on Comm that relate to your interests? Any of these work?
native/vectors/community-logo.react.js
9 ↗	(On Diff #45917)	https://linear.app/comm/issue/ENG-9956/consider-creating-a-new-svg-to-preview-communities

ashoat added inline comments.Nov 26 2024, 4:53 AM

native/components/directory-prompt.react.js
11–13 ↗	(On Diff #45917)	Hmm, I don't love the trailing prepositional phrase there... can you rephrase in a way that avoids it?

varun added inline comments.Nov 26 2024, 9:55 AM

native/components/directory-prompt.react.js
11–13 ↗	(On Diff #45917)	Do you not like the prepositional phrase or do you not like that it's at the end? Would this work? Want to join some communities that match your interests on Comm?

ashoat added inline comments.Nov 26 2024, 10:23 AM

native/components/directory-prompt.react.js
11–13 ↗	(On Diff #45917)	It's definitely better in the middle, but still sounds awkward to me

address feedback

Simulator Screenshot - iPhone 16 Pro Max - 2024-12-11 at 02.27.22.png (2×1 px, 690 KB)

Screenshot of latest version of bottom sheet

Harbormaster failed remote builds in B32990: Diff 46304!Tue, Dec 10, 11:41 PM

remove onLayout callback that I used to calculate component height

Harbormaster completed remote builds in B32991: Diff 46305.Wed, Dec 11, 12:03 AM

Nice! Just wondering, how'd you get the SVG fixed up?

This revision is now accepted and ready to land.Wed, Dec 11, 6:44 AM

In D13986#393106, @ashoat wrote:

Nice! Just wondering, how'd you get the SVG fixed up?

I imported the SVG into Figma and flattened it. The SVG to React Native SVG converter that I use (I think this is the one recommended by Expo) was able to handle the flattened SVG much better