React-native: Center an image?

[pwnsdx]

Hello everyone,

I'm trying to make an image centered using reactjs but it don't work.

Here is my code:

                <Image
                  source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
                  style={styles.image}
                />

var styles = StyleSheet.create({
  image: {
        width: 40,
        height: 40,
        flex: 1
  }
});

I've tried alignItems, textAlign, justifyContent = center but it still don't want to work.

Anyone can help me please?

Thanks!

[ide]

Try this on your parent component:

  style={{
    justifyContent: 'center',
    alignItems: 'center',
  }}

No need for 'flex: 1' on the image -- that just sets its size.

[pwnsdx]

Hey @ide, thanks for helping me. I tried and unfortunately it didn't worked.

Here is the code I've done:

            <View style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
                <Image
                    source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
                    style={styles.image}>

                    <Text style={{backgroundColor: 'transparent'}}>Inside{'\n'}Test</Text>
                </Image>
            </View>

I have another problem, I'm also trying to get Background Image via Nesting ( https://facebook.github.io/react-native/docs/image.html#background-image-via-nesting ): it works but the text erase the image. Here is an screenshot of what is happening:

Thanks for helping :)

[pwnsdx]

Hm. Looks like I found where was the problem. I had 2 master views:

      <View style={styles.container}>
         <View style={styles.display}>
            <View style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
                <Image
                    source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
                    style={styles.image}>

                    <Text style={{backgroundColor: 'transparent'}}>Inside{'\n'}Test</Text>
                </Image>
            </View>

……

and the style.display didn't had "flex:1"… Without this everything inside the View looks weird, however the 2nd problem is still present, the text is still on the image.

[ide]

It's expected that the text overlays the image (I assume that's what you want because you're nesting it). I would expect the transparent background color to take effect though.

[jsierles]

Working example of both centered image and transparent text backrground here: https://rnplay.org/plays/PCqivA

[ajtwgit]

The above link contained an audio message that threatened to take over my computer if I did not buy some BS software. Please remove the link and, ban the user if possible.