Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement animations for discover communities screen #17586

Merged
merged 2 commits into from
Oct 17, 2023
Merged

Implement animations for discover communities screen #17586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6e29a8
Implement animations for discover communities screen
Parveshdhull Oct 17, 2023
6acae42
e2e: add new floating screen
churik Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/js/worklets/shell/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ export const OPEN_WITH_ANIMATION = 3;
// Floating Screen States
export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 2;
export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 3;
export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 4;
export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 5;
export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 2;
export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 3;
export const CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION = 4;
export const OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION = 5;
export const CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION = 6;
export const OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION = 7;

export const SHELL_ANIMATION_TIME = 200;

Expand Down
47 changes: 36 additions & 11 deletions src/js/worklets/shell/floating_screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,58 @@ export function screenLeft(screenState, screenWidth, switcherCardLeftPosition) {
return useDerivedValue(function () {
'worklet';
switch (screenState.value) {
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
return withTiming(screenWidth, constants.EASE_OUT_EASING);
case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
return withTiming(0, constants.EASE_OUT_EASING);
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
return screenWidth;
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
// Note - don't use return 0; its not working in ios
// https://github.com/software-mansion/react-native-reanimated/issues/3296#issuecomment-1573900172
return withSequence(withTiming(-1, { duration: 0 }), withTiming(0, { duration: 0 }));
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
return withTiming(switcherCardLeftPosition, constants.EASE_OUT_EASING);
return withSequence(
withTiming(switcherCardLeftPosition, constants.EASE_OUT_EASING),
withTiming(screenWidth, { duration: 0 }),
);
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
return withTiming(0, constants.EASE_OUT_EASING);
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
return withTiming(screenWidth, constants.EASE_OUT_EASING);
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION:
return withTiming(0, constants.EASE_OUT_EASING);
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(screenWidth, { duration: 0 }));
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION:
return 0;
default:
return screenWidth;
}
});
}

export function screenTop(screenState, switcherCardTopPosition) {
export function screenTop(screenState, screenHeight, switcherCardTopPosition) {
return useDerivedValue(function () {
'worklet';
switch (screenState.value) {
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
return screenHeight;
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
return withSequence(withTiming(-1, { duration: 0 }), withTiming(0, { duration: 0 }));
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
return withTiming(switcherCardTopPosition, constants.EASE_OUT_EASING);
return withSequence(
withTiming(switcherCardTopPosition, constants.EASE_OUT_EASING),
withTiming(screenHeight, { duration: 0 }),
);
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
return withTiming(0, constants.EASE_OUT_EASING);
default:
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(screenHeight, { duration: 0 }));
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION:
return 0;
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
return withTiming(screenHeight, constants.EASE_OUT_EASING);
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION:
return withTiming(0, constants.EASE_OUT_EASING);
default:
return screenHeight;
}
});
}
Expand Down Expand Up @@ -79,7 +101,8 @@ export function screenZIndex(screenState) {
'worklet';
switch (screenState.value) {
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(-1, { duration: 0 }));
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
return -1;
Expand All @@ -95,10 +118,12 @@ export function screenBorderRadius(screenState) {
switch (screenState.value) {
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION:
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION:
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
return 0;
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
Expand Down
12 changes: 0 additions & 12 deletions src/status_im/communities/core.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -783,18 +783,6 @@
:on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %])
:on-error #(log/error "failed to reorder community category" %)}]})

;; Note - dispatch is used to make sure we are opening community once `pop-to-root` is processed.
;; Don't directly merge effects using `navigation/navigate-to`, because it will work in debug and
;; release, but for e2e `pop-to-root` closes even currently opened community
;; https://github.com/status-im/status-mobile/pull/16438#issuecomment-1623954774
(rf/defn navigate-to-community
{:events [:communities/navigate-to-community]}
[cofx community-id]
(rf/merge
cofx
{:dispatch [:navigate-to :community-overview community-id]}
(navigation/pop-to-root :shell-stack)))

(rf/defn member-role-updated
{:events [:community.member/role-updated]}
[cofx response-js]
Expand Down
8 changes: 4 additions & 4 deletions src/status_im/ui/screens/chat/message/legacy_view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,10 +251,10 @@
[rn/text {:style {:color quo.colors/black}} description]]]
[rn/view (style/community-view-button)
[rn/touchable-opacity
{:on-press #(do (rf/dispatch
[:communities/navigate-to-community
(:id community)])
(rf/dispatch [:chat/close]))}
{:on-press #(do
(rf/dispatch [:pop-to-root :shell-stack])
(rf/dispatch [:navigate-to :community-overview (:id community)])
(rf/dispatch [:chat/close]))}
[rn/text
{:style {:text-align :center
:color quo.colors/blue}} (i18n/label :t/view)]]]])))
Expand Down
3 changes: 3 additions & 0 deletions src/status_im2/contexts/chat/home/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
[status-im2.contexts.chat.actions.view :as chat.actions.view]
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
[status-im2.contexts.chat.home.contact-request.view :as contact-request]
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))

