I want to have 3 squares of text of equal width around the user

[ybinstock]

Description

Using React-VR, it's easy to have lines of text in front, to the left, and right of the user. But the width of each element is set by the amount of text, so the width is far too long.

Attempting to set the width to 3 for each element causes a weird bug where the height of the different elements are pushed down so that they are no longer on the same horizontal line.

Does anyone know why this happens or what the solution is?

render() {
    return (
      <View
        style={{

       }}
        >

        <Pano source={asset('louvre.jpg')} />
        <View style={{ }}>
          <Text style={{
           backgroundColor: 'rgba(200, 54, 54, 0.5)',
             transform: [{translate: [0, 3, -5]}],
            fontSize: 0.4,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
width: 3,
             }}>
            The Louvre is the world's largest museum
            and a historic monument in Paris, </Text>
        </View>
        <View style={{  }}>
          <Text
            style={{

            backgroundColor: 'rgba(200, 54, 54, 0.5)',
            fontSize: 0.4,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [-3, 3, 0]},  {rotateY : 90} ],
width: 3,
          }}>
            Approximately 38,000 objects from prehistory to the 21st century are exhibited over an area of 72,735
            square
            metres (782,910 square feet) </Text>
        </View>

        <View style={{  }}>

          <Text
            style={{
            backgroundColor: 'rgba(200, 54, 54, 0.5)',
            fontSize: 0.4,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [3, 3, 0]},  {rotateY : -90} ],
width: 3,
          }}>
            The Louvre is the world's most visited museum, receiving 7.4 million visitors in 2016
          </Text>
        </View>

        <View style={{
         }}>

          <Video
            style={{
width: 3,
        height:2.0,
        transform: [{translate: [0, 4, 5]},  {rotateY : 180} ],
        }} source={{uri: '../static_assets/louvre_video.mp4'}}
            playerState={this.state.playerState}
            onEnter={() => this.state.playerState.play()}
            onExit={() => this.state.playerState.pause()}
            />
          <VideoControl
            style={{height: 0.2, width: 4}}
            playerState={this.state.playerState} />
        </View>

        <View style={{
         }}>

          <Text
            onEnter={() => Linking.openURL("https://www.google.com").catch(err => console.error('An error occurred', err))}

            style={{
            backgroundColor: '#777879',
            fontSize: 0.4,
            fontWeight: '200',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: -0.5,
            paddingRight: -0.5,
            width: 2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -5]},  {rotateX : -45} ],
          }}>
            Next
          </Text>
        </View>

      </View>
    );
  }

[mikearmstrong001]

You'll need to position each element of Text with a position:'absolute' in the style. This will ensure that elements do not affect each other.

To be concrete for your example you would put the style change in the wrapping view eg

       <View style={{
           position:'absolute'
         }}>

          <Text
            onEnter={() => Linking.openURL("https://www.google.com").catch(err => console.error('An error occurred', err))}

[mikearmstrong001]

please reopen as required