Can not overlay a image on Appbar of my screen. (React-Native, react-native-paper)

Question

I tried to overlap an image on Appbar Component and it's not happening.

Here is my code...

<View style={{flex: 1, backgroundColor: '#F6F8FB'}}>
        <Appbar.Header style={styles.appHeader}>
          <Appbar.BackAction />
        </Appbar.Header>
        <Image
          source={require('../../../resource/images/LivingRoom.png')}
          style={styles.imageStyle}
        />
</View>

Here is the CSS for the same.

  appHeader: {
    backgroundColor: '#184DB8',
    height: (15 / 100) * height,
    width: '100%',
    alignItems: 'flex-start',
  },
  imageStyle: {
    width: '100%',
    height: (25 / 100) * height,
    borderTopLeftRadius: 50,
    borderTopRightRadius: 40,
  },

I need Help!!

Like this Image

score 0 · Answer 1 · edited Nov 13 '20 at 13:17

0

Try to add postion:'absolute to imageStyle.

imageStyle: {
    postion: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: (25 / 100) * height,
    borderTopLeftRadius: 50,
    borderTopRightRadius: 40,
  },

now you can play with image position by edit top.

edited Nov 13 '20 at 13:17

Dharman

30,962
25
85
135

answered Nov 10 '20 at 12:52

asaeed

21
3

Nope, the image just disappears and the `top: value` doesn't work. Also tried `marginTop` but didn't work – Satyam Nov 10 '20 at 13:04
what's the value of height? do check your 'height'. let's make your height:100 and check – asaeed Nov 10 '20 at 13:46
Height is my mobile screen height – Satyam Nov 11 '20 at 07:39

score 0 · Answer 2 · edited Nov 13 '20 at 13:17

0

Write </Appbar.Header> after the <Image> tag

<View style={{flex: 1, backgroundColor: '#F6F8FB'}}>
        <Appbar.Header style={styles.appHeader}>
            <Appbar.BackAction />
            <Image
               source={require('../../../resource/images/LivingRoom.png')}
               style={styles.imageStyle}
            />
       </Appbar.Header>

</View>

edited Nov 13 '20 at 13:17

Dharman

30,962
25
85
135

answered Nov 13 '20 at 08:10

Elif

141
13

1

Is this a question or an answer? – Sabito stands with Ukraine Nov 13 '20 at 08:21
I am sorry, write please tag after the image ending tag. – Elif Nov 13 '20 at 08:35

score 0 · Answer 3 · answered Jul 15 '21 at 01:20

I have solved your problem by removing "flex: 1" from your view container. The result I got was the following:

Example

This is the code:

<View style={styles.header}>
  <Appbar.Header style={styles.appHeader}>
    <Appbar.BackAction />
  </Appbar.Header>
  <Image
    source={require('../../assets/room.jpg')}
    style={styles.imageStyle}
  />
</View>

And the styles:

  header: {
    flex: 0,
    backgroundColor: '#184DB8',
    shadowColor: 'transparent',
  },
  appHeader: {
    flex: 0,
    backgroundColor: '#184DB8',
    width: '100%',
    alignItems: 'flex-start',
    borderBottomWidth: 0,
    shadowColor: 'transparent',
  },
  imageStyle: {
    flex: 0,
    width: '100%',
    borderTopLeftRadius: 50,
    borderTopRightRadius: 40,
  }

(PS: sorry if my English writing is somewhat confusing, I'm learning it) (PS2: I am new to the world of react and I couldn't remove the shadow that the header has, an apology)

Can not overlay a image on Appbar of my screen. (React-Native, react-native-paper)

3 Answers3