From e4fd569e7398676129f2cbfbf8a960f9808a748b Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Fri, 17 Feb 2023 15:40:01 -0800 Subject: [PATCH] refactoring session component in mobile app --- app/mobile/App.js | 3 +- app/mobile/ios/Podfile.lock | 7 + app/mobile/package.json | 2 + .../src/context/useStoreContext.hook.js | 2 +- app/mobile/src/session/Session.jsx | 430 +++++++++++++++++- app/mobile/src/session/cards/Cards.jsx | 14 + app/mobile/src/session/cards/useCards.hook.js | 11 + .../src/session/cardsIcon/CardsIcon.jsx | 6 + app/mobile/src/session/channels/Channels.jsx | 14 + .../src/session/channels/useChannels.hook.js | 10 + app/mobile/src/session/contact/Contact.jsx | 10 + .../src/session/conversation/Conversation.jsx | 13 + .../conversation/useConversation.hook.js | 10 + app/mobile/src/session/details/Details.jsx | 14 + app/mobile/src/session/profile/Profile.jsx | 6 + .../src/session/profileIcon/ProfileIcon.jsx | 6 + app/mobile/src/session/registry/Registry.jsx | 14 + .../src/session/registry/useRegistry.hook.js | 10 + app/mobile/src/session/useSession.hook.js | 49 ++ app/mobile/src/session/welcome/Welcome.jsx | 27 ++ .../src/session/welcome/Welcome.styled.js | 57 +++ app/mobile/yarn.lock | 22 + net/web/src/session/welcome/Welcome.jsx | 2 +- 23 files changed, 732 insertions(+), 7 deletions(-) create mode 100644 app/mobile/src/session/cards/Cards.jsx create mode 100644 app/mobile/src/session/cards/useCards.hook.js create mode 100644 app/mobile/src/session/cardsIcon/CardsIcon.jsx create mode 100644 app/mobile/src/session/channels/Channels.jsx create mode 100644 app/mobile/src/session/channels/useChannels.hook.js create mode 100644 app/mobile/src/session/contact/Contact.jsx create mode 100644 app/mobile/src/session/conversation/Conversation.jsx create mode 100644 app/mobile/src/session/conversation/useConversation.hook.js create mode 100644 app/mobile/src/session/details/Details.jsx create mode 100644 app/mobile/src/session/profile/Profile.jsx create mode 100644 app/mobile/src/session/profileIcon/ProfileIcon.jsx create mode 100644 app/mobile/src/session/registry/Registry.jsx create mode 100644 app/mobile/src/session/registry/useRegistry.hook.js create mode 100644 app/mobile/src/session/welcome/Welcome.jsx create mode 100644 app/mobile/src/session/welcome/Welcome.styled.js diff --git a/app/mobile/App.js b/app/mobile/App.js index ada3e3f6..cb003fd7 100644 --- a/app/mobile/App.js +++ b/app/mobile/App.js @@ -10,7 +10,6 @@ import { ProfileContextProvider } from 'context/ProfileContext'; import { CardContextProvider } from 'context/CardContext'; import { ChannelContextProvider } from 'context/ChannelContext'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; -import { NavigationContainer } from '@react-navigation/native'; import { ConversationContextProvider } from 'context/ConversationContext'; import { LogBox } from 'react-native'; import { Root } from 'src/root/Root'; @@ -41,7 +40,7 @@ export default function App() { } /> } /> } /> - } /> + } /> diff --git a/app/mobile/ios/Podfile.lock b/app/mobile/ios/Podfile.lock index 644bf71c..da67571b 100644 --- a/app/mobile/ios/Podfile.lock +++ b/app/mobile/ios/Podfile.lock @@ -455,6 +455,9 @@ PODS: - React-RCTText - ReactCommon/turbomodule/core - Yoga + - RNScreens (3.20.0): + - React-Core + - React-RCTImage - RNVectorIcons (9.2.0): - React-Core - Yoga (1.14.0) @@ -504,6 +507,7 @@ DEPENDENCIES: - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)" - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNReanimated (from `../node_modules/react-native-reanimated`) + - RNScreens (from `../node_modules/react-native-screens`) - RNVectorIcons (from `../node_modules/react-native-vector-icons`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -607,6 +611,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-gesture-handler" RNReanimated: :path: "../node_modules/react-native-reanimated" + RNScreens: + :path: "../node_modules/react-native-screens" RNVectorIcons: :path: "../node_modules/react-native-vector-icons" Yoga: @@ -667,6 +673,7 @@ SPEC CHECKSUMS: RNFBMessaging: c686471358d20d54f716a8b7b7f10f8944c966ec RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128 + RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8 Yoga: 5ed1699acbba8863755998a4245daa200ff3817b diff --git a/app/mobile/package.json b/app/mobile/package.json index 3e24b9de..5612b57f 100644 --- a/app/mobile/package.json +++ b/app/mobile/package.json @@ -17,6 +17,7 @@ "@react-navigation/drawer": "^6.6.0", "@react-navigation/native": "^6.1.4", "@react-navigation/native-stack": "^6.9.10", + "@react-navigation/stack": "^6.3.14", "axios": "^1.3.3", "crypto-js": "^4.1.1", "react": "18.2.0", @@ -27,6 +28,7 @@ "react-native-reanimated": "^2.14.4", "react-native-rsa-native": "^2.0.5", "react-native-safe-area-context": "^4.5.0", + "react-native-screens": "^3.20.0", "react-native-sqlite-storage": "^6.0.1", "react-native-vector-icons": "^9.2.0", "react-router-dom": "^6.8.1", diff --git a/app/mobile/src/context/useStoreContext.hook.js b/app/mobile/src/context/useStoreContext.hook.js index 4e0e1912..496f3548 100644 --- a/app/mobile/src/context/useStoreContext.hook.js +++ b/app/mobile/src/context/useStoreContext.hook.js @@ -1,7 +1,7 @@ import { useEffect, useState, useRef, useContext } from 'react'; import SQLite from "react-native-sqlite-storage"; -const DATABAG_DB = 'db_v_102.db'; +const DATABAG_DB = 'db_v_103.db'; export function useStoreContext() { const [state, setState] = useState({}); diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 8c64af28..ec51ed82 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -1,12 +1,436 @@ -import { Text } from 'react-native'; -import { styles } from './Session.styled'; +import { View, TouchableOpacity, StatusBar, Text, Image } from 'react-native'; +import { useState, useEffect, useContext } from 'react'; +import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { createDrawerNavigator } from '@react-navigation/drawer'; +import { createStackNavigator } from '@react-navigation/stack'; +import { NavigationContainer } from '@react-navigation/native'; +import Ionicons from 'react-native-vector-icons/AntDesign'; import { useSession } from './useSession.hook'; +import { styles } from './Session.styled'; +import Colors from 'constants/Colors'; +import { Profile } from './profile/Profile'; +import { CardsTitle, CardsBody, Cards } from './cards/Cards'; +import { useCards } from './cards/useCards.hook'; +import { RegistryTitle, RegistryBody, Registry } from './registry/Registry'; +import { useRegistry } from './registry/useRegistry.hook'; +import { Contact, ContactTitle } from './contact/Contact'; +import { Details, DetailsHeader, DetailsBody } from './details/Details'; +import { Conversation, ConversationHeader, ConversationBody } from './conversation/Conversation'; +import { Welcome } from './welcome/Welcome'; +import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels'; +import { useConversation } from './conversation/useConversation.hook'; +import { useChannels } from './channels/useChannels.hook'; +import { CommonActions } from '@react-navigation/native'; +import { ConversationContext } from 'context/ConversationContext'; +import { ProfileIcon } from './profileIcon/ProfileIcon'; +import { CardsIcon } from './cardsIcon/CardsIcon'; +import splash from 'images/session.png'; + +const ConversationStack = createStackNavigator(); +const ProfileStack = createStackNavigator(); +const ContactStack = createStackNavigator(); +const ProfileDrawer = createDrawerNavigator(); +const ContactDrawer = createDrawerNavigator(); +const DetailDrawer = createDrawerNavigator(); +const CardDrawer = createDrawerNavigator(); +const RegistryDrawer = createDrawerNavigator(); +const Tab = createBottomTabNavigator(); export function Session() { const { state, actions } = useSession(); + const [selectedConversation, setSelectedConversation] = useState(null); + const [selectedContact, setSelectedContact] = useState(null); - return SESSION + // tabbed containers + const ConversationStackScreen = () => { + + const setConversation = (navigation, cardId, channelId, revision) => { + navigation.navigate('conversation'); + setSelectedConversation({ cardId, channelId, revision }); + } + const clearConversation = (navigation) => { + navigation.dispatch( + CommonActions.reset({ + index: 0, + routes: [ + { name: 'channels' }, + ], + }) + ); + } + const setDetail = (navigation) => { + navigation.navigate('details'); + } + const clearDetail = (navigation) => { + navigation.goBack(); + } + + const conversation = useConversation(); + const channels = useChannels(); + const conversationContext = useContext(ConversationContext); + + useEffect(() => { + if (selectedConversation) { + const { cardId, channelId } = selectedConversation || {} + conversationContext.actions.setConversation(cardId, channelId); + } + else { + conversationContext.actions.clearConversation(); + } + }, [selectedConversation]); + + return ( + ({ headerShown: true, headerTintColor: Colors.primary })} + screenListeners={{ state: (e) => { if (e?.data?.state?.index === 0 && selectedConversation) { setSelectedConversation(null); }}, }}> + + }}> + {(props) => setConversation(props.navigation, cardId, channelId, revision)} />} + + + }}> + {(props) => } + + + }}> + {(props) => clearConversation(props.navigation)} />} + + + ); + } + const ProfileStackScreen = () => { + return ( + ({ headerShown: true, headerTintColor: Colors.primary })}> + + + ); + } + const ContactStackScreen = () => { + const setCardStack = (navigation, contact) => { + setSelectedContact(contact); + navigation.navigate('contact') + } + const clearCardStack = (navigation) => { + navigation.goBack(); + } + const setRegistryStack = (navigation) => { + navigation.navigate('registry'); + } + const clearRegistryStack = (navigation) => { + navigation.goBack(); + } + + const registry = useRegistry(); + const cards = useCards(); + + return ( + ({ headerShow: true, headerTintColor: Colors.primary })} + initialRouteName="cards"> + + }}> + {(props) => setCardStack(props.navigation, contact)} />} + + + }}> + {(props) => clearCardStack(props.navigation)} />} + + + }}> + {(props) => setCardStack(props.navigation, contact)} />} + + + ); + } + + const HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav, setDetails, resetConversation, clearReset }) => { + + const [channel, setChannel] = useState(null); + const setConversation = (cardId, channelId, revision) => { + setChannel({ cardId, channelId, revision }); + }; + const clearConversation = () => { + setChannel(null); + }; + const setProfile = () => { + profileNav.openDrawer(); + }; + const setChannelDetails = (channel) => { + setDetails(channel); + detailNav.openDrawer(); + }; + + const openProfile = () => { + profileNav.openDrawer(); + } + const openCards = () => { + cardNav.openDrawer(); + } + const isCardOpen = () => { + return cardNav.getState().history.length > 1; + } + + const conversation = useContext(ConversationContext); + + useEffect(() => { + if (resetConversation) { + detailNav.closeDrawer(); + setChannel(null); + setDetails(null); + clearReset(); + } + }, [resetConversation]); + + useEffect(() => { +console.log("CHANNEL IS: ", channel); + if (channel) { + const { cardId, channelId } = channel; + conversation.actions.setConversation(cardId, channelId); + } + else { + conversation.actions.clearConversation(); + } + }, [channel]); + + return ( + + + + + + Profile + + + + Contacts + + + + + + + + { channel && ( + + )} + { !channel && ( + + )} + + + ) + } + + const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact, setDetails, clearReset, resetConversation }) => { + + const openRegistry = () => { + registryNav.openDrawer(); + }; + setCardContact = (contact) => { + setContact(contact); + contactNav.openDrawer(); + }; + + const params = { + profileNav, + registryNav, + detailNav, + contactNav, + setDetails, + setContact, + clearReset, + resetConversation, + }; + + return ( + }> + + {(props) => } + + + ); + }; + + const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact, setDetails, clearReset, resetConversation }) => { + + const setRegistryContact = (contact) => { + setContact(contact); + contactNav.openDrawer(); + }; + + const params = { + profileNav, + detailNav, + contactNav, + setDetails, + setContact, + clearReset, + resetConversation, + }; + + return ( + }> + + {(props) => } + + + ); + }; + + const ContactDrawerScreen = ({ detailNav, profileNav, setDetails, resetConversation, clearReset }) => { + + const [selected, setSelected] = useState(null); + const setContact = (contact) => { + setSelected(contact); + } + + const params = { + profileNav, + detailNav, + setDetails, + setContact, + clearReset, + resetConversation, + }; + + return ( + }> + + {(props) => } + + + ); + } + + const DetailDrawerScreen = ({ profileNav }) => { + + const [selected, setSelected] = useState(null); + const [resetConversation, setResetConversation] = useState(false); + const setDetails = (channel) => { + setSelected(channel); + }; + const clearConversation = () => { + setResetConversation(true); + } + const clearReset = () => { + setResetConversation(false); + } + + const params = { + profileNav, + setDetails, + clearReset, + resetConversation, + }; + + return ( +
} + > + + {(props) => } + + + ); + } + + const [cardsActive, setCardsActive] = useState(false); + + return ( + + + { state.firstRun == true && ( + + + Welcome To Databag + Communication for the Decentralized Web + + + + + + Setup Your Profile + + + + Connect With People + + + + Start a Conversation + + + Get Started + + + + )} + { state.firstRun == false && ( + + { state.tabbed === false && ( + }> + + {(props) => } + + + )} + { state.tabbed === true && ( + setCardsActive(e?.data?.state?.index === 2) }} + screenOptions={({ route }) => ({ + tabBarStyle: styles.tabBar, + headerShown: false, + tabBarIcon: ({ focused, color, size }) => { + if (route.name === 'Profile') { + return + } + if (route.name === 'Conversation') { + return ; + } + if (route.name === 'Contacts') { + return ; + } + }, + tabBarShowLabel: false, + tabBarActiveTintColor: Colors.white, + tabBarInactiveTintColor: Colors.disabled, + })}> + + + + + )} + + + )} + + + ); } diff --git a/app/mobile/src/session/cards/Cards.jsx b/app/mobile/src/session/cards/Cards.jsx new file mode 100644 index 00000000..b2daa096 --- /dev/null +++ b/app/mobile/src/session/cards/Cards.jsx @@ -0,0 +1,14 @@ +import { Text } from 'react-native'; + +export function CardsTitle({ state, actions, openRegistry }) { + return CardsTitle; +} + +export function CardsBody({ state, actions, openContact }) { + return CardsBody; +} + +export function Cards({ openRegistry, openContact }) { + return Cards; +} + diff --git a/app/mobile/src/session/cards/useCards.hook.js b/app/mobile/src/session/cards/useCards.hook.js new file mode 100644 index 00000000..e75d7cad --- /dev/null +++ b/app/mobile/src/session/cards/useCards.hook.js @@ -0,0 +1,11 @@ +import { useState } from 'react'; + +export function useCards() { + const [state, setState] = useState({}); + + const actions = { + }; + + return { state, actions }; +} + diff --git a/app/mobile/src/session/cardsIcon/CardsIcon.jsx b/app/mobile/src/session/cardsIcon/CardsIcon.jsx new file mode 100644 index 00000000..9d329a0f --- /dev/null +++ b/app/mobile/src/session/cardsIcon/CardsIcon.jsx @@ -0,0 +1,6 @@ +import { Text } from 'react-native'; + +export function CardsIcon({ size, color, active }) { + return CardsIcon; +} + diff --git a/app/mobile/src/session/channels/Channels.jsx b/app/mobile/src/session/channels/Channels.jsx new file mode 100644 index 00000000..5f75d0a3 --- /dev/null +++ b/app/mobile/src/session/channels/Channels.jsx @@ -0,0 +1,14 @@ +import { Text } from 'react-native'; + +export function ChannelsTitle({ state, actions }) { + return ChannelsTitle +} + +export function ChannelsBody({ state, actions, openConversation }) { + return ChannelsBody +} + +export function Channels({ openConversation }) { + return Channels; +} + diff --git a/app/mobile/src/session/channels/useChannels.hook.js b/app/mobile/src/session/channels/useChannels.hook.js new file mode 100644 index 00000000..bfd57822 --- /dev/null +++ b/app/mobile/src/session/channels/useChannels.hook.js @@ -0,0 +1,10 @@ +import { useState } from 'react'; + +export function useChannels() { + const [state, setState] = useState({}); + + const actions = {}; + + return { state, actions }; +} + diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx new file mode 100644 index 00000000..f5e57ac1 --- /dev/null +++ b/app/mobile/src/session/contact/Contact.jsx @@ -0,0 +1,10 @@ +import { Text } from 'react-native'; + +export function ContactTitle({ contact, closeContact }) { + ContactTitle +} + +export function Contact({ contact, closeContact }) { + Contact +} + diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx new file mode 100644 index 00000000..75133599 --- /dev/null +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -0,0 +1,13 @@ +import { Text, } from 'react-native'; + +export function ConversationHeader({ closeConversation, openDetails, state, actions }) { + return ConversationHeader; +} + +export function ConversationBody({ state, actions }) { + return ConversationBody +} + +export function Conversation({ closeConversation, openDetails }) { + return Conversation; +} diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js new file mode 100644 index 00000000..59d99ddd --- /dev/null +++ b/app/mobile/src/session/conversation/useConversation.hook.js @@ -0,0 +1,10 @@ +import { useState } from 'react'; + +export function useConversation() { + const [state, setState] = useState({}); + + const actions = {}; + + return { state, actions }; +} + diff --git a/app/mobile/src/session/details/Details.jsx b/app/mobile/src/session/details/Details.jsx new file mode 100644 index 00000000..b42e4ddb --- /dev/null +++ b/app/mobile/src/session/details/Details.jsx @@ -0,0 +1,14 @@ +import { Text } from 'react-native'; + +export function DetailsHeader() { + return DetailsHeader +} + +export function DetailsBody({ channel, clearConversation }) { + return DetailsBody +} + +export function Details({ channel, clearConversation }) { + return Details +} + diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx new file mode 100644 index 00000000..65b347d2 --- /dev/null +++ b/app/mobile/src/session/profile/Profile.jsx @@ -0,0 +1,6 @@ +import { Text } from 'react-native'; + +export function Profile({ navigation }) { + return Profile; +} + diff --git a/app/mobile/src/session/profileIcon/ProfileIcon.jsx b/app/mobile/src/session/profileIcon/ProfileIcon.jsx new file mode 100644 index 00000000..4506b9ee --- /dev/null +++ b/app/mobile/src/session/profileIcon/ProfileIcon.jsx @@ -0,0 +1,6 @@ +import { Text } from 'react-native'; + +export function ProfileIcon({ size, color }) { + return ProfileIcon +} + diff --git a/app/mobile/src/session/registry/Registry.jsx b/app/mobile/src/session/registry/Registry.jsx new file mode 100644 index 00000000..a9f5f492 --- /dev/null +++ b/app/mobile/src/session/registry/Registry.jsx @@ -0,0 +1,14 @@ +import { Text } from 'react-native'; + +export function RegistryTitle({ state, actions }) { + return RegistryTitle +} + +export function RegistryBody({ state, actions, openContact }) { + return RegistryBody +} + +export function Registry({ closeRegistry, openContact }) { + return Registry +} + diff --git a/app/mobile/src/session/registry/useRegistry.hook.js b/app/mobile/src/session/registry/useRegistry.hook.js new file mode 100644 index 00000000..f391d417 --- /dev/null +++ b/app/mobile/src/session/registry/useRegistry.hook.js @@ -0,0 +1,10 @@ +import { useState } from 'react'; + +export function useRegistry() { + const [state, setState] = useState({}); + + const actions = {}; + + return { state, actions }; +} + diff --git a/app/mobile/src/session/useSession.hook.js b/app/mobile/src/session/useSession.hook.js index 751d3845..887f7f30 100644 --- a/app/mobile/src/session/useSession.hook.js +++ b/app/mobile/src/session/useSession.hook.js @@ -1,11 +1,60 @@ import { useRef, useState, useEffect, useContext } from 'react'; +import { useWindowDimensions } from 'react-native'; +import { useNavigate } from 'react-router-dom'; +import config from 'constants/Config'; +import { StoreContext } from 'context/StoreContext'; export function useSession() { const [state, setState] = useState({ + tabbled: null, + subWidth: '50%', + baseWidth: '50%', + cardId: null, + converstaionId: null, + firstRun: null, }); + const store = useContext(StoreContext); + const dimensions = useWindowDimensions(); + const navigate = useNavigate(); + const tabbed = useRef(null); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + useEffect(() => { + checkFirstRun(); + }, []); + + const checkFirstRun = async () => { + const firstRun = await store.actions.getFirstRun(); + updateState({ firstRun }); + } + + useEffect(() => { + if (tabbed.current !== true) { + if (dimensions.width > config.tabbedWidth) { + const width = Math.floor((dimensions.width * 33) / 100); + tabbed.current = false; + updateState({ tabbed: false, baseWidth: width + 50, subWidth: width }); + } + else { + tabbed.current = true; + updateState({ tabbed: true }); + } + } + }, [dimensions]); + const actions = { + setCardId: (cardId) => { + updateState({ cardId }); + }, + clearFirstRun: () => { + updateState({ firstRun: false }); + store.actions.setFirstRun(); + }, }; return { state, actions }; diff --git a/app/mobile/src/session/welcome/Welcome.jsx b/app/mobile/src/session/welcome/Welcome.jsx new file mode 100644 index 00000000..755d8e4d --- /dev/null +++ b/app/mobile/src/session/welcome/Welcome.jsx @@ -0,0 +1,27 @@ +import { useEffect } from 'react'; +import { Image, View, TouchableOpacity, Text } from 'react-native'; +import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; +import { styles } from './Welcome.styled'; +import { Colors } from 'constants/Colors'; +import Ionicons from 'react-native-vector-icons/AntDesign'; + +import session from 'images/session.png'; + +export function Welcome() { + + return ( + + Databag + Communication for the decentralized web + + + Setup your profile + + Connect with people + + Start a conversation + + + ); +} + diff --git a/app/mobile/src/session/welcome/Welcome.styled.js b/app/mobile/src/session/welcome/Welcome.styled.js new file mode 100644 index 00000000..f9f6d427 --- /dev/null +++ b/app/mobile/src/session/welcome/Welcome.styled.js @@ -0,0 +1,57 @@ +import { StyleSheet } from 'react-native'; +import { Colors } from 'constants/Colors'; + +export const styles = StyleSheet.create({ + container: { + height: '100%', + backgroundColor: Colors.background, + display: 'flex', + flexDirection: 'column', + }, + image: { + width: '100%', + flexGrow: 1, + flex: 1, + width: null, + height: null, + resizeMode: 'contain', + marginBottom: 16, + opacity: 0.3, + }, + header: { + width: '100%', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'center', + fontSize: 20, + paddingTop: 16, + color: Colors.text, + }, + label: { + width: '100%', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'center', + paddingBottom: 16, + color: Colors.text, + }, + message: { + width: '100%', + alignItems: 'center', + justifyContent: 'center', + padding: 4, + textAlign: 'center', + }, + steps: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + paddingBottom: 16, + flexDirection: 'row', + }, + stepstext: { + color: Colors.text, + padding: 8, + }, +}); + diff --git a/app/mobile/yarn.lock b/app/mobile/yarn.lock index 6d5830b7..96399a94 100644 --- a/app/mobile/yarn.lock +++ b/app/mobile/yarn.lock @@ -1771,6 +1771,15 @@ dependencies: nanoid "^3.1.23" +"@react-navigation/stack@^6.3.14": + version "6.3.14" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.14.tgz#de282d8bc5616bfb12fa4c89f18792193563fb7a" + integrity sha512-a1ivkESWsZYimUQHr3TA2Nu2g3FALEyJqQ8bJxXkEcBp+5cglOakhfKbbCuNV2knC/9zjUmP9N0Q3Jh3fK9nfw== + dependencies: + "@react-navigation/elements" "^1.3.15" + color "^4.2.3" + warn-once "^0.1.0" + "@remix-run/router@1.3.2": version "1.3.2" resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz" @@ -6163,6 +6172,11 @@ react-devtools-core@^4.26.1: shell-quote "^1.6.1" ws "^7" +react-freeze@^1.0.0: + version "1.0.3" + resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d" + integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g== + "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz" @@ -6237,6 +6251,14 @@ react-native-safe-area-context@^4.5.0: resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz" integrity sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ== +react-native-screens@^3.20.0: + version "3.20.0" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.20.0.tgz#4d154177395e5541387d9a05bc2e12e54d2fb5b1" + integrity sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg== + dependencies: + react-freeze "^1.0.0" + warn-once "^0.1.0" + react-native-sqlite-storage@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/react-native-sqlite-storage/-/react-native-sqlite-storage-6.0.1.tgz" diff --git a/net/web/src/session/welcome/Welcome.jsx b/net/web/src/session/welcome/Welcome.jsx index 46dfea65..afd6f76a 100644 --- a/net/web/src/session/welcome/Welcome.jsx +++ b/net/web/src/session/welcome/Welcome.jsx @@ -18,7 +18,7 @@ export function Welcome() {
Connect with people
-
Start a conversation topic
+
Start a conversation