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.

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

[navigation] revamp bottom tab bar and header #81

Merged
merged 23 commits into from
Apr 24, 2024

Conversation

philipye314
Copy link
Contributor

@philipye314 philipye314 commented Apr 11, 2024

What's new in this PR

Description

  • Changed BottomTabNav styling to reflect the Figma
  • Created custom header components and used them to wrap all screens in the app.

Screenshots

How to review

  • switch around bottom tabs and make sure that the styling looks correct
  • make sure header looks good and updates correctly with no weird styling issues

Next steps

  • If have time, consider bringing back the disappearing bottom tab bar.

Relevant Links

https://reactnavigation.org/docs/bottom-tab-navigator/
https://reactnavigation.org/docs/native-stack-navigator/
https://stackoverflow.com/questions/56745881/how-to-hide-bottom-navigation-bar-on-a-specific-screen-in-react-native

CC: @ronniebeggs

Copy link

linear bot commented Apr 11, 2024

Copy link
Collaborator

@ronniebeggs ronniebeggs left a comment

Choose a reason for hiding this comment

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

Looks good so far. We should also apply the header changes to all the nested Profile screens. I'm still processing how we should handle the disappearing bottom tab. TBD

src/Components/HeaderComponents/HeaderComponents.tsx Outdated Show resolved Hide resolved
src/Components/HeaderComponents/HeaderComponents.tsx Outdated Show resolved Hide resolved
src/Components/HeaderComponents/HeaderComponents.tsx Outdated Show resolved Hide resolved
src/Components/HeaderComponents/HeaderComponents.tsx Outdated Show resolved Hide resolved
src/Components/HeaderComponents/HeaderComponents.tsx Outdated Show resolved Hide resolved
src/app/(BottomTabNavigation)/_layout.tsx Outdated Show resolved Hide resolved
src/app/(BottomTabNavigation)/_layout.tsx Outdated Show resolved Hide resolved
src/Components/HeaderComponents/styles.tsx Outdated Show resolved Hide resolved
src/Components/HeaderComponents/styles.tsx Outdated Show resolved Hide resolved
src/app/(BottomTabNavigation)/AllCases/_layout.tsx Outdated Show resolved Hide resolved
@ronniebeggs ronniebeggs changed the title Philipye314/imp 78 revamp bottom tab bar and header [navigation] revamp bottom tab bar and header Apr 14, 2024
@ronniebeggs ronniebeggs requested a review from oahnh April 21, 2024 17:46
Copy link
Collaborator

@ronniebeggs ronniebeggs left a comment

Choose a reason for hiding this comment

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

I removed the disappearing bottom tab and applied header styles to all screens in the app. Would you mind double checking that all screens have the correct headers shown on Figma? The styling on most input screens will look off but Melissa is fixing that in her PR.

@ronniebeggs ronniebeggs merged commit cd67ba8 into main Apr 24, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants