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

Jump to bottom

fix: add drawer and header styles according to material design #11872

Merged
merged 4 commits into from
Mar 7, 2024
Merged

fix: add drawer and header styles according to material design #11872

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2662630
fix: add drawer and header styles according to material design
groot007 Mar 6, 2024
c787e47
fix: header height
groot007 Mar 6, 2024
1b9e06f
fix: fixes to styling
satya164 Mar 7, 2024
a7cc45e
Merge branch 'main' into fix/md-styles-update
satya164 Mar 7, 2024
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
3 changes: 3 additions & 0 deletions packages/elements/src/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,9 @@ export function Header(props: Props) {
insets.left -
insets.right),
},
headerTitleAlign === 'left' && leftButton
? { marginLeft: 4 }
: null,
titleContainerStyle,
]}
>
Expand Down
2 changes: 0 additions & 2 deletions packages/elements/src/Header/getDefaultHeaderHeight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ export function getDefaultHeaderHeight(
}
}
}
} else if (Platform.OS === 'android') {
headerHeight = 56;
} else {
headerHeight = 64;
}
Expand Down
18 changes: 9 additions & 9 deletions packages/native-stack/src/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,9 @@ describe('useHeaderHeight in native-stack', () => {
</NavigationContainer>
);

expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
fireEvent.press(await findByText(/go to b/i));
expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
});

it('returns header height on iOS', async () => {
Expand Down Expand Up @@ -261,9 +261,9 @@ describe('useHeaderHeight in native-stack', () => {
</NavigationContainer>
);

expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
fireEvent.press(await findByText(/go to b/i));
expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
});

it("doesn't return header height with headerShown: false on iOS", async () => {
Expand Down Expand Up @@ -325,7 +325,7 @@ describe('useHeaderHeight in native-stack', () => {

expect(headerHeight).toBe(0);
fireEvent.press(await findByText(/go to b/i));
expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
});

it("doesn't return header height with headerShown: false on Web", async () => {
Expand Down Expand Up @@ -494,9 +494,9 @@ describe('useHeaderHeight in native-stack', () => {
</NavigationContainer>
);

expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
fireEvent.press(await findByText(/go to b/i));
expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
});

it('returns parent header height in nested stack when headerShown: false on Android', async () => {
Expand Down Expand Up @@ -532,9 +532,9 @@ describe('useHeaderHeight in native-stack', () => {
</NavigationContainer>
);

expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
fireEvent.press(await findByText(/go to b/i));
expect(headerHeight).toBe(56);
expect(headerHeight).toBe(64);
});

it('returns header height 0 in nested stack when headerShown: false on both screens on Android', async () => {
Expand Down
4 changes: 0 additions & 4 deletions packages/react-native-drawer-layout/src/constants.tsx
View file
Open in desktop

This file was deleted.

24 changes: 18 additions & 6 deletions packages/react-native-drawer-layout/src/views/Drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,6 @@ import Animated, {
} from 'react-native-reanimated';
import useLatestCallback from 'use-latest-callback';

import {
SWIPE_EDGE_WIDTH,
SWIPE_MIN_DISTANCE,
SWIPE_MIN_OFFSET,
SWIPE_MIN_VELOCITY,
} from '../constants';
import type { DrawerProps } from '../types';
import { DrawerProgressContext } from '../utils/DrawerProgressContext';
import {
Expand All @@ -36,6 +30,13 @@ import {
} from './GestureHandler';
import { Overlay } from './Overlay';

export const SWIPE_EDGE_WIDTH = 32;
export const SWIPE_MIN_OFFSET = 5;
export const SWIPE_MIN_DISTANCE = 60;
export const SWIPE_MIN_VELOCITY = 500;

export const DRAWER_BORDER_RADIUS = 16;

const minmax = (value: number, start: number, end: number) => {
'worklet';

Expand Down Expand Up @@ -189,6 +190,16 @@ export function Drawer({
{ right: 0, width: isOpen ? undefined : swipeEdgeWidth }
: { left: 0, width: isOpen ? undefined : swipeEdgeWidth };

const borderRadiiStyle = isRight
? {
borderTopLeftRadius: DRAWER_BORDER_RADIUS,
borderBottomLeftRadius: DRAWER_BORDER_RADIUS,
}
: {
borderTopRightRadius: DRAWER_BORDER_RADIUS,
borderBottomRightRadius: DRAWER_BORDER_RADIUS,
};

const touchStartX = useSharedValue(0);
const touchX = useSharedValue(0);
const translationX = useSharedValue(getDrawerTranslationX(open));
Expand Down Expand Up @@ -446,6 +457,7 @@ export function Drawer({
drawerType === 'permanent' ? 'relative' : 'absolute',
zIndex: drawerType === 'back' ? -1 : 0,
},
drawerType === 'permanent' ? null : borderRadiiStyle,
drawerAnimatedStyle,
drawerStyle,
]}
Expand Down
Loading