Vertically align icon and text

user_13369863 0
Viewed 222

Working on a React-Native Project:

How can I vertically align the settings icon and settings text?

enter image description here

Here is my working code for the picture above:

<HomeStack.Navigator headerMode="screen" >
    <HomeStack.Screen name = "Home" children={() => <HomeScreen} />} options={{
      title:'Overview',
      headerTitleAlign: 'center',
      headerStyle: {
        backgroundColor: '#e67e22',
      },
      headerTitleStyle: {
        color: 'white'
      },
      headerRight: () => (

        <Icon.Button name="cog-outline" size={30} 
        backgroundColor="#e67e22" color="white" paddingLeft= {15} >


              <Text>Settings</Text>

        </Icon.Button>
      ),
      headerLeft: () => (
        
      <Icon.Button name="exit-outline" size={30} 
      backgroundColor="#e67e22" color="white" paddingLeft= {15} onPress={() => {signOut()}}>LogOut</Icon.Button>

      )
    }}/>
  </HomeStack.Navigator>
react-native css
1 Answers

Final App:

enter image description here

Worknig App: Expo Snack

import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AntDesign } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
function HomeScreen({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}></View>
  );
}
const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Overview',
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: '#e67e22',
          },
          headerTitleStyle: {
            color: 'white',
          },
          headerRight: () => (
            <TouchableOpacity
            onPress={()=>console.log("Settings button pressed")}
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                marginRight: 10,
              }}>
              <AntDesign name="setting" size={24} color="white" />
              <Text style={{ color: 'white' }}>Settings</Text>
            </TouchableOpacity>
          ),
          headerLeft: () => (
            <TouchableOpacity
            onPress={()=> console.log("logout button pressed")}
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                marginLeft: 10,
              }}>
              <MaterialCommunityIcons
                name="logout-variant"
                size={24}
                color="white"
              />
              <Text style={{ color: 'white', marginLeft: 10 }}>Logout</Text>
            </TouchableOpacity>
          ),
        }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}
user_56691200
Related