-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(feed): Add dynamic layouts and new subgroup data
- Introduced dynamic layouts for index, search, profile, and login routes, enhancing modularity and flexibility. - Implemented a share button and platform-specific sharing functionality to improve user experience. - Updated tab title from "Home" to "MeloCap" for better branding. - Removed the "Avatar" tab from the layout. - Added multiple new subgroups to the sample data to enrich content and provide a better testing dataset
- Loading branch information
Showing
4 changed files
with
310 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { Stack } from "expo-router"; | ||
| import Head from "expo-router/head"; | ||
| import { Platform, PlatformColor, TouchableOpacity } from "react-native"; | ||
| import * as Share from "expo-sharing"; | ||
| import { Icon } from "@/components/icon"; | ||
|
|
||
| export const unstable_settings = { | ||
| initialRouteName: "index", | ||
| search: { | ||
| initialRouteName: "search", | ||
| }, | ||
| profile: { | ||
| initialRouteName: "profile", | ||
| }, | ||
| login: { | ||
| initialRouteName: "login", | ||
| }, | ||
| avatar: { | ||
| initialRouteName: "avatar" | ||
| }, | ||
| }; | ||
|
|
||
| export default function DynamicLayout() { | ||
| return ( | ||
| <Stack | ||
| screenOptions={{ | ||
| headerTransparent: true, | ||
| headerLargeTitle: true, | ||
| headerLargeTitleShadowVisible: true, | ||
| // @ts-ignore | ||
| headerLargeStyle: { | ||
| backgroundColor: PlatformColor("systemGroupedBackgroundColor"), | ||
| }, | ||
| headerBlurEffect: "prominent", | ||
| headerShadowVisible: true, | ||
| headerStyle: { | ||
| backgroundColor: "rgba(255, 255, 255, 0.01)", | ||
| }, | ||
| headerRight(props) { | ||
| if (isSharingAvailable()) { | ||
| return ( | ||
| <ShareButton | ||
| {...props} | ||
| /> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| function safeLocation() { | ||
| if (typeof window === "undefined") { | ||
| return ""; | ||
| } | ||
| return window.location.toString(); | ||
| } | ||
|
|
||
| const useLink = Head.useLink | ||
| ? Head.useLink | ||
| : () => ({ | ||
| url: safeLocation(), | ||
| }); | ||
|
|
||
| function ShareButton(props) { | ||
| const link = useLink?.(); | ||
| const url = link?.url ?? safeLocation(); | ||
| return ( | ||
| <TouchableOpacity | ||
| activeOpacity={0.8} | ||
| onPress={() => { | ||
| Share.share({ | ||
| url, | ||
| }); | ||
| }} | ||
| > | ||
| {/* <Icon name="share" fill={props.tintColor} width={24} height={24} /> */} | ||
| </TouchableOpacity> | ||
| ); | ||
| } | ||
|
|
||
| function isSharingAvailable() { | ||
| if (Platform.OS === "web") { | ||
| if (typeof navigator === "undefined") { | ||
| return false; | ||
| } | ||
|
|
||
| return !!navigator.share; | ||
| } | ||
| return true; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { Stack } from "expo-router"; | ||
| import Head from "expo-router/head"; | ||
| import { Platform, PlatformColor, TouchableOpacity } from "react-native"; | ||
| import * as Share from "expo-sharing"; | ||
| import { Icon } from "@/components/icon"; | ||
|
|
||
| export const unstable_settings = { | ||
| initialRouteName: "index", | ||
| search: { | ||
| initialRouteName: "search", | ||
| }, | ||
| profile: { | ||
| initialRouteName: "profile", | ||
| }, | ||
| login: { | ||
| initialRouteName: "login", | ||
| }, | ||
| avatar: { | ||
| initialRouteName: "avatar" | ||
| }, | ||
| }; | ||
|
|
||
| export default function DynamicLayout() { | ||
| return ( | ||
| <Stack | ||
| screenOptions={{ | ||
| headerTransparent: true, | ||
| headerLargeTitle: true, | ||
| headerLargeTitleShadowVisible: true, | ||
| // @ts-ignore | ||
| headerLargeStyle: { | ||
| // backgroundColor: PlatformColor("systemGroupedBackgroundColor"), | ||
| }, | ||
| headerBlurEffect: "prominent", | ||
| headerShadowVisible: true, | ||
| headerStyle: { | ||
| backgroundColor: "rgba(255, 255, 255, 0.01)", | ||
| }, | ||
| headerRight(props) { | ||
| if (isSharingAvailable()) { | ||
| return ( | ||
| <ShareButton | ||
| {...props} | ||
| /> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| function safeLocation() { | ||
| if (typeof window === "undefined") { | ||
| return ""; | ||
| } | ||
| return window.location.toString(); | ||
| } | ||
|
|
||
| const useLink = Head.useLink | ||
| ? Head.useLink | ||
| : () => ({ | ||
| url: safeLocation(), | ||
| }); | ||
|
|
||
| function ShareButton(props) { | ||
| const link = useLink?.(); | ||
| const url = link?.url ?? safeLocation(); | ||
| return ( | ||
| <TouchableOpacity | ||
| activeOpacity={0.8} | ||
| onPress={() => { | ||
| Share.share({ | ||
| url, | ||
| }); | ||
| }} | ||
| > | ||
| {/* <Icon name="share" fill={props.tintColor} width={24} height={24} /> */} | ||
| </TouchableOpacity> | ||
| ); | ||
| } | ||
|
|
||
| function isSharingAvailable() { | ||
| if (Platform.OS === "web") { | ||
| if (typeof navigator === "undefined") { | ||
| return false; | ||
| } | ||
|
|
||
| return !!navigator.share; | ||
| } | ||
| return true; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters