adding screen headers

app/mobile/src/session/Session.jsx

@@ -10,7 +10,6 @@ import { useSession } from './useSession.hook';
 import { styles } from './Session.styled';
 import Colors from 'constants/Colors';
 import { ProfileTitle, Profile } from './profile/Profile';
-import { Channels } from './channels/Channels';
 import { CardsTitle, CardsBody, Cards } from './cards/Cards';
 import { useCards } from './cards/useCards.hook';
 import { RegistryTitle, RegistryBody, Registry } from './registry/Registry';
@@ -19,6 +18,8 @@ import { Contact, ContactTitle } from './contact/Contact';
 import { Details } from './details/Details';
 import { Conversation } from './conversation/Conversation';
 import { Welcome } from './welcome/Welcome';
+import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
+import { useChannels } from './channels/useChannels.hook';
 
 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
@@ -67,10 +68,16 @@ export function Session() {
       navigation.goBack();
     }
 
+    const channels = useChannels();
+
     return (
-      <ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
-        <ConversationStack.Screen name="channels">
-          {(props) => <ChannelsTabScreen openConversation={setConversation} navigation={props.navigation} />}
+      <ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: true })}>
+        <ConversationStack.Screen name="channels" options={{
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => { console.log(props); return <ChannelsTitle state={channels.state} actions={channels.actions} /> }
+          }}>
+          {(props) => <ChannelsBody state={channels.state} actions={channels.actions} openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
         </ConversationStack.Screen>
         <ConversationStack.Screen name="conversation">
           {(props) => <ConversationTabScreen channel={selected} closeConversation={clearConversation} openDetails={setDetail} navigation={props.navigation} />}
@@ -81,11 +88,6 @@ export function Session() {
       </ConversationStack.Navigator>
     );
   }
-  const ChannelsTabScreen = ({ navigation, openConversation }) => {
-    return (
-      <Channels openConversation={(cardId, channelId) => openConversation(navigation, cardId, channelId)} />
-    )
-  }
   const ConversationTabScreen = ({ navigation, channel, closeConversation, openDetails }) => {
     return <Conversation channel={channel} closeConversation={() => closeConversation(navigation)} openDetails={() => openDetails(navigation)} />
   }
@@ -320,9 +322,7 @@ export function Session() {
             tabBarActiveTintColor: Colors.white,
             tabBarInactiveTintColor: Colors.disabled,
           })}>
-          <Tab.Screen name="Conversation">
-            {(props) => (<SafeAreaView style={styles.tabframe} edges={['top']}><ConversationStackScreen /></SafeAreaView>)}
-          </Tab.Screen>
+          <Tab.Screen name="Conversation" component={ConversationStackScreen} />
           <Tab.Screen name="Profile" component={ProfileStackScreen} />
           <Tab.Screen name="Contacts" component={ContactStackScreen} />
         </Tab.Navigator>

app/mobile/src/session/channels/Channels.jsx

@@ -7,56 +7,59 @@ import { ChannelItem } from './channelItem/ChannelItem';
 import Colors from 'constants/Colors';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
