CODEWITHSUNDEEP
cssimagereact-nativeflexbox
CoolMAn
CoolMAn

Reputation: 1861

React Native Image not being centered with View

I am trying to center an Image within a View both horizontally and vertically the problem is that no matter what I put in the code it still seems to be in the same position all the time. I have this code for another View from another screen and it's exactly how I need it to be, however for the other pages it's not responding.

Here is my code:

<View style={styles.header}>
        <Icon
            raised
            name='chevron-left'
            type='octicon'
            color='#f50'
            onPress={() => this.props.navigation.goBack()}
            containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
        <Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
       </View>

const styles = StyleSheet.create({
        header:{
        backgroundColor:'#ff4714', 
        height:SCREEN_HEIGHT/8,
        flexDirection: 'row' 

    }
});

EDIT: I've removed all the styling for the <Image> except for width and height and the image stays at the same place. I don't know what to make of this

Here is an expo snack https://snack.expo.io/SyCO!ree8

Upvotes: 0

Views: 557

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12235

You need to add justifyContent:'center' and alignSelf:'center' to your image style,

Just check the code :

 <View style={{
        flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
      }}>
       <Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}}         />
      </View>

And this is expo snack : expo-snack

UPDATE:

HERE IS MY UPDATED EXPO SNACK:

check here

Hope it helps

Upvotes: 1

Volodymyr Bobyr
Volodymyr Bobyr

Reputation: 424

Try adding:

alignItems: 'center',
justifyContent: 'center'

to your header style

You might also need to add flex:1, depending on the state of your View

Upvotes: 0

Related Questions