React Native Text внутри оболочки ImageBackground не отображается (с изображением)

Question

Текст в моей обертке фонового изображения не отображается, когда я устанавливаю позицию imageStyle относительно.

    <TouchableWithoutFeedback style={{ position: 'relative', flex: 1, justifyContent: 'center' }} delayPressIn={500} onPressIn={() => this.onPressInMic()} onPressOut={() => this.onPressOutMic()}>
      <ImageBackground imageStyle={{ position: 'relative', backgroundColor: 'transparent' }} source={this.state.micOn ? Images.micOn : Images.micOff} >
        {
          this.state.micOn
            ? (
              <Text style={styles.micText}>PRESS TO{'\n'}STOP</Text>)
            : (
              <Text style={styles.micText}>PRESS TO{'\n'}RECORD</Text>
            )
        }
      </ImageBackground>
    </TouchableWithoutFeedback>

Текст должен быть внутри изображения, как

Answer 1

По умолчанию ImageBackground имеет стиль absoluteFill.

Устанавливая position: 'relative', в image styles вы делаете его относительно контейнера вида , как определено здесь . Поэтому дочерние элементы всегда будут ниже ImageBackground

Обходной путь может заключаться в удалении position: 'relative' в стилях и использовании родительского контейнера style object.

как ImageBackground styles={'//...View container styles'}