React Native center image horizontally in header

Issue

My header.js looks like this:

import React from 'react'
import { Image, TouchableOpacity, Dimensions } from 'react-native'
import Icon from "react-native-vector-icons/Ionicons"
import { View } from "react-native"

export class Logo extends React.Component {
  render() {
    return (
      <View>
        <Image
          source={require('../../assets/logo.png')}
          resizeMode="contain"
          style={{ width: 98, alignSelf: 'center' }}
        />
      </View>
    );
  }
}

I try to get logo.png centered in header bar, but alignSelf property does not affect it in any way. Using Android emulator. How can I center the logo horizontally?

Solution

Add alignItems: 'center', justifyContent: 'center' in image parent view :

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: '100%'}}>
  <Image
    source={require('../../assets/logo.png')}
    resizeMode="contain"
    style={{ width: 98 }}
  />
</View>

And add headerLayoutPreset: 'center' in your stackNavigator.

import { createStackNavigator } from "react-navigation";

const StackNavigator = createStackNavigator({
  ComponentKey: {
    screen: Component
  },
  ...,
  ..., 
}, {
  headerLayoutPreset: 'center'
});

Answered By - Kishan Bharda