From 7112fb20422fc76e6d9d58ba25042a2de0f9f3e1 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 10 May 2023 07:57:51 +0700 Subject: [PATCH 1/5] initial home messages screen --- app/navigators/AppNavigator.tsx | 1 + app/navigators/TabNavigator.tsx | 4 ++-- app/screens/HomeMessagesScreen.tsx | 27 +++++++++++++++++++++++++++ app/screens/index.ts | 1 + ios/Podfile.lock | 2 +- 5 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 app/screens/HomeMessagesScreen.tsx diff --git a/app/navigators/AppNavigator.tsx b/app/navigators/AppNavigator.tsx index 365aee4d..bdb8c425 100644 --- a/app/navigators/AppNavigator.tsx +++ b/app/navigators/AppNavigator.tsx @@ -30,6 +30,7 @@ import { TabNavigator } from "./TabNavigator" export type AppStackParamList = { Home: undefined Tabs: undefined + HomeMessages: undefined } /** diff --git a/app/navigators/TabNavigator.tsx b/app/navigators/TabNavigator.tsx index 89c529f6..b770c7cf 100644 --- a/app/navigators/TabNavigator.tsx +++ b/app/navigators/TabNavigator.tsx @@ -4,7 +4,7 @@ import React from "react" import { TextStyle, ViewStyle } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" import { Icon } from "../components" -import { BlankScreen } from "../screens" +import { HomeMessagesScreen, BlankScreen } from "../screens" import { colors, spacing, typography } from "../theme" import { AppStackParamList, AppStackScreenProps } from "./AppNavigator" @@ -48,7 +48,7 @@ export function TabNavigator() { > ( diff --git a/app/screens/HomeMessagesScreen.tsx b/app/screens/HomeMessagesScreen.tsx new file mode 100644 index 00000000..dc755460 --- /dev/null +++ b/app/screens/HomeMessagesScreen.tsx @@ -0,0 +1,27 @@ +import React, { FC } from "react" +import { observer } from "mobx-react-lite" +import { ViewStyle } from "react-native" +import { NativeStackScreenProps } from "@react-navigation/native-stack" +import { AppStackScreenProps } from "app/navigators" +import { Screen, Text } from "app/components" +// import { useNavigation } from "@react-navigation/native" +// import { useStores } from "app/models" + +interface HomeMessagesScreenProps extends NativeStackScreenProps> {} + +export const HomeMessagesScreen: FC = observer(function HomeMessagesScreen() { + // Pull in one of our MST stores + // const { someStore, anotherStore } = useStores() + + // Pull in navigation via hook + // const navigation = useNavigation() + return ( + + + + ) +}) + +const $root: ViewStyle = { + flex: 1, +} diff --git a/app/screens/index.ts b/app/screens/index.ts index 4984de59..e1380435 100644 --- a/app/screens/index.ts +++ b/app/screens/index.ts @@ -1,3 +1,4 @@ export * from "./ErrorScreen/ErrorBoundary" export * from "./BlankScreen" export * from "./HomeScreen" +export * from "./HomeMessagesScreen" diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 597ed0fc..2f96af97 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -755,4 +755,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 3318e632f7773b31a4fa096b74dfc3e49b55c542 -COCOAPODS: 1.12.1 +COCOAPODS: 1.11.3 From 617ea708aed8660aed6b87e5f55e8fbaf0cc9a8b Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 10 May 2023 09:02:51 +0700 Subject: [PATCH 2/5] update sidebar --- app/screens/HomeMessagesScreen.tsx | 111 +++++++++++++++++++++++++++-- 1 file changed, 107 insertions(+), 4 deletions(-) diff --git a/app/screens/HomeMessagesScreen.tsx b/app/screens/HomeMessagesScreen.tsx index dc755460..35104943 100644 --- a/app/screens/HomeMessagesScreen.tsx +++ b/app/screens/HomeMessagesScreen.tsx @@ -1,9 +1,11 @@ import React, { FC } from "react" import { observer } from "mobx-react-lite" -import { ViewStyle } from "react-native" +import { View, ViewStyle, ImageStyle } from "react-native" import { NativeStackScreenProps } from "@react-navigation/native-stack" import { AppStackScreenProps } from "app/navigators" -import { Screen, Text } from "app/components" +import { AutoImage, Screen, Text } from "app/components" +import { spacing, colors } from "app/theme" +import { PlusIcon } from "lucide-react-native" // import { useNavigation } from "@react-navigation/native" // import { useStores } from "app/models" @@ -16,8 +18,45 @@ export const HomeMessagesScreen: FC = observer(function // Pull in navigation via hook // const navigation = useNavigation() return ( - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) }) @@ -25,3 +64,67 @@ export const HomeMessagesScreen: FC = observer(function const $root: ViewStyle = { flex: 1, } + +const $container: ViewStyle = { + flex: 1, + flexDirection: "row", + flexWrap: "wrap", +} + +const $sidebar: ViewStyle = { + width: 72, + height: "100%", + flexShrink: 0, +} + +const $main: ViewStyle = { + flex: 1, + width: "100%", + height: "100%", +} + +const $pinList: ViewStyle = { + gap: spacing.extraSmall, +} + +const $divider: ViewStyle = { + width: "50%", + height: 2, + backgroundColor: colors.tint, + borderRadius: 2, + marginVertical: spacing.extraSmall, + alignSelf: "center", +} + +const $channelList: ViewStyle = { + flex: 1, + gap: spacing.extraSmall, +} + +const $dms: ViewStyle = { + backgroundColor: colors.tint, + borderRadius: 100, + width: 50, + height: 50, +} + +const $channel: ViewStyle = { + alignItems: "center", + justifyContent: "center", +} + +const $channelImage: ImageStyle = { + backgroundColor: colors.tint, + borderRadius: 100, + width: 50, + height: 50, +} + +const $addChannelButton: ViewStyle = { + backgroundColor: "cyan", + alignItems: "center", + justifyContent: "center", + borderRadius: 100, + width: 50, + height: 50, +} From 7e7d9b2ef7707c4ba2a2ed09c0f0549fa9697d59 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 10 May 2023 10:17:54 +0700 Subject: [PATCH 3/5] update main section in home messages screen --- app/screens/HomeMessagesScreen.tsx | 198 ++++++++++++++++++++++------- ios/Podfile.lock | 6 + package.json | 1 + yarn.lock | 31 ++++- 4 files changed, 189 insertions(+), 47 deletions(-) diff --git a/app/screens/HomeMessagesScreen.tsx b/app/screens/HomeMessagesScreen.tsx index 35104943..55cae575 100644 --- a/app/screens/HomeMessagesScreen.tsx +++ b/app/screens/HomeMessagesScreen.tsx @@ -1,72 +1,139 @@ import React, { FC } from "react" import { observer } from "mobx-react-lite" -import { View, ViewStyle, ImageStyle } from "react-native" +import { View, ViewStyle, ImageStyle, TextStyle } from "react-native" import { NativeStackScreenProps } from "@react-navigation/native-stack" import { AppStackScreenProps } from "app/navigators" import { AutoImage, Screen, Text } from "app/components" import { spacing, colors } from "app/theme" import { PlusIcon } from "lucide-react-native" +import { FlashList } from "@shopify/flash-list" // import { useNavigation } from "@react-navigation/native" // import { useStores } from "app/models" -interface HomeMessagesScreenProps extends NativeStackScreenProps> {} - -export const HomeMessagesScreen: FC = observer(function HomeMessagesScreen() { - // Pull in one of our MST stores - // const { someStore, anotherStore } = useStores() - - // Pull in navigation via hook - // const navigation = useNavigation() - return ( - - - - - - +interface HomeMessagesScreenProps + extends NativeStackScreenProps> {} + +// #TODO: Replace with real data +const DumpChannels = [ + "https://ui-avatars.com/api/?name=a1&background=random&size=200", + "https://ui-avatars.com/api/?name=a2&background=random&size=200", + "https://ui-avatars.com/api/?name=a3&background=random&size=200", + "https://ui-avatars.com/api/?name=a4&background=random&size=200", + "https://ui-avatars.com/api/?name=a5&background=random&size=200", +] + +const DumpMessages = [ + { + picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp", + name: "Satoshi Nakamoto", + content: "#bitcoin", + }, + { + picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp", + name: "Design Review Chat", + content: "Document", + }, + { + picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp", + name: "R4IN80W", + content: "That is how you do it!", + }, + { + picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp", + name: "480 Design", + content: "Check out this new claymorphism design!", + }, + { + picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp", + name: "help! I'm in the hole", + content: "🎉", + }, + { + picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp", + name: "Pleb", + content: "You: GM!", + }, +] + +export const HomeMessagesScreen: FC = observer( + function HomeMessagesScreen() { + // Pull in one of our MST stores + // const { someStore, anotherStore } = useStores() + + // Pull in navigation via hook + // const navigation = useNavigation() + + return ( + + + + + + + + + + - - + + + {DumpChannels.map((uri, i) => ( + + + + ))} + + + + + - - - - + + + - - + + - - - - - - - - - - - - - + + ( + + + + + + + + )} + estimatedItemSize={50} + /> - - - - - - ) -}) + + ) + }, +) const $root: ViewStyle = { flex: 1, } const $container: ViewStyle = { - flex: 1, flexDirection: "row", flexWrap: "wrap", } @@ -79,8 +146,11 @@ const $sidebar: ViewStyle = { const $main: ViewStyle = { flex: 1, + flexDirection: "column", + gap: spacing.small, width: "100%", height: "100%", + paddingHorizontal: spacing.small, } const $pinList: ViewStyle = { @@ -128,3 +198,41 @@ const $addChannelButton: ViewStyle = { width: 50, height: 50, } + +const $activeContacts: ViewStyle = { + paddingHorizontal: spacing.small, + height: 40, + alignItems: "flex-start", + justifyContent: "center", + borderWidth: 1, + borderColor: colors.tint, + borderRadius: spacing.small / 2, +} + +const $messsages: ViewStyle = { + flex: 1, + paddingVertical: spacing.extraSmall, + paddingHorizontal: spacing.small, + borderWidth: 1, + borderColor: colors.tint, + borderRadius: spacing.small / 2, +} + +const $messageItem: ViewStyle = { + flex: 1, + flexDirection: "row", + alignItems: "center", + paddingVertical: spacing.extraSmall, +} + +const $messageItemAvatar: ImageStyle = { + width: 44, + height: 44, + borderRadius: 100, + marginRight: spacing.small, +} + +const $messageItemContent: TextStyle = { + width: 200, + color: colors.textDim, +} diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 2f96af97..d170ef8d 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -446,6 +446,8 @@ PODS: - React-Core - RNCAsyncStorage (1.17.11): - React-Core + - RNFlashList (1.4.3): + - React-Core - RNGestureHandler (2.9.0): - React-Core - RNReanimated (2.14.4): @@ -557,6 +559,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - RNBootSplash (from `../node_modules/react-native-bootsplash`) - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" + - "RNFlashList (from `../node_modules/@shopify/flash-list`)" - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNReanimated (from `../node_modules/react-native-reanimated`) - RNScreens (from `../node_modules/react-native-screens`) @@ -674,6 +677,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-bootsplash" RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" + RNFlashList: + :path: "../node_modules/@shopify/flash-list" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" RNReanimated: @@ -745,6 +750,7 @@ SPEC CHECKSUMS: ReactCommon: dbfbe2f7f3c5ce4ce44f43f2fd0d5950d1eb67c5 RNBootSplash: 364ec0f6a61d96bce40e8630d80d949c214a5749 RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60 + RNFlashList: ade81b4e928ebd585dd492014d40fb8d0e848aab RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128 RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f diff --git a/package.json b/package.json index 4f6ac5dc..7b6590a6 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@react-navigation/bottom-tabs": "^6.3.2", "@react-navigation/native": "^6.0.2", "@react-navigation/native-stack": "^6.0.2", + "@shopify/flash-list": "^1.4.3", "apisauce": "2.1.5", "date-fns": "^2.29.2", "expo": "^48.0.15", diff --git a/yarn.lock b/yarn.lock index 10361837..b3be77ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2241,6 +2241,14 @@ component-type "^1.2.1" join-component "^1.1.0" +"@shopify/flash-list@^1.4.3": + version "1.4.3" + resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.4.3.tgz#b7a4fe03d64f3c5ce9646859b49b9d95307f203d" + integrity sha512-jtIReAbwWzYBV0dQ6Io9wBX+pD0C4qQFMrb5/fkEvX8PYDgBl5KRYvpfr9WLLj8CV2Jsn1X0mYOsB+ysWrI/8g== + dependencies: + recyclerlistview "4.2.0" + tslib "2.4.0" + "@sideway/address@^4.1.3": version "4.1.4" resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0" @@ -7894,7 +7902,7 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash.debounce@^4.0.8: +lodash.debounce@4.0.8, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== @@ -10043,7 +10051,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@*, prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10472,6 +10480,15 @@ recast@^0.20.4: source-map "~0.6.1" tslib "^2.0.1" +recyclerlistview@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef" + integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A== + dependencies: + lodash.debounce "4.0.8" + prop-types "15.8.1" + ts-object-utils "0.0.5" + regenerate-unicode-properties@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c" @@ -11896,6 +11913,11 @@ ts-jest@29: semver "7.x" yargs-parser "^21.0.1" +ts-object-utils@0.0.5: + version "0.0.5" + resolved "https://registry.yarnpkg.com/ts-object-utils/-/ts-object-utils-0.0.5.tgz#95361cdecd7e52167cfc5e634c76345e90a26077" + integrity sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA== + tsconfig-paths@^3.14.1: version "3.14.2" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088" @@ -11906,6 +11928,11 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" From 5d69e82cc3ba0f1883cdc946bf29d6181d1e7b6f Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 10 May 2023 12:19:33 +0700 Subject: [PATCH 4/5] update home messages design --- app/navigators/TabNavigator.tsx | 11 +-- app/screens/HomeMessagesScreen.tsx | 126 +++++++++++++++++------------ app/theme/colors.ts | 16 +++- 3 files changed, 94 insertions(+), 59 deletions(-) diff --git a/app/navigators/TabNavigator.tsx b/app/navigators/TabNavigator.tsx index b770c7cf..ff961105 100644 --- a/app/navigators/TabNavigator.tsx +++ b/app/navigators/TabNavigator.tsx @@ -29,7 +29,7 @@ export type DemoTabScreenProps = CompositeScre const Tab = createBottomTabNavigator() -const inactiveIconColor = colors.textDim +const inactiveIconColor = colors.palette.cyan950 export function TabNavigator() { const { bottom } = useSafeAreaInsets() @@ -44,6 +44,7 @@ export function TabNavigator() { tabBarInactiveTintColor: colors.text, tabBarLabelStyle: $tabBarLabel, tabBarItemStyle: $tabBarItem, + tabBarShowLabel: false, }} > ( - + ), }} /> @@ -62,7 +63,7 @@ export function TabNavigator() { options={{ tabBarLabel: "Feed", tabBarIcon: ({ focused }) => ( - + ), }} /> @@ -73,7 +74,7 @@ export function TabNavigator() { options={{ tabBarLabel: "Create", tabBarIcon: ({ focused }) => ( - + ), }} /> @@ -83,7 +84,7 @@ export function TabNavigator() { options={{ tabBarLabel: "Discover", tabBarIcon: ({ focused }) => ( - + ), }} /> diff --git a/app/screens/HomeMessagesScreen.tsx b/app/screens/HomeMessagesScreen.tsx index 55cae575..f69d0ff7 100644 --- a/app/screens/HomeMessagesScreen.tsx +++ b/app/screens/HomeMessagesScreen.tsx @@ -3,9 +3,9 @@ import { observer } from "mobx-react-lite" import { View, ViewStyle, ImageStyle, TextStyle } from "react-native" import { NativeStackScreenProps } from "@react-navigation/native-stack" import { AppStackScreenProps } from "app/navigators" -import { AutoImage, Screen, Text } from "app/components" +import { AutoImage, Button, Screen, Text } from "app/components" import { spacing, colors } from "app/theme" -import { PlusIcon } from "lucide-react-native" +import { ChevronDownIcon, PlusIcon, SearchIcon } from "lucide-react-native" import { FlashList } from "@shopify/flash-list" // import { useNavigation } from "@react-navigation/native" // import { useStores } from "app/models" @@ -64,14 +64,12 @@ export const HomeMessagesScreen: FC = observer( // const navigation = useNavigation() return ( - + - - - - + + = observer( - - {DumpChannels.map((uri, i) => ( - - - - ))} - - - - - + + ( + + + + )} + ListFooterComponent={() => ( + +