styling screen header

This commit is contained in:
balzack 2022-09-27 22:57:30 -07:00
parent 1d2b807922
commit 2dd42e3f97
2 changed files with 7 additions and 5 deletions

View File

@ -71,11 +71,11 @@ export function Session() {
const channels = useChannels(); const channels = useChannels();
return ( return (
<ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: true })}> <ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}>
<ConversationStack.Screen name="channels" options={{ <ConversationStack.Screen name="channels" options={{
headerStyle: { backgroundColor: Colors.titleBackground }, headerStyle: { backgroundColor: Colors.titleBackground },
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerTitle: (props) => { console.log(props); return <ChannelsTitle state={channels.state} actions={channels.actions} /> } headerTitle: (props) => <ChannelsTitle state={channels.state} actions={channels.actions} />
}}> }}>
{(props) => <ChannelsBody state={channels.state} actions={channels.actions} openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />} {(props) => <ChannelsBody state={channels.state} actions={channels.actions} openConversation={(cardId, channelId) => setConversation(props.navigation, cardId, channelId)} />}
</ConversationStack.Screen> </ConversationStack.Screen>
@ -96,7 +96,7 @@ export function Session() {
} }
const ProfileStackScreen = () => { const ProfileStackScreen = () => {
return ( return (
<ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: true })}> <ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}>
<ProfileStack.Screen name="profile" component={Profile} options={{ headerStyle: { backgroundColor: Colors.titleBackground }, headerTitle: (props) => <ProfileTitle {...props} /> }} /> <ProfileStack.Screen name="profile" component={Profile} options={{ headerStyle: { backgroundColor: Colors.titleBackground }, headerTitle: (props) => <ProfileTitle {...props} /> }} />
</ProfileStack.Navigator> </ProfileStack.Navigator>
); );
@ -121,11 +121,11 @@ export function Session() {
const cards = useCards(); const cards = useCards();
return ( return (
<ContactStack.Navigator screenOptions={({ route }) => ({ headerShow: true })}> <ContactStack.Navigator screenOptions={({ route }) => ({ headerShow: true, headerTintColor: Colors.primary })}>
<ContactStack.Screen name="cards" options={{ <ContactStack.Screen name="cards" options={{
headerStyle: { backgroundColor: Colors.titleBackground }, headerStyle: { backgroundColor: Colors.titleBackground },
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerTitle: (props) => { console.log(props); return <CardsTitle state={cards.state} actions={cards.actions} openRegistry={setRegistryStack} /> } headerTitle: (props) => <CardsTitle state={cards.state} actions={cards.actions} openRegistry={setRegistryStack} />
}}> }}>
{(props) => <CardsBody state={cards.state} actions={cards.actions} openContact={(contact) => setCardStack(props.navigation, contact)} />} {(props) => <CardsBody state={cards.state} actions={cards.actions} openContact={(contact) => setCardStack(props.navigation, contact)} />}
</ContactStack.Screen> </ContactStack.Screen>

View File

@ -24,6 +24,8 @@ export const styles = StyleSheet.create({
flex: 1, flex: 1,
width: '100%', width: '100%',
textAlign: 'start', textAlign: 'start',
alignItems: 'center',
justifyContent: 'center',
}, },
body: { body: {
paddingTop: 16, paddingTop: 16,