[Consumer UI Refresh] Add CreateMenu. Bottom Drawer Modal Pattern + Hook up FAB

If you haven’t already, check out our contributing guidelines for onboarding!

---

For this issue we will create a new type of Modal called bottomDocked and then display a menu CreateMenu component with two options “New Group” and “New Chat”. For now, touching both of these options will open the ChatSwitcher which we can do by calling ChatSwitcher.show() and closing the modal after a selection is made.

We are using the react-native-modal library which has good documentation.

1. Create a new component called CreateMenu which will render a bottomDrawer type Modal. It should look like this:
2. CreateMenu should have the following props:
   1. isVisible - Boolean Used to display or hide the menu
   2. menuItemData - array of objects with the following additional props:
      1. icon - icon component to show in the option
      2. text - text to display to the right of the icon
      3. onPress - function fired when menu option selected
3. The CreateMenu should render the bottomDrawer Modal and then render the rows for each option passed in the menuItemData array.
4. Remove the ability to hide the FAB.js isHidden
5. When the FAB is active we will set the isVisible property of the menu to true and when it is not active we will hide the modal.
6. When the menu is closed (either via the x or by making a selection) the FAB should be set back to it’s original state.
7. All menu selections should call ChatSwitcher.show().

So, after one of the selections in the menu is made we should see this view open:

The chat bubble and person icon assets to use are here: MenuAssets (1).zip

[marcaaron]

@parasharrajat Thanks, we have assigned to Lucas already, but will have some more project work soon for you!

What happens to the FAB when the modal is open?

Correct. It should just be hidden by the modal in this case. There is a future plan for the alternate state of the FAB. But no need to worry about this for now.

Maybe make it go up with the modal (I believe we would need to do something tricky so it does not get obfuscated by the modal).

Interesting idea, but we have something else in mind 😃

Maybe leave it hidden and simply close the modal with a click anywhere outside of it.

Exactly! Clicking outside the modal should close it. Selecting one of the options will also close it.

[marcaaron]

Proposal sounds perfect!

And yes, I agree with you about the name change. Perhaps instead of having a state value with isFloatingActionButtonActive we can change this to isCreateMenuVisible and then pass this to both the modal and the fab?

As for the questions…

On large screens, I believe the View inside the modal should extend just the sidebar width, right? (gif at the end). I didn’t have time to look much, but if this is it do I copy the hard-coded value 300 I found in the animationTranslateX on the HomePage, or is there a better place to get this value? I can also take a better look at the sidebar components to find the value;

For now, it’s ok to do exactly as you have there. Our plan for this is to have another style of modal that is more like a popover for the wide screen views. In that case, the menu will be closed by pressing on the FAB and the menu will sit above like so:

From the last commit I fetched upstream this afternoon, the mobile sidebar width was still not corresponding to the whole screen width, but I know I read in one of the issues it was going to be implemented (I’m pretty sure). If my assumption in 1. is correct, can I make the modal component width 100% in small screens, and 300 on others already?

Yep you are correct and that sounds like a good plan. We can do 300 for the wide view and 100% for the small view.

In the next gif, when I press the modal test button, I did call the ChatSwitcher.show(), and something weird happened (as can be seen in the gif). I will take a more in-depth look to debug it, but maybe someone can already tell me what is happening. No problem if it is not known, I’ll figure it out.

Ah hmm I see. It seems like the “ChatSwitcher” is not showing. I can help debug when you create a PR if you haven’t solved it yet.