Pano and CylindricalLayer (and possibly others) don't work with StyleSheet-s

[panta82]

Description

Some internal ReactVR components like Pano and CylindricalLayer crash if given a stylesheet instead of a literal object with styles.

Expected behavior

Stylesheets should work :)

Actual behavior

Produces an error like this:

Cannot create property 'position' on number '3'

Reproduction

import React from 'react';
import {
    AppRegistry,
    asset,
    Pano,
    Text,
    View,
    StyleSheet,
} from 'react-vr';

const styles = StyleSheet.create({
    pano: {
        position: 'absolute'
    }
});

export default class testvr extends React.Component {
    render() {
        return (
            <View>
                <Pano source={asset('chess-world.jpg')} style={styles.pano}/>
                <Text
                    style={{
                        backgroundColor: '#777879',
                        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>
        );
    }
};

AppRegistry.registerComponent('testvr', () => testvr);

Solution

I presume the problem is code like this:

render: function() {
    const props = {...this.props} || {};
    props.style = props.style || {};
    if (!props.style.position) {
      props.style.position = 'absolute';
    }
    // default panos to being a render group
    if (!props.style.renderGroup) {
      props.style.renderGroup = true;
    }

It just assumes props.style is an object and doesn't try to resolve from a stylesheet id.

I guess all these components should be modified to know how to deal with stylesheet id-s. Or alternatively, to use StyleSheet internally to mix styles, instead of mutating user-supplied values.

Additional Information

• 'react-vr' package version: react-vr@1.4.0
• 'react-vr-web' package version: react-vr-web@1.4.0
• Operating System: Linux + Windows
• Graphics Card: Intel, integrated
• Browser: Chrome
• VR Device: None

[mikearmstrong001]

thanks for your report