Skip to content
This repository was archived by the owner on Feb 8, 2025. It is now read-only.

Commit 268a939

Browse files
hbriesehbriese
committed
fix(app): fix layout on iOS
1 parent 2b492f5 commit 268a939

28 files changed

+79
-102
lines changed

‎app/src/app/(modal)/_layout.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import { Slot, Stack } from 'expo-router';
1+
import { Slot } from 'expo-router';
22

33
export default function SheetLayout() {
44
return (
55
<>
6-
<Stack.Screen
7-
options={{
8-
presentation: 'transparentModal',
9-
headerShown: false,
10-
animation: 'fade',
11-
animationDuration: 100,
12-
}}
13-
/>
146
<Slot />
157
</>
168
);

‎app/src/app/(nav)/[account]/(home)/_layout.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { Panes } from '#/layout/Panes';
2-
import { Slot, Stack } from 'expo-router';
2+
import { Slot } from 'expo-router';
33
import { HomePane } from './index';
44

55
export default function HomeLayout() {
66
return (
77
<Panes>
8-
<Stack.Screen options={{ headerShown: false }} />
98
<HomePane />
109
<Slot />
1110
</Panes>

‎app/src/app/(nav)/[account]/(home)/activity/_layout.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Panes } from '#/layout/Panes';
21
import { Slot } from 'expo-router';
32
import { ActivityPane } from './index';
43

‎app/src/app/(nav)/[account]/(home)/index.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -63,17 +63,17 @@ function HomePane_() {
6363

6464
return (
6565
<Pane flex padding={false}>
66+
<Appbar
67+
leading="menu"
68+
center
69+
headline={<AccountSelector account={account} />}
70+
style={styles.appbar}
71+
noPadding
72+
/>
6673
<FlatList
6774
contentContainerStyle={styles.container}
6875
ListHeaderComponent={
6976
<>
70-
<Appbar
71-
leading="menu"
72-
center
73-
headline={<AccountSelector account={account} />}
74-
style={styles.appbar}
75-
noPadding
76-
/>
7777
<QuickActions account={address} />
7878
<ActivitySection account={account} user={user} />
7979
<AccountValue tokens={tokens} />

‎app/src/app/(nav)/[account]/(home)/send.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const stylesheet = createStyles(({ colors, padding, negativeMargin }) => ({
117117
paddingHorizontal: padding,
118118
},
119119
inputContainer: {
120-
marginVertical: 32,
120+
marginVertical: 16,
121121
},
122122
sendModeChipsContainer: {
123123
marginHorizontal: negativeMargin,

‎app/src/app/(nav)/[account]/_layout.tsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useLayoutEffect } from 'react';
2-
import { Redirect, Stack, useLocalSearchParams, useRouter } from 'expo-router';
2+
import { Redirect, Slot, useLocalSearchParams, useRouter } from 'expo-router';
33
import {
44
ErrorBoundary as BaseErrorBoundary,
55
ErrorBoundaryProps,
@@ -9,7 +9,6 @@ import NotFound from '~/app/+not-found';
99
import { useLocalParams } from '~/hooks/useLocalParams';
1010
import { useSelectedAccount, useSetSelectedAccont } from '~/hooks/useSelectedAccount';
1111
import { zUAddress } from '~/lib/zod';
12-
import { AppbarHeader } from '#/Appbar/AppbarHeader';
1312
import { withSuspense } from '#/skeleton/withSuspense';
1413
import { Splash } from '#/Splash';
1514
import { graphql } from 'relay-runtime';
@@ -52,12 +51,7 @@ export function AccountLayout() {
5251
// Redirect to the home page if account isn't found
5352
if (!found) return <Redirect href="/" />;
5453

55-
return (
56-
<>
57-
<Stack.Screen options={{ headerShown: false }} />
58-
<Stack screenOptions={{ header: (props) => <AppbarHeader {...props} /> }} />
59-
</>
60-
);
54+
return <Slot />;
6155
}
6256

6357
export default withSuspense(AccountLayout, <Splash />);

‎app/src/app/(nav)/[account]/settings/_layout.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { Panes } from '#/layout/Panes';
2-
import { Slot, Stack } from 'expo-router';
2+
import { Slot } from 'expo-router';
33
import _ from 'lodash';
44
import { AccountSettingsPane } from './index';
55

66
export default function AccountSettingsLayout() {
77
return (
8-
<>
9-
<Stack.Screen options={{ headerShown: false }} />
10-
<Panes>
11-
<AccountSettingsPane />
12-
<Slot />
13-
</Panes>
14-
</>
8+
<Panes>
9+
<AccountSettingsPane />
10+
<Slot />
11+
</Panes>
1512
);
1613
}

‎app/src/app/(nav)/[account]/settings/details.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { AccountSettingsParams } from './index';
44
import { useForm } from 'react-hook-form';
55
import { createStyles } from '@theme/styles';
66
import { Appbar } from '#/Appbar/Appbar';
7-
import { Surface } from '#/layout/Surface';
87
import { View } from 'react-native';
98
import { AccountNameFormField } from '#/fields/AccountNameFormField';
109
import { Actions } from '#/layout/Actions';

‎app/src/app/(nav)/[account]/swap.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { View } from 'react-native';
88
import { NumericInput } from '#/fields/NumericInput';
99
import { DateTime } from 'luxon';
1010
import { Button } from '#/Button';
11-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
1211
import { useLocalParams } from '~/hooks/useLocalParams';
1312
import { withSuspense } from '#/skeleton/withSuspense';
1413
import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
@@ -31,6 +30,7 @@ import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
3130
import { graphql } from 'relay-runtime';
3231
import { useLazyQuery } from '~/api';
3332
import { swap_SwapScreenQuery } from '~/api/__generated__/swap_SwapScreenQuery.graphql';
33+
import { Appbar } from '#/Appbar/Appbar';
3434

3535
const DownArrow = materialCommunityIcon('arrow-down-thin');
3636
const ICON_BUTTON_SIZE = 24;
@@ -112,7 +112,7 @@ function SwapScreen() {
112112

113113
return (
114114
<>
115-
<AppbarOptions leading="menu" headline="Swap" />
115+
<Appbar leading="menu" headline="Swap" />
116116

117117
<ScrollableScreenSurface>
118118
<InputsView token={from} input={input} setInput={setInput} type={type} setType={setType} />

‎app/src/app/(nav)/[account]/tokens.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ import { zUAddress } from '~/lib/zod';
1010
import { useLocalParams } from '~/hooks/useLocalParams';
1111
import { withSuspense } from '#/skeleton/withSuspense';
1212
import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
13-
import { SearchbarOptions } from '#/Appbar/SearchbarOptions';
1413
import { ScreenSurface } from '#/layout/ScreenSurface';
1514
import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
1615
import { graphql } from 'relay-runtime';
1716
import { tokens_TokensScreenQuery } from '~/api/__generated__/tokens_TokensScreenQuery.graphql';
1817
import { useLazyQuery } from '~/api';
18+
import { Searchbar } from '#/Appbar/Searchbar';
1919

2020
const Query = graphql`
2121
query tokens_TokensScreenQuery($account: UAddress!, $chain: Chain, $query: String) {
@@ -44,7 +44,7 @@ function TokensScreen() {
4444

4545
return (
4646
<>
47-
<SearchbarOptions
47+
<Searchbar
4848
leading={MenuOrSearchIcon}
4949
placeholder="Search tokens"
5050
trailing={(props) => <AddIcon {...props} onPress={() => router.push(`/token/add`)} />}

‎app/src/app/(nav)/_layout.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@ export const unstable_settings = {
3636
export default function DrawerLayout() {
3737
return (
3838
<Drawer DrawerContent={DrawerContent} RailContent={RailContent}>
39-
<Stack screenOptions={{ header: (props) => <AppbarHeader {...props} /> }} />
39+
<Slot />
4040
</Drawer>
4141
);
4242
}
4343

4444
function RailContent() {
4545
const { styles } = useStyles(railStylesheet);
4646
const account = useSelectedAccount();
47-
const send = useSend();
47+
const router = useRouter();
4848

4949
return (
5050
<RailSurface
@@ -55,9 +55,13 @@ function RailContent() {
5555
position="relative"
5656
icon={() => <OutboundIcon color={styles.fabIcon.color} />}
5757
style={styles.fabContainer}
58-
loading={false}
59-
onPress={() => send({ account })}
6058
animated={false}
59+
onPress={() =>
60+
router.push({
61+
pathname: `/(nav)/[account]/send`,
62+
params: { account } satisfies SendScreenParams,
63+
})
64+
}
6165
/>
6266
)
6367
}
@@ -110,7 +114,6 @@ const railStylesheet = createStyles(({ colors }) => ({
110114

111115
function DrawerContent() {
112116
const account = useSelectedAccount();
113-
const send = useSend();
114117

115118
return (
116119
<DrawerSurface>
@@ -136,7 +139,6 @@ function DrawerContent() {
136139
href={{ pathname: `/(nav)/[account]/send`, params: { account } }}
137140
icon={OutboundIcon}
138141
label="Send"
139-
onPress={() => send({ account })}
140142
/>
141143
)}
142144

‎app/src/app/(nav)/accounts/create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
1+
import { Appbar } from '#/Appbar/Appbar';
22
import { withSuspense } from '#/skeleton/withSuspense';
33
import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
44
import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
@@ -7,7 +7,7 @@ import { CreateAccount } from '#/CreateAccount';
77
function CreateAccountScreen() {
88
return (
99
<>
10-
<AppbarOptions mode="large" headline="Let's setup your account" />
10+
<Appbar mode="large" headline="Let's setup your account" />
1111

1212
<ScrollableScreenSurface>
1313
<CreateAccount />

‎app/src/app/(nav)/contacts/_layout.tsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import { Panes } from '#/layout/Panes';
2-
import { Slot, Stack } from 'expo-router';
2+
import { Slot } from 'expo-router';
33
import { ContactsPane } from './index';
44
import { Pane } from '#/layout/Pane';
55

66
export default function ContactsLayout() {
77
return (
8-
<>
9-
<Stack.Screen options={{ headerShown: false }} />
10-
<Panes>
11-
<Pane fixed>
12-
<ContactsPane />
13-
</Pane>
8+
<Panes>
9+
<Pane fixed>
10+
<ContactsPane />
11+
</Pane>
1412

15-
<Slot />
16-
</Panes>
17-
</>
13+
<Slot />
14+
</Panes>
1815
);
1916
}

‎app/src/app/(nav)/ledger/link.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Actions } from '#/layout/Actions';
66
import { Button } from '#/Button';
77
import { match } from 'ts-pattern';
88
import { LedgerItem } from '#/link/ledger/LedgerItem';
9-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
9+
import { Appbar } from '#/Appbar/Appbar';
1010
import { useObservable } from '~/hooks/useObservable';
1111
import { bleDevices } from '~/lib/ble/manager';
1212
import { ok } from 'neverthrow';
@@ -36,7 +36,7 @@ function LinkLedgerScreen() {
3636

3737
return (
3838
<>
39-
<AppbarOptions headline="Link Ledger" />
39+
<Appbar headline="Link Ledger" />
4040

4141
<ScreenSurface>
4242
<View style={styles.headerContainer}>

‎app/src/app/(nav)/message/[id].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useLocalParams } from '~/hooks/useLocalParams';
33
import { zUuid } from '~/lib/zod';
44
import { AppbarMore } from '#/Appbar/AppbarMore';
55
import { Divider, Menu } from 'react-native-paper';
6-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
6+
import { Appbar } from '#/Appbar/Appbar';
77
import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
88
import { MessageStatus } from '#/message/MessageStatus';
99
import { StyleSheet, View } from 'react-native';
@@ -58,7 +58,7 @@ export default function MessageScreen() {
5858

5959
return (
6060
<SideSheetLayout defaultVisible>
61-
<AppbarOptions
61+
<Appbar
6262
headline={(props) => <MessageStatus message={m} {...props} />}
6363
mode="large"
6464
{...(remove && {

‎app/src/app/(nav)/sessions/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StyleSheet, FlatList } from 'react-native';
44
import { useWalletConnect } from '~/lib/wc';
55
import { PairingItem } from '#/walletconnect/PairingItem';
66
import { Divider, Text } from 'react-native-paper';
7-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
7+
import { Appbar } from '#/Appbar/Appbar';
88
import { withSuspense } from '#/skeleton/withSuspense';
99
import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
1010
import { ScreenSurface } from '#/layout/ScreenSurface';
@@ -24,7 +24,7 @@ function SessionsScreen() {
2424

2525
return (
2626
<>
27-
<AppbarOptions mode="large" leading="menu" headline="Sessions" />
27+
<Appbar mode="large" leading="menu" headline="Sessions" />
2828

2929
<ScreenSurface>
3030
<FlatList

‎app/src/app/(nav)/settings/auth.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
1+
import { Appbar } from '#/Appbar/Appbar';
22
import { AuthSettings } from '#/auth/AuthSettings';
33
import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
44
import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
@@ -8,7 +8,7 @@ import { createStyles } from '@theme/styles';
88
function AuthSettingsScreen() {
99
return (
1010
<>
11-
<AppbarOptions mode="large" leading="menu" headline="Authentication" />
11+
<Appbar mode="large" leading="menu" headline="Authentication" />
1212

1313
<ScrollableScreenSurface contentContainerStyle={styles.surface}>
1414
<AuthSettings />

‎app/src/app/(nav)/settings/notifications.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
1+
import { Appbar } from '#/Appbar/Appbar';
22
import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
33
import { NotificationSettings } from '#/NotificationSettings';
44
import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
@@ -8,7 +8,7 @@ import { createStyles } from '@theme/styles';
88
export function NotificationSettingsScreen() {
99
return (
1010
<>
11-
<AppbarOptions mode="large" leading="menu" headline="Notifications" />
11+
<Appbar mode="large" leading="menu" headline="Notifications" />
1212

1313
<ScrollableScreenSurface style={styles.surface}>
1414
<NotificationSettings />

‎app/src/app/(nav)/token/[address].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { FormTextField } from '#/fields/FormTextField';
77
import { Actions } from '#/layout/Actions';
88
import { AppbarMore } from '#/Appbar/AppbarMore';
99
import { Menu } from 'react-native-paper';
10-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
10+
import { Appbar } from '#/Appbar/Appbar';
1111
import { withSuspense } from '#/skeleton/withSuspense';
1212
import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
1313
import { z } from 'zod';
@@ -92,7 +92,7 @@ function TokenScreen_() {
9292

9393
return (
9494
<Pane flex>
95-
<AppbarOptions
95+
<Appbar
9696
headline="Token"
9797
{...(query.token?.userOwned && {
9898
trailing: (props) => (

‎app/src/app/(nav)/token/add.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppbarOptions } from '#/Appbar/AppbarOptions';
1+
import { Appbar } from '#/Appbar/Appbar';
22
import { FormSelectChip } from '#/fields/FormSelectChip';
33
import { FormSubmitButton } from '#/fields/FormSubmitButton';
44
import { FormTextField } from '#/fields/FormTextField';
@@ -31,7 +31,7 @@ export default function AddTokenScreen() {
3131

3232
return (
3333
<>
34-
<AppbarOptions headline="Add token" />
34+
<Appbar headline="Add token" />
3535

3636
<ScrollableScreenSurface>
3737
<View style={styles.container}>

0 commit comments

Comments
 (0)