[IMPROVEMENT] Change bottom sheet lib #847

IlarionHalushka · 2019-04-25T19:17:02Z

@RocketChat/ReactNative
Closes #759

This PR aims to replace Action Sheet with Reanimated Bottom Sheet on message actions.

As you could notice I am not a great designer so suggestions are welcome :)
big screen Iphone X:

small screen Iphone SE:

diegolmello · 2019-04-25T19:23:33Z

@IlarionHalushka Cool!!
We're not trying to copy Slack, but here's how they do it:

The idea is to show an amount of items and let the user swipe up if he wants to show the rest.
Also add the icons on the left.

For small screens: the tallest person in the world can have the smallest device, so he still needs a way to tap on the buttons :)
Leave the buttons in the same size and don't worry about it for now.

diegolmello · 2019-04-25T19:26:23Z

@IlarionHalushka this is how our design looks like for commands, autocomplete, etc:

Use your lib with our design and you're fine :)

IlarionHalushka · 2019-04-26T11:25:31Z

I updated the styles and added close on click-out.

When Longpress performed on message:

When user scrolled the bottom action sheet from bottom to top:

diegolmello · 2019-04-26T12:13:51Z

@IlarionHalushka Looking so much better already!
Fix android build and I'll do a review.

…-sheet' into issue-759-use-reanimated-bottom-sheet

IlarionHalushka · 2019-04-26T16:06:59Z

Improved the transitions: https://drive.google.com/file/d/1V4JmmbyzgIqmTaLjBfdjbLdzMbvPF8Q1/view?usp=sharing

…uch;

diegolmello

I tested locally on iOS and this PR is becoming "better and better" really :)
I'm missing this in Messagebox's autocomplete.

diegolmello · 2019-04-28T23:56:31Z

app/containers/MessageActions.js

 	getPermalink = async(message) => {
 		try {
 			return await RocketChat.getPermalink(message);
 		} catch (error) {
 			return null;
 		}
-	}
+	};


Unnecessary semicolons in this file

diegolmello · 2019-04-28T23:57:58Z

app/containers/MessageActions.js

