react vr border not working

Question

I want to put a border around my text.

    <View style={{ borderRadius: 1, borderWidth: 1, borderColor:'#FF0000',}}>
            <Text style={{
               fontSize: 0.8,
               fontWeight: '400',
               layoutOrigin: [0.5, 0.5],
               paddingLeft: 0.2,
               paddingRight: 0.2,
               textAlign: 'center',
               textAlignVertical: 'center',
               transform: [{translate: [0, 0, -3]}],
             }}>
              hello
             </Text>
          </View>

If I leave the borderWidth as 1, I see the hello but I don't see the border. If I change the borderWidth to something like 10, I don't see anything. How can I add a border to the hello text?

Answer 1

The border is indeed working, but your view is located at the center of the scene, where the camera view is, by default. What you really want to do is set the layoutOrigin on your root view, as well as the translation so that all components are properly rendered there.

This should do it:

<View style={{ 
    borderRadius: 1, 
    borderWidth: 1, 
    borderColor:'#FF0000',
    transform: [{translate: [0, 0, -3]}],
    layoutOrigin: [0.5, 0.5],
}}>
    <Text style={{
        fontSize: 0.8,
        fontWeight: '400',
        paddingLeft: 0.2,
        paddingRight: 0.2,
        textAlign: 'center',
        textAlignVertical: 'center',
    }}>hello</Text>
</View>

This should properly display a border around your text, although you will notice the width of the border is too big, as units don't mean pixels, but meters in the 3D world.