Skip to content

Commit

Permalink
improve full width swipe
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkasdorf
gkasdorf committed Jul 29, 2023
1 parent 67225cc commit 1b5e6b8
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 127 deletions.
195 changes: 108 additions & 87 deletions Stack.tsx
View file
Expand Up @@ -26,7 +26,6 @@ import SFIcon from "./src/components/common/icons/SFIcon";
import EditCommentScreen from "./src/components/screens/Comments/EditCommentScreen";
import NewCommentScreen from "./src/components/screens/Comments/NewCommentScreen";

import ScreenGestureHandler from "./src/components/common/Navigation/ScreenGestureHandler";
import CommunityAboutScreen from "./src/components/screens/Feed/CommunityAboutScreen";
import CommunityFeedScreen from "./src/components/screens/Feed/CommunityFeedScreen";
import FeedsIndexScreen from "./src/components/screens/Feed/FeedsIndexScreen";
Expand Down Expand Up @@ -116,9 +115,14 @@ function FeedDrawerContainerScreen() {
const FeedStack = createNativeStackNavigator();
function FeedStackScreen() {
const { t } = useTranslation();
const fullScreenSwipe = !useSettingsStore(
(state) => state.settings.swipeToVote
);

return (
<FeedStack.Navigator screenOptions={{}}>
<FeedStack.Navigator
screenOptions={{ fullScreenGestureEnabled: fullScreenSwipe }}
>
<FeedStack.Group>
<FeedStack.Screen
name="FeedDrawerContainer"
Expand Down Expand Up @@ -205,9 +209,14 @@ function FeedStackScreen() {
const InboxStack = createNativeStackNavigator();
function InboxStackScreen() {
const { t } = useTranslation();
const fullScreenSwipe = !useSettingsStore(
(state) => state.settings.swipeToVote
);

return (
<InboxStack.Navigator>
<InboxStack.Navigator
screenOptions={{ fullScreenGestureEnabled: fullScreenSwipe }}
>
<InboxStack.Group>
<InboxStack.Screen
name="Inbox"
Expand Down Expand Up @@ -396,10 +405,15 @@ function SettingsScreens(stack) {

const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
const fullScreenSwipe = !useSettingsStore(
(state) => state.settings.swipeToVote
);

return (
<SettingsStack.Navigator
screenOptions={{
freezeOnBlur: true,
fullScreenGestureEnabled: fullScreenSwipe,
}}
>
{SettingsScreens(SettingsStack)}
Expand All @@ -410,11 +424,15 @@ function SettingsStackScreen() {
const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen() {
const { t } = useTranslation();
const fullScreenSwipe = !useSettingsStore(
(state) => state.settings.swipeToVote
);

return (
<ProfileStack.Navigator
screenOptions={{
freezeOnBlur: true,
fullScreenGestureEnabled: fullScreenSwipe,
}}
>
<ProfileStack.Group>
Expand Down Expand Up @@ -498,9 +516,14 @@ function ProfileStackScreen() {
const SearchStack = createNativeStackNavigator();
function SearchStackScreen() {
const { t } = useTranslation();
const fullScreenSwipe = !useSettingsStore(
(state) => state.settings.swipeToVote
);

return (
<SearchStack.Navigator>
<SearchStack.Navigator
screenOptions={{ fullScreenGestureEnabled: fullScreenSwipe }}
>
<SearchStack.Group>
<SearchStack.Screen
name="Search"
Expand Down Expand Up @@ -599,93 +622,91 @@ function Tabs() {
);

return (
<ScreenGestureHandler>
<Tab.Navigator
tabBar={(props) => <CustomTabBar {...props} />}
screenOptions={{
<Tab.Navigator
tabBar={(props) => <CustomTabBar {...props} />}
screenOptions={{
tabBarLabel: t("Feed"),
freezeOnBlur: false,
}}
>
<Tab.Screen
name="FeedStack"
component={FeedStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.FEED} color={color} />
),
tabBarLabel: t("Feed"),
freezeOnBlur: false,
}}
>
<Tab.Screen
name="FeedStack"
component={FeedStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.FEED} color={color} />
),
tabBarLabel: t("Feed"),
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="InboxStack"
component={InboxStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.INBOX} color={color} />
),
tabBarLabel: t("Inbox"),

tabBarBadge:
unread.replies + unread.mentions + unread.privateMessage > 0
? // ? unread.replies + unread.mentions + unread.privateMessage
unread.replies
: null,
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="ProfileStack"
component={ProfileStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) =>
!hideAvatarInTab && me?.local_user_view.person.avatar ? (
<FastImage
source={{
uri: me?.local_user_view.person.avatar,
}}
style={styles.avatar}
/>
) : (
<SFIcon icon={ICON_MAP.USER_AVATAR} color={color} />
),
tabBarLabel: hideUsernameInTab
? "Profile"
: truncateName(currentAccount?.username ?? "Profile", 10),
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="SearchStack"
component={SearchStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.SEARCH} color={color} />
),
tabBarLabel: t("Search"),
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="SettingsStack"
component={SettingsStackScreen}
options={{
headerShown: false,
// tabBarIcon: ({ color }) => <IconSettings color={color} />,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.SETTINGS} color={color} />
/>
<Tab.Screen
name="InboxStack"
component={InboxStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.INBOX} color={color} />
),
tabBarLabel: t("Inbox"),

tabBarBadge:
unread.replies + unread.mentions + unread.privateMessage > 0
? // ? unread.replies + unread.mentions + unread.privateMessage
unread.replies
: null,
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="ProfileStack"
component={ProfileStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) =>
!hideAvatarInTab && me?.local_user_view.person.avatar ? (
<FastImage
source={{
uri: me?.local_user_view.person.avatar,
}}
style={styles.avatar}
/>
) : (
<SFIcon icon={ICON_MAP.USER_AVATAR} color={color} />
),
tabBarLabel: t("Settings"),
freezeOnBlur: false,
}}
/>
</Tab.Navigator>
</ScreenGestureHandler>
tabBarLabel: hideUsernameInTab
? "Profile"
: truncateName(currentAccount?.username ?? "Profile", 10),
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="SearchStack"
component={SearchStackScreen}
options={{
headerShown: false,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.SEARCH} color={color} />
),
tabBarLabel: t("Search"),
freezeOnBlur: false,
}}
/>
<Tab.Screen
name="SettingsStack"
component={SettingsStackScreen}
options={{
headerShown: false,
// tabBarIcon: ({ color }) => <IconSettings color={color} />,
tabBarIcon: ({ color }) => (
<SFIcon icon={ICON_MAP.SETTINGS} color={color} />
),
tabBarLabel: t("Settings"),
freezeOnBlur: false,
}}
/>
</Tab.Navigator>
);
}

Expand Down
40 changes: 0 additions & 40 deletions src/components/common/Navigation/ScreenGestureHandler.tsx
View file

This file was deleted.

0 comments on commit 1b5e6b8

Please sign in to comment.