react-native-sclrvwr

react-native-sclrvwr

Getting started

Android

$ npm install react-native-sclrvwr --save

IOS

$ npm install react-native-sclrvwr --save $ cd ios && pod install

Mostly automatic installation

$ react-native link react-native-sclrvwr

Manual installation

iOS

• In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-sclrvwr and add RNSclrvwr.xcodeproj
• In XCode, in the project navigator, select your project. Add libRNSclrvwr.a to your project's Build Phases ➜ Link Binary With Libraries
• Run your project (Cmd+R)<

Android

• Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.scalarvision.sclrvwr.RNSclrvwrPackage; to the imports at the top of the file
• Add new RNSclrvwrPackage() to the list returned by the getPackages() method

• Append the following lines to android/settings.gradle:

  include ':react-native-sclrvwr'
  project(':react-native-sclrvwr').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-sclrvwr/android')
  

• Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':react-native-sclrvwr')
  

Usage

Functions

Viewer.is3Dsupported(); //Return true if the device supports 3D.

Viewer.isARsupported(); //Return true if the device support AR Core/Kit.

Viewer.show3Dmodel("spx", 76598); //Shows the model in 3D mode.

Viewer.showAR("spx", 16604); //Shows the model in AR mode.

Example Project Code

import React, { Component} from 'react';
import { View, Button, StyleSheet, Alert} from 'react-native';
import Viewer from 'react-native-sclrvwr';

class App extends Component {
  constructor(props){
    super(props);
	this.onPress3D = this.onPress3D.bind(this);
	this.onPressAR = this.onPressAR.bind(this);
  }

  onPress3D(){
    if (Viewer.is3Dsupported()){
		Alert.alert(
			"3D Support",
			"Your device supports 3D!",
			[{ text: "OK", onPress: () => console.log("OK Pressed") }]
		);
	}
	else{
		Alert.alert(
			"3D Support",
			"Your device does not supported 3D!",
			[{ text: "OK", onPress: () => console.log("OK Pressed") }]
		);
	}
  }

  onPressAR(){
    if (Viewer.isARsupported()){
      Alert.alert(
        "AR Support",
        "Your device supports AR!",
        [{ text: "OK", onPress: () => console.log("OK Pressed") }]
      );
    }
    else{
      Alert.alert(
        "AR Support",
        "Your device does not supports AR!",
        [{ text: "OK", onPress: () => console.log("OK Pressed") }]
      );
    }
  }

  show3Dmodel(){
    Viewer.show3Dmodel("spx", 76598);
  }

  showARmodel(){
    Viewer.showAR("spx", 16604);
  }

  render(){
    return (
      <View style={[{translateY: 100}]}>
        <View style={styles.separator} />
        <Button title ="is3Dsupported" color ="#841584" onPress={this.onPress3D}/>
        <View style={styles.separator} />
        <Button title ="isARsupported" color ="#841584" onPress={this.onPressAR}/>
        <View style={styles.separator} />
        <Button title ="show3Dmodel" color ="#841584" onPress={this.show3Dmodel}/>
        <View style={styles.separator} />
        <Button title ="showAR" color ="#841584" onPress={this.showARmodel}/>
      </View>
    );
  }
};

const styles = {
  separator: {
    marginVertical: 50,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
};

export default App;