-export function Channels({ openConversation }) {
-  const { state, actions } = useChannels();
+export function ChannelsTitle({ state, actions }) {
   return (
-    <View style={styles.container}>
-      { state.tabbed && (
-        <>
-          <View style={styles.topbar}>
-            <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
-              <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
-                  autoCapitalize="none" placeholderTextColor={Colors.disabled}  placeholder="Topic" />
-              <View style={styles.space} />
-            </View>
-            <TouchableOpacity style={styles.add}>
-              <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
-              <Text style={styles.newtext}>New</Text>
-            </TouchableOpacity>
-          </View>
-          <FlatList style={styles.channels}
-            data={state.channels}
-            renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
-            keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
-          />
-        </>
-      )}
-      { !state.tabbed && (
-        <>
-          <SafeAreaView edges={['left']} style={styles.searchbar}>
-            <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
-              <TextInput style={styles.inputfield} value={state.topic} onChangeText={actions.setTopic}
-                  autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topic" />
-              <View style={styles.space} />
-            </View>
-          </SafeAreaView>
-          <SafeAreaView style={styles.channels} edges={['left']}>
-            <FlatList 
-              data={state.channels}
-              renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
-              keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
-            />
-          </SafeAreaView>
-          <SafeAreaView style={styles.bottomArea} edges={['left']}>
-            <TouchableOpacity style={styles.addbottom}>
-              <Ionicons name={'message1'} size={16} color={Colors.white} />
-              <Text style={styles.newtext}>New Topic</Text>
-            </TouchableOpacity>
-          </SafeAreaView>
-        </>
-      )}
+    <View style={styles.title}>
+      <View style={styles.inputwrapper}>
+        <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+        <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
+            autoCapitalize="none" placeholderTextColor={Colors.disabled}  placeholder="Topic" />
+        <View style={styles.space} />
+      </View>
+      <TouchableOpacity style={styles.add}>
+        <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
+        <Text style={styles.newtext}>New</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+export function ChannelsBody({ state, actions, openConversation }) {
+  return (
+    <FlatList style={styles.channels}
+      data={state.channels}
+      renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
+      keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+    />
+  );
+
+}
+
+export function Channels({ openConversation }) {
+  const { state, actions } = useChannels();
+  return (
+    <View style={styles.container}>
+      <SafeAreaView edges={['left']} style={styles.searchbar}>
+        <View style={styles.inputwrapper}>
+          <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+          <TextInput style={styles.inputfield} value={state.topic} onChangeText={actions.setTopic}
+              autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topic" />
+          <View style={styles.space} />
+        </View>
+      </SafeAreaView>
+      <SafeAreaView style={styles.channels} edges={['left']}>
+        <FlatList 
+          data={state.channels}
+          renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
+          keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+        />
+      </SafeAreaView>
+      <SafeAreaView style={styles.bottomArea} edges={['left']}>
+        <TouchableOpacity style={styles.addbottom}>
+          <Ionicons name={'message1'} size={16} color={Colors.white} />
+          <Text style={styles.newtext}>New Topic</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
     </View>
   );
 }

app/mobile/src/session/channels/Channels.styled.js

@@ -8,6 +8,12 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'column',
   },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   topbar: {
     borderTopWidth: 1,
     borderBottomWidth: 1,
@@ -32,6 +38,9 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     alignItems: 'center',
     flexGrow: 1,
+    flexShrink: 1,
+    paddingTop: 4,
+    paddingBottom: 4,
   },
   inputfield: {
     flex: 1,

app/mobile/src/session/profile/Profile.jsx

@@ -13,7 +13,9 @@ import { BlockedContacts } from './blockedContacts/BlockedContacts';
 export function ProfileTitle(props) {
   const { state, actions } = useProfile();
   return (
-    <Text style={styles.title}>{ `${state.handle}@${state.node}` }</Text>
+    <View style={styles.title}>
+      <Text style={styles.titleText}>{ `${state.handle}@${state.node}` }</Text>
+    </View>
   )
 } 
 

app/mobile/src/session/profile/Profile.styled.js

@@ -14,8 +14,16 @@ export const styles = StyleSheet.create({
   drawer: {
     paddingTop: 16,
   },
-  title: {
+  titleText: {
     fontSize: 18,
+  }, 
+  title: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    flex: 1,
+    width: '100%',
+    textAlign: 'start',
   },
   body: {
     paddingTop: 16,
@@ -29,8 +37,7 @@ export const styles = StyleSheet.create({
   headerText: {
     fontSize: 16,
     paddingRight: 4,
-    textDecorationLine: 'underline',
-    color: Colors.primary,
+    color: Colors.text,
   },
   camera: {
     position: 'absolute',