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

fix: broken search screen on Android #37155

Merged
merged 2 commits into from
Feb 26, 2024
Merged

fix: broken search screen on Android #37155

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cee09d2
fix: broken search screen on Android
kirillzyusko Feb 23, 2024
b6f71a1
fix: prettier
kirillzyusko Feb 23, 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
71 changes: 40 additions & 31 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type {ParamListBase} from '@react-navigation/routers';
import type {StackNavigationOptions} from '@react-navigation/stack';
import {createStackNavigator} from '@react-navigation/stack';
import React, {useMemo} from 'react';
import useThemeStyles from '@hooks/useThemeStyles';
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
Expand Down Expand Up @@ -45,38 +46,46 @@ type Screens = Partial<Record<Screen, () => React.ComponentType>>;
* @param screens key/value pairs where the key is the name of the screen and the value is a functon that returns the lazy-loaded component
* @param getScreenOptions optional function that returns the screen options, override the default options
*/
function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
const ModalStackNavigator = createPlatformStackNavigator<TStackParams>();

function ModalStack() {
const styles = useThemeStyles();

const defaultSubRouteOptions = useMemo(
(): StackNavigationOptions => ({
...subRouteOptions,
cardStyle: styles.navigationScreenCardStyle,
}),
[styles],
);

return (
<ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
{Object.keys(screens as Required<Screens>).map((name) => (
<ModalStackNavigator.Screen
key={name}
name={name}
getComponent={(screens as Required<Screens>)[name as Screen]}
/>
))}
</ModalStackNavigator.Navigator>
);
}

ModalStack.displayName = 'ModalStack';

return ModalStack;
function createModalStackNavigatorFactory(factory: typeof createPlatformStackNavigator) {
return function createNestedModalStackNavigator<TStackParams extends ParamListBase>(
screens: Screens,
getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions,
): React.ComponentType {
const ModalStackNavigator = factory<TStackParams>();

function ModalStack() {
const styles = useThemeStyles();

const defaultSubRouteOptions = useMemo(
(): StackNavigationOptions => ({
...subRouteOptions,
cardStyle: styles.navigationScreenCardStyle,
}),
[styles],
);

return (
<ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
{Object.keys(screens as Required<Screens>).map((name) => (
<ModalStackNavigator.Screen
key={name}
name={name}
getComponent={(screens as Required<Screens>)[name as Screen]}
/>
))}
</ModalStackNavigator.Navigator>
);
}

ModalStack.displayName = 'ModalStack';

return ModalStack;
};
}

const createModalStackNavigator = createModalStackNavigatorFactory(createPlatformStackNavigator);
const createJSModalStackNavigator = createModalStackNavigatorFactory(createStackNavigator);
Comment on lines +86 to +87
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we just add a comment saying which one is preferred to use and why we have the JS one?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@rlinoz actually the PR with native-stack produces many problems, so the best solution would be to revert this PR and I'll re-open a new one later where I'll fix all the issues


const MoneyRequestModalStackNavigator = createModalStackNavigator<MoneyRequestNavigatorParamList>({
[SCREENS.MONEY_REQUEST.START]: () => require('../../../pages/iou/request/IOURequestRedirectToStartPage').default as React.ComponentType,
[SCREENS.MONEY_REQUEST.CREATE]: () => require('../../../pages/iou/request/IOURequestStartPage').default as React.ComponentType,
Expand Down Expand Up @@ -156,7 +165,7 @@ const RoomInviteModalStackNavigator = createModalStackNavigator<RoomInviteNaviga
[SCREENS.ROOM_INVITE_ROOT]: () => require('../../../pages/RoomInvitePage').default as React.ComponentType,
});

const SearchModalStackNavigator = createModalStackNavigator<SearchNavigatorParamList>({
const SearchModalStackNavigator = createJSModalStackNavigator<SearchNavigatorParamList>({
[SCREENS.SEARCH_ROOT]: () => require('../../../pages/SearchPage').default as React.ComponentType,
});

Expand Down
Loading