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?

I don't know how to put it in jsFiddle but heres the git link https://github.com/lunzhang/react-vr-tetris . you just have to replace the code in src/index.vr.js with the one i posted — Lunny, Jul 14 '17 at 19:30
Sadly there's no way to embed React VR code in any of the popular playgrounds (codepen, jsbin, etc.), someone should bug the devs on Github about this :) — Valentin, Jul 15 '17 at 15:51

score 1 · Accepted Answer · answered Jul 14 '17 at 21:48

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.

react vr border not working

1 Answers1