How do I remove the status bar and overlap icons over the video?

Question

[![enter image description here][2]][2]

I require the icons on the video, however I want them to stick when one scrolls down, I have inserted the icons outside the flatlist but am not able to remove the white space, can anyone help?

The follwing is the return function where I have implemented the icons:

<View style={{flex:1}}>
        <View style={{flexDirection:'row',  justifyContent: 'flex-end', position:'absolute', zIndex:1}}>
        <TouchableOpacity>
              <Icon
                name="shopping-cart"
                size={24}
                style={{ paddingRight: 40 }}
                color="black"
              />
            </TouchableOpacity>
            <TouchableOpacity>
              <Icon
                name="user-circle"
                size={24}
                style={{ paddingRight: 20 }}
                color="black"
              />
            </TouchableOpacity>
            </View>
        <FlatList
        data={this.state.data.product}

        renderItem={({ item }) => (
        <View style = {{alignContent: 'stretch'}}>
      {/* {this.header} */}
      <ViewportAwareVideo

          source={{ uri: item.urlVid }}
          visible={this.state.visible}
          resizeMode = "cover"
          style={{width: width, height:height}}
          innerRef={ref => this._videoRef = ref}
          onViewportEnter={() => this._videoRef.play()}
          onViewportLeave={() => this._videoRef.stop()} 
        />

         <View
              style={{
                position: 'absolute',
                flexDirection: 'column',
                alignItems: 'flex-end',
                top: '50%',
                right: 10,
              }}>
              <TouchableOpacity
                onPress={this.handleClick}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.buttonColor}
                  onPress={this.onButtonPress}
                />
              </TouchableOpacity>


              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="share" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="whatsapp" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="download" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
            </View>
            <View
              style={{
                position: 'absolute',
                flexDirection: 'column',

                top: '90%',
                left: 10,
              }}>
              <View
                style={{
                  flexDirection: 'row',
                }}>
                <Text
                  style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
                  {item.title} - {item.price}
                </Text>



              </View>

            </View>

        </View>


        )}

        keyExtractor={ item => item.id}
      />

      </View>

After adding Zindex and making the position absolute am still having this white space on top, please tell me how to remove it completely

Answer 1

<TouchableOpacity
    style={{
        position: 'absolute',
        top:10,
        left:10,
        z-index:100
    }}>
    <Icon
        name="shopping-cart"
        size={24}
        style={{ paddingRight: 40 }}
        color="black"
    />
</TouchableOpacity>
<TouchableOpacity
    style={{
        position: 'absolute',
        top:10,
        left:30,
        z-index:100
    }}
    >
    <Icon
        name="user-circle"
        size={24}
        style={{ paddingRight: 20 }}
        color="black"
    />
</TouchableOpacity>