реагировать на собственный компонент, добавляя настраиваемый компонент поверх компонента тела страницы

У меня есть пользовательский компонент <Header has_image={ true } />, который вызывается в другом компоненте, и он отлично работает для всех страниц, кроме страницы входа, где мне нужно добавить изображение вместо заголовка и подтолкнуть изображение вверху страницы к центру между заголовком и body, проблема в том, что изображение попадает под тело страницы, и я пробовал z-индексирование с абсолютным позиционированием, но мне не повезло

вот мой Header.js файл

render () {

    return (

      <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={['#a4d294', '#3ac6f3']} style={ styles.header }>

          <TouchableOpacity style={[ (this.state.user && this.state.user.userType == 'doctor') ? styles.add_button : null ]}>

            { (this.state.user && this.state['userType'] == 'patient') ? <Image source={ require('@media/images/add.png') } style={ styles.add_button } /> : null }

          </TouchableOpacity>

          { this.props.has_image ?
              <Image source={ require('@media/images/header-image.png') } style={ styles.header_image } />
            :
            <Text style={ styles.title }> { this.props.title } </Text>
          }

          <TouchableOpacity onPress={ () => this.props.open_drawer() }>

            { this.state.user ? <Image source={ require('@media/images/more.png') } style={ styles.more_button } /> : null }

          </TouchableOpacity>

      </LinearGradient>

    )

  }

}

const styles = StyleSheet.create({
  header : {
    height: 90,
    backgroundColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title : {
    color : '#fff',
    textAlign: 'center',
    fontSize: 20,
    letterSpacing: 3
  },
  header_image : {
    width: 80,
    height: 80,
    resizeMode: 'contain',
    marginTop: 90,
    zIndex: 2,
  },
  add_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  },
  more_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  }
})

и вот мой компонент, над которым я хочу, чтобы изображение переопределило

<View style={ styles.container }>

        <Header has_image={ true } />

        <ScrollView style={ styles.body } behavior="padding" enabled>

          <View style={ styles.terms_container }>

            <Text style={ styles.terms }>

              The Privacy of the registrants in this program is very important to us. visitors and other registrants will not be able to see any existing personal data

            </Text>

          </View>

            <KeyboardAvoidingView style={ styles.form }>

              { this.state.error ? <Text style={ styles.error }> { this.state.error } </Text> : null }

              <Input
                label='Email Address'
                onChangeText={ (email) => this.setState({ email : email }) }
                keyboardType="email-address"
              />

              <Input
                label='Password'
                onChangeText={ (password) => this.setState({ password : password }) }
                password={ true }
              />

              <Gradient
                disabled={ this.state.loading }
                onPress={ this.login }
                text={ "LOGIN" }
                gradient_style={ styles.button_gradient }
                text_style={ styles.button_text }
                button_style={ styles.button_style }
              />

            </KeyboardAvoidingView>

        </ScrollView>

      </View>

результат, который я хочу

результат я получаю