Skip to content

Navigation Bar Pull Request#112

Draft
scott-massey wants to merge 19 commits into
AdaloHQ:mainfrom
scott-massey:navigationBar
Draft

Navigation Bar Pull Request#112
scott-massey wants to merge 19 commits into
AdaloHQ:mainfrom
scott-massey:navigationBar

Conversation

@scott-massey

Copy link
Copy Markdown
Contributor

It's me again! Hi hello!
I'm going to keep this open so that y'all can keep track of my code changes and such as I work on the navigation bar project.

const text = universalLayout ? universalText : desktopText

if (useLogo) {
return (

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Just a comment for the future
Is there a way we can get these if content into their own components or in a way where this section is not that long, the useLogo logic seems repetitive as well

}
if (Platform.OS === 'ios') {
return {
shadowColor: '#000',

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Maybe this shadow can become a constant
const ANDROID_SHADOW_STYLE
as to reduce the amount of code and not duplicate it?

let variant =
_width > DeviceBreakpoint.TABLET_BREAKPOINT ? 'desktop' : 'mobile'

let containerStyles = {

@jose-adalo jose-adalo Jan 31, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

There are lots of styles related code in here, we should look into a cleaner organization.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Also using Stylesheet.create() gives performance benefits,
so non changing styles should be moved to one when possible

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You can also use StyleSheet.flatten or Stylesheet.compose
to combine dynamic styles with precreated ones
I would suggest reading a bit around that before moving everything, might be worth the read

Comment thread src/NavigationBar/index.js Outdated
<Title variant={variant} titleOptions={title} />
</View>
<View
style={{ marginLeft: mobileAlignment !== 'right' ? 'auto' : '' }}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Keeping conditionals outside of jsx allows to separate the presentation and logic layer

usually a
const marginLeft = mobileAlignment !== 'right' ? 'auto' : ''
before the jsx might do the trick


if (variant === 'desktop') {
// render the title on the left, the menu items in the middle, and the profile image on the right
return (

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Getting these two jsx into separate components will make the logic/code here more readable

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