ProfileHeader component cleanup, generic button with icon elements #1836
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Since react-native-reanimated is not configured for web support (https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/web-support/), we are enabling fade out animation for iOS and android solely
- Button component with optional start/end icon elements - Suggested follows icon's dark mode color adjusted in ProfileHeader
-Fix on blur action on search input in suggested follows tab(second tabbar item) causes ProfileCard description content to jump in android and iOS
tarikfp
changed the title
tarikfp
changed the title
This reverts commit b3cd5b2.
tarikfp
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Web
web-demo.mov
App
app-demo.mov
In the current state, the
ProfileHeadercomponent uses customTouchableOpacitycomponents to display the Follow/Unfollow Action button, despite the fact that we already have a pre-existingFollowButtoncomponent in the app.Suggested follows icon is not visible in dark mode. It is being displayed as white circle when
showSuggestFollowsis set totrue.Furthermore, when the follow/unfollow action is initiated, the button interactions remain active, and there is no loading indicator displayed which may confuse the user.
To address these issues, we should:
FollowButtoncomponent within theProfileHeader.Buttoncomponent by introducingStartIconandEndIconprops, enabling the rendering of additional icons such as a plus sign (+) or a checkmark (✓) alongside the follow/unfollow text inFollowButtoncomponent. By usingButtoncomponent, we eliminate the need of controlling loading state to disable interactions on the button since it is already being internally handled by theButtoncomponent itself.App demo after changes
app-fixed.mov
Web demo after changes
web-fixed.mov