Details

Reviewers

atul
ginsu

Commits

rCOMM613f1ede8c32: [native] Navigate from the community action sheet to the new community roles…

Summary

Now that the role navigator is created, we can add the community roles screen and navigate to it when the 'Roles' option is selected on the action sheet. CommunityRolesScreen will be implemented later in the stack, this just handles the navigation aspect to make review easier and simpler overall. This screen will display all of the existing roles and member counts within a community, and an option to create a new role with selected permissions.

I created a new headerLeft since I couldn't re-use it from the change-roles flow as that had some role-changing specific logic built into it.

Depends on D8335

ENG-4169

Test Plan

Confirmed that the navigation works and it takes me to the newly created screen.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

rohan created this revision.Jun 28 2023, 9:42 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 28 2023, 9:42 AM

rohan edited the summary of this revision. (Show Details)Jun 28 2023, 9:44 AM

rohan edited the test plan for this revision. (Show Details)

rohan attached a referenced file: F610698: Simulator Screen Recording - iPhone 14 Pro - 2023-06-28 at 12.43.24.mp4. (Show Details)

rohan added a child revision: D8359: [native] Create the community roles screen.Jun 28 2023, 9:48 AM

Harbormaster completed remote builds in B20577: Diff 28212.Jun 28 2023, 10:01 AM

rohan requested review of this revision.Jun 28 2023, 10:01 AM

Let's update CommunityRolesHeaderLeftButton to move the styles outside of the component to unboundStyles and then consume them within the component via the useStyles(...) hook.

Looks good other than that!

native/roles/community-roles-header-left-button.react.js
18–25	We occasionaly need to define styles like this if some values are variable and depend on props/state/whatever. However, in this case all of the styles are static so this can be defined outside of the component like: const unboundStyles = { labelStyle: { color: 'panelForegroundLabel', fontSize: 16, marginLeft: 10, }, }; We can then consume the styles from within the component using the `useStyles(...)` hook: const styles = useStyles(unboundStyles); which will handle eg translating `panelForegroundLabel` to a color based on light/dark mode.