Expand Down Expand Up @@ -66,6 +67,8 @@
:data items
:render-fn chat-list-item/chat-list-item
:scroll-event-throttle 8
:content-container-style {:padding-bottom
jump-to.constants/floating-shell-button-height}
:on-scroll #(common.banner/set-scroll-shared-value
{:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
:shared-value scroll-shared-value})}])))
Expand Down
8 changes: 7 additions & 1 deletion src/status_im2/contexts/communities/discover/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
(ns status-im2.contexts.communities.discover.style
(:require
[react-native.platform :as platform]))
[react-native.platform :as platform]
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]))

(def screen-title-container
{:height 56
Expand Down Expand Up @@ -32,6 +33,7 @@

(def other-communities-container
{:flex 1
:padding-bottom (+ jump-to.constants/floating-shell-button-height 34)
:margin-horizontal 20})

(defn discover-communities-segments
Expand Down Expand Up @@ -72,3 +74,7 @@
:justify-content :center
:flex 1
:background-color :transparent})

(def floating-shell-button
{:position :absolute
:bottom 34})
21 changes: 14 additions & 7 deletions src/status_im2/contexts/communities/discover/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
[quo/community-card-view-item
{:community (assoc item :cover cover)
:width width
:on-press #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
:on-press #(rf/dispatch [:navigate-to :community-overview (:id item)])}]
[quo/community-list-item
{:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:communities/navigate-to-community (:id item)]))
(rf/dispatch [:navigate-to :community-overview (:id item)]))
:on-long-press #(rf/dispatch
[:show-bottom-sheet
{:content (fn []
Expand Down Expand Up @@ -143,12 +143,12 @@
(if (= view-type :card-view)
[quo/community-card-view-item
{:community (assoc community :cover cover)
:on-press #(rf/dispatch [:communities/navigate-to-community (:id community)])}]
:on-press #(rf/dispatch [:navigate-to :community-overview (:id community)])}]

[quo/community-list-item
{:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:communities/navigate-to-community (:id community)]))
(rf/dispatch [:navigate-to :community-overview (:id community)]))
:on-long-press #(js/alert "TODO: to be implemented")}
community])]))
(if communities communities communities-ids))
Expand Down Expand Up @@ -225,12 +225,19 @@

(defn f-view-internal
[{:keys [theme]}]
(let [featured-communities (rf/sub [:communities/featured-contract-communities])]
(let [featured-communities (rf/sub [:communities/featured-contract-communities])
customization-color (rf/sub [:profile/customization-color])]
[rn/view
{:style (style/discover-screen-container (colors/theme-colors
colors/white
colors/neutral-95))}
[discover-screen-content featured-communities theme]]))
colors/neutral-95
theme))}
[discover-screen-content featured-communities theme]
[quo/floating-shell-button
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
:customization-color customization-color
:label (i18n/label :t/jump-to)}}
style/floating-shell-button]]))


(defn- internal-discover-view
Expand Down
3 changes: 3 additions & 0 deletions src/status_im2/contexts/communities/home/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
[status-im2.common.resources :as resources]
[status-im2.contexts.communities.actions.community-options.view :as options]
[status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.number]
Expand Down Expand Up @@ -103,6 +104,8 @@
:style {:margin-top -1}
:data selected-items
:scroll-event-throttle 8
:content-container-style {:padding-bottom
jump-to.constants/floating-shell-button-height}
:on-scroll #(common.banner/set-scroll-shared-value
{:scroll-input (oops/oget
%
Expand Down
7 changes: 5 additions & 2 deletions src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[status-im2.contexts.chat.messages.view :as chat]
[status-im2.contexts.communities.discover.view :as communities.discover]
[status-im2.contexts.communities.overview.view :as communities.overview]
[status-im2.contexts.shell.jump-to.animation :as animation]
[status-im2.contexts.shell.jump-to.components.floating-screens.style :as style]
Expand All @@ -13,8 +14,9 @@
[utils.re-frame :as rf]))

(def screens-map
{shell.constants/community-screen communities.overview/overview
shell.constants/chat-screen chat/chat})
{shell.constants/chat-screen chat/chat
shell.constants/community-screen communities.overview/overview
shell.constants/discover-communities-screen communities.discover/view})

(defn f-screen
[{:keys [screen-id id animation clock] :as screen-param}]
Expand Down Expand Up @@ -46,5 +48,6 @@
(defn view
[]
[:<>
[lazy-screen shell.constants/discover-communities-screen]
[lazy-screen shell.constants/community-screen]
[lazy-screen shell.constants/chat-screen]])
15 changes: 9 additions & 6 deletions src/status_im2/contexts/shell/jump_to/constants.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,21 @@
(def ^:const communities-discover 9)

;; Floating Screens
Copy link
Contributor

@J-Son89 J-Son89 Oct 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not for this pr, but it feels to me like this sort of information should be defined in one place, e.g navigations.screens and we have a mechanism to pass this down to the relevant places of the app.
right now it feels like we have two navigation systems, the main one and the jump to navigation.
Is this the approach we want to take or would it suit better to try to keep on navigation system?
cc @smohamedjavid, @briansztamfater

Copy link
Member Author

@Parveshdhull Parveshdhull Oct 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @J-Son89,

navigation.screens is parent ns which holds all the screens. If we use/import this namespace in another file like here it will create cyclic dependency.

Is this the approach we want to take or would it suit better to try to keep on navigation system?

By navigation system you mean RNN?
RNN is not customizable enough to allow us create UI/animations as per design teams requirment.

Copy link
Contributor

@J-Son89 J-Son89 Oct 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, it is possible to add custom transition animations with the RNN library, as @briansztamfater has done this on other pages. see the onboarding transitions. Although I am not sure whether that is possible here and not necessarily talking about that.

By navigation system I am referring to everything related to navigation in our codebase. Not specifically about the tooling used, RNN etc.

In particular I have some questions about the code structure we are taking here.
We have navigations/screens which is the core place to store information about screens and then we have this shell information about floating screens (among other info)
imo it is worth considering that we have all navigations pieces in one location, and can create some mechanism to define this information in one place and retrieve it in sub-mechanisms of the application code, such as the shell navigation.

(def ^:const community-screen :community-overview)
(def ^:const chat-screen :chat)
(def ^:const community-screen :community-overview)
(def ^:const discover-communities-screen :discover-communities)

(def ^:const floating-screens [chat-screen community-screen])
(def ^:const floating-screens [chat-screen community-screen discover-communities-screen])

;; Floating Screen states
(def ^:const close-screen-without-animation 0)
(def ^:const open-screen-without-animation 1)
(def ^:const close-screen-with-slide-animation 2)
(def ^:const open-screen-with-slide-animation 3)
(def ^:const close-screen-with-shell-animation 4)
(def ^:const open-screen-with-shell-animation 5)
(def ^:const close-screen-with-shell-animation 2)
(def ^:const open-screen-with-shell-animation 3)
(def ^:const close-screen-with-slide-to-right-animation 4)
(def ^:const open-screen-with-slide-from-right-animation 5)
(def ^:const close-screen-with-slide-to-bottom-animation 6)
(def ^:const open-screen-with-slide-from-bottom-animation 7)

;; Floating Screen gesture
(def ^:const gesture-width 30)
Expand Down
Loading