Full width wepage view Reactvr

Question

I am using the ReactVr framework to work on a project. My primary goal is to set multiple hotspots and when clicked it should display full-width display with a cross button on the top to close the viewer. This is what I have done so far.

I have created a condition that if infoText is true then display the box else show the infoButton.png:

<VrButton onClick={this.toggleDisplayText}>
      {this.state.infoText === true?
      (
        <View
        style = {{
          position: 'absolute',
          height: 2,
          width: 3,
          backgroundColor: '#000',
          opacity: 0.5,
          flex: 2, // for two columns in the box
          flexDirection: 'column', //specifying column or row
          justifyContent: 'space-between', //justify space between the objects.
          layoutOrigin: [0.7, 0.7],
          transform: [{translate: [0.6, -0.7, -2.5]}]
        }}
          >
        <Text
        style = {{
          width: 1,
          fontSize: 0.18,
          marginLeft: 1.9,
          marginTop: 0.2,
          fontWeight: '300',
          textAlign: 'left',
        }}>
        This bag is the most precious bag in the world. You will love this bag.
        </Text>
          <Image source = {asset('004.png')}
          style =
          {{
          position: 'absolute',
          width: 1.8,
          height: 1.8,
          opacity: 2,
        }}
         />
        </View>

In the above code, as you can see it appears a text box with info and image on it. To exit, we can click with the text box area to close down. Instead, I am looking for full-width of browser and a cross on the top to close. I tried to use Flex: 1 and alignItem: 'strected' but it didn't yield any result. I would really appreciate if anyone could suggest an idea to this problem.

Thanks alot.