How to position image in ImageBackground component?

Question

I just want to place this image to the top of the screen with ImageBackground component of React-Native, using this background image resizeMode='contain' (NOT cover) since the image is fit to dimensions now I need to place it on top.

Found some solution like here:- https://stackoverflow.com/a/55674160/21163479

But it doesn't seems to be working.

Here is my code

    import { Text, SafeAreaView, ImageBackground } from 'react-native'
    import React from 'react'
    
    const Login = () => {
      return (
        <SafeAreaView style={[{flex: 1}]}>
          <ImageBackground
            source={require('../assets/img/auth-bg.jpg')}
            resizeMode='contain'
            style={[{
              flex: 1,
              justifyContent: 'flex-start',
              backgroundColor: 'pink'
            }]}
            imageStyle={[{ resizeMode: 'contain', alignSelf: 'flex-start' }]}
          >
            <Text>--CONTENT HERE--</Text>
          </ImageBackground>
        </SafeAreaView>
      )
    }
    
    export default Login

And here how it looks

Tina Sharma · Accepted Answer · 2024-12-20 09:03:38Z

0

Remove imageStyle from the code.

here is the code:-

import { Text, SafeAreaView, ImageBackground, View } from 'react- 
native'
import React from 'react'
const Login = () => {
return (
<SafeAreaView style={[{ flex: 1 }]}>
  <ImageBackground
    source={require('../assets/img/auth-bg.jpg')}
    resizeMode='contain'
    style={[{
      flex: 1,
      justifyContent: 'flex-start',
      backgroundColor: 'pink'
    }]}>
    <Text>--CONTENT HERE--</Text>
  </ImageBackground>
</SafeAreaView>
)
}
export default Login

edited Dec 20, 2024 at 9:03

answered Dec 20, 2024 at 8:04

Tina Sharma

1224 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to position image in ImageBackground component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related