React-360: Asset is not defined

[wuno]

--- Delete everything above this line before submitting your issue ---

Description

After a fresh install of react-360 I bootstrapped a project and tried to load an image. The recommended way to achieve this is in the docs is,

<Image source={asset('wuno.png')} />

I added the image named,

wuno.png
wuno.jpg

to static_assets but I continue to get the error in the console,

ExceptionsManager.js:65 TypeError: asset is not a function

Is this a Bug or a Feature Request?
For a Bug please explain below what you did, what you expected to happen, and what actually happens.

Expected behavior

The image should load in the browser

Actual behavior

I get a asset is not a function error in the console.

Reproduction

Node version v10.7.0
Npm version 6.2.0

Bootstrap a new react-360 project and try to add an image to the component with the react-360 Image component.

List all the steps required to encounter the issue you're reporting. These steps should be clear and concise.

1. npm i -g react-360
2. react-360 init blockview
3. Add Image to imports in index.js
4. Add Image to static_assets
5. Add Image component with reference to the new image in the render method.

An example of your code that reliably reproduces the issue is ideal.

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-360';

export default class blockview extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
            <Image source={asset('wuno.png')} />
          </Text>
        </View>
      </View>
    );
  }
}

Solution

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

This component should take the asset function as a prop and render the image it references inside of static_assets.

Additional Information

• 'react-360' package version: [FILL THIS OUT: get this by running npm list react-360]

[email protected] /Users/wuno/Dropbox/Hack/Devops/ether/blockview
└── [email protected]

• 'react-360-web' package version: [FILL THIS OUT: get this by running npm list react-360-web]

[email protected] /Users/wuno/Dropbox/Hack/Devops/ether/blockview
└── [email protected]

• Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]

MacOs

• Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?]

Chrome Latest

• VR Device: [FILL THIS OUT: In or Out of VR? Headset? ]

Not running in VR. running locally on MacOS in the latest Chrome browser

[andrewimm]

This is a JavaScript error, telling you the method "asset" is not defined. You need to import it from react-360

import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-360';

[wuno]

Sorry about that.

[linonetwo]

This should be add to Document, since it's not describing where asset can be imported from.