-		const { actionsHide } = this.props;
-		actionsHide();
+	hideActionSheet() {
+		this.bottomSheetRef.current.snapTo(hiddenBottomSheet);


When swiping to close RoomView on iOS:

diegolmello · 2019-04-29T00:03:05Z

app/containers/MessageActions.js

 	render() {
 		return (
-			null
+			<BottomSheet


A backdrop is missing.
You can use something like this: https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/develop/app/views/RoomsListView/SortDropdown.js#L121

unfortunately the bottomsheet doesn't have function onPositionChange or something similar, but I did manage to do backdrop using Animated.Code

diegolmello · 2019-04-29T00:07:35Z

app/views/RoomView/index.js

@@ -131,6 +130,8 @@ export default class RoomView extends LoggedView {
 			} else {
 				EventEmitter.addEventListener('connected', this.handleConnected);
 			}
+
+			navigation.addListener('willBlur', () => this.hideActionSheet());


I think this is not needed as RoomView will be removed from the stack, but test it.

If it's necessary, check if it's opened and move it to componentWillUnmount.
This is similar to editCancel and replyCancel.

It's necessary, because when I open Bottom Action Sheet in RoomView and then go to Threads Single View (thread chat) then ActionSheet is still displayed there and same happens when changing RoomViews(chats)

And also I tried to move it to componentWillUnmount but as we use StackNavigator - the view in not unmounted when opening Threads View or Settings view and bottom sheet stays constantly opened.

diegolmello · 2019-04-29T00:09:06Z

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -1684,20 +1693,32 @@
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;


I think you all these CLANG* are from your Xcode setup and shouldn't be commited.

removed in latest commit

diegolmello · 2019-04-29T00:14:13Z

app/views/RoomView/index.js

-				{room._id && showActions
-					? <MessageActions room={room} user={user} />
+				{room._id
+					? <MessageActions room={room} user={user} setRef={ref => this.setRef(ref)} />


Creating arrow functions on render is a bad practice and it should be avoided.
This creates functions on every render.

You should always be using the class function directly like this:
setRef={this.setRef}

did bind this.setRef and then used like you suggested setRef={this.setRef}

diegolmello · 2019-04-29T00:16:58Z

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -22,6 +22,7 @@
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		24A2AEF2383D44B586D31C01 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 06BB44DD4855498082A744AD /* libz.tbd */; };
 		2C800DF680F8451599E80AF1 /* libSafariViewManager.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1D3BB00B9ABF44EA9BD71318 /* libSafariViewManager.a */; };
+		3EAC15CC2271955100AD43B2 /* libRNReanimated.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3EAC15CB2271937800AD43B2 /* libRNReanimated.a */; };


Am I wrong or did you tried to add reanimated from imports and from pods?
If I'm right, it's just a matter of changing Podfile and lines like this one is trash.

I did link the library manually using Xcode, but not sure what all these lines are about... :(

android/app/build.gradle

- remove unnecessary changes in IOS xcode files; - fix bug: 'When swiping to close RoomView on iOS'; - add backdrop; - bind 'this.setRef' so that function is not created on every render;

pranavpandey1998official · 2019-05-08T06:15:37Z

@IlarionHalushka can you resolve conflicts

pranavpandey1998official · 2019-05-10T05:31:07Z

@IlarionHalushka the vibration are setting off immediately after opening the room and not after we long press to open the message action

pranavpandey1998official · 2019-05-10T05:37:38Z

In my testing no button work https://drive.google.com/file/d/1k_GCnqwkCICWKUEjbR8iTuyOIpByAPAK/view?usp=sharing

pranavpandey1998official

I dont think we need the cancel button anymore

…pen.

pranavpandey1998official

covers full screen screen in landscape

pranavpandey1998official · 2019-05-11T12:57:58Z

where did the separator go , It was nice as user was able to distinguish between boundaries of button

pranavpandey1998official · 2019-05-11T13:06:59Z

its showing start all the time (unstar is not showing up)

pranavpandey1998official · 2019-05-11T13:07:14Z

pin is not working

IlarionHalushka · 2019-05-12T08:38:06Z

1. covers full screen screen in landscape . fixed

2. where did the separator go , It was nice as user was able to distinguish between boundaries of button - fixed.

3. its showing start all the time (unstar is not showing up) - currently I don't have any good idea how to change the titles because the bottomSheet is rendered once when the RoomView is opened.

4. pin is not working - is not connected to BottomSheet, action is called but 400 Not Authorized response is returned from Back-end (same behaviour on current testflight app). Issue

use reanimated bottom sheet instead of action sheet on message actions

c5a4a26

style new message action sheet; close actsheet on click out

8eaa6ab

IlarionHalushka added 4 commits April 26, 2019 16:10

fix android build

77f53cd

fix android build

5f54d5a

Merge remote-tracking branch 'ilarion/issue-759-use-reanimated-bottom…

c362741

…-sheet' into issue-759-use-reanimated-bottom-sheet

clean up the code

3706096

better transition; remove show\hide actions and state; fix android to…

f66f7ae

…uch;

diegolmello requested changes Apr 29, 2019

View reviewed changes

address PR comments from 29.04:

70b1210

- remove unnecessary changes in IOS xcode files; - fix bug: 'When swiping to close RoomView on iOS'; - add backdrop; - bind 'this.setRef' so that function is not created on every render;

IlarionHalushka added 2 commits May 9, 2019 12:36

merge develop

314573d

fix android build

448680d

IlarionHalushka requested review from diegolmello and pranavpandey1998official May 9, 2019 16:15

pranavpandey1998official suggested changes May 10, 2019

View reviewed changes

fix BottomSheet action buttons on Android, vibration on BottomSheet o…

5c5498b

…pen.

IlarionHalushka requested a review from pranavpandey1998official May 11, 2019 11:19

pranavpandey1998official suggested changes May 11, 2019

View reviewed changes

fix: landscape mode, button borders.

1d38958

diegolmello added 👍 improvement 🚨 needs changes labels May 16, 2019

diegolmello changed the title ~~use reanimated bottom sheet instead of action sheet on message actions~~ [IMPROVEMENT] Change bottom sheet lib May 16, 2019

IlarionHalushka self-assigned this May 17, 2019

diegolmello closed this Jun 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[IMPROVEMENT] Change bottom sheet lib #847

[IMPROVEMENT] Change bottom sheet lib #847

IlarionHalushka commented Apr 25, 2019

diegolmello commented Apr 25, 2019

diegolmello commented Apr 25, 2019

IlarionHalushka commented Apr 26, 2019

diegolmello commented Apr 26, 2019

IlarionHalushka commented Apr 26, 2019

diegolmello left a comment

diegolmello Apr 28, 2019

IlarionHalushka May 1, 2019

diegolmello Apr 28, 2019

IlarionHalushka May 1, 2019

diegolmello Apr 29, 2019

IlarionHalushka May 1, 2019

diegolmello Apr 29, 2019

IlarionHalushka May 1, 2019

IlarionHalushka May 1, 2019

diegolmello Apr 29, 2019

IlarionHalushka May 1, 2019

diegolmello Apr 29, 2019

IlarionHalushka May 1, 2019

diegolmello Apr 29, 2019

IlarionHalushka May 1, 2019

pranavpandey1998official commented May 8, 2019

pranavpandey1998official commented May 10, 2019 •

edited

Loading

pranavpandey1998official commented May 10, 2019 •

edited

Loading

pranavpandey1998official left a comment

pranavpandey1998official left a comment

pranavpandey1998official commented May 11, 2019

pranavpandey1998official commented May 11, 2019

pranavpandey1998official commented May 11, 2019

IlarionHalushka commented May 12, 2019

[IMPROVEMENT] Change bottom sheet lib #847

[IMPROVEMENT] Change bottom sheet lib #847

Conversation

IlarionHalushka commented Apr 25, 2019

diegolmello commented Apr 25, 2019

diegolmello commented Apr 25, 2019

IlarionHalushka commented Apr 26, 2019

diegolmello commented Apr 26, 2019

IlarionHalushka commented Apr 26, 2019

diegolmello left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pranavpandey1998official commented May 8, 2019

pranavpandey1998official commented May 10, 2019 • edited Loading

pranavpandey1998official commented May 10, 2019 • edited Loading

pranavpandey1998official left a comment

Choose a reason for hiding this comment

pranavpandey1998official left a comment

Choose a reason for hiding this comment

pranavpandey1998official commented May 11, 2019

pranavpandey1998official commented May 11, 2019

pranavpandey1998official commented May 11, 2019

IlarionHalushka commented May 12, 2019

pranavpandey1998official commented May 10, 2019 •

edited

Loading

pranavpandey1998official commented May 10, 2019 •

edited

Loading