react-native-sclrvvwr v0.0.5

react-native-sclrvvwr

Getting started

Install the package inside a react-native project using the commands below and add the following example project code to the project's App.js file.

Android

$ npm install react-native-sclrvvwr --save

IOS

$ npm install react-native-sclrvvwr --save

$ cd ios && pod install

Mostly automatic installation

$ react-native link react-native-sclrvvwr

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-sclrvvwr and add RNSclrvvwr.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNSclrvvwr.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

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

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

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

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

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

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

Usage

Functions

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

2. Viewer.isARsupported(enableAutoInstall) // Return true if the device support AR Core/Kit. Viewer.isARsupported(false) // if enableAutoInstall set to true program will try to install arcore if arcore supported.

3. Viewer.show3Dmodel(companyName, productID, text) // Shows the model in 3D mode. Viewer.show3Dmodel("spx", 16604, "Canlı Gör")

4. Viewer.showAR(companyName, productID, text) // Shows the model in AR mode. Viewer.showAR("spx", 16604, "Canlı Gör")

5. Viewer.setBaseURL(baseURL) // Changes the base url.

Example Project Code

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

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(false)){
      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, "Canlı Gör");
  }

  showARmodel(){
    Viewer.showAR("spx", 16604, "Canlı Gör");
  }

  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;