diff --git a/README.md b/README.md index 4983afe..fe7cd43 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,17 @@ -# Viro Starter Kit +# AR Demos This is a blank React Native project setup with Viro. ## Installation -1. `git clone https://github.com/ViroCommunity/starter-kit.git` -2. `cd starter-kit` +1. `git clone https://github.com/ViroCommunity/ar-demos.git` +2. `cd ar-demos` 3. `npm install` 4. `npx pod-install` (iOS) 5. `npx react-native run-android` or `npx react-native run-ios` -NOTE: The variant arguments are not needed for debug or release. - -## How to Install Viro in an existing project? - -If you are integrating ViroReact into an existing project, have a look at our [Installation instructions](https://github.com/ViroCommunity/viro/blob/main/readmes/INSTALL.md). Please note that this does _not_ work with Expo Managed Workflows. Sorry! +NOTE: +The variant arguments are not needed for debug or release. # Need help? [Reach us in Discord.](https://discord.gg/YfxDBGTxvG) diff --git a/android/gradlew b/android/gradlew old mode 100644 new mode 100755 diff --git a/js/ARDrivingCarDemo/PlatformUtils.js b/js/ARDrivingCarDemo/PlatformUtils.js deleted file mode 100644 index 87efe4e..0000000 --- a/js/ARDrivingCarDemo/PlatformUtils.js +++ /dev/null @@ -1,27 +0,0 @@ -import { Dimensions, Platform } from 'react-native'; - -export const isIPhoneX = () => { - let d = Dimensions.get('window'); - const { height, width } = d; - - - return ( - // This has to be iOS duh - Platform.OS === 'ios' && - - // Accounting for the height in either orientation - ( (height === 812 || width === 812) || // iPhone X & XS - (height === 896 || width === 896) ) // iPhone XR & XS Max - ); -} - -export const isIOS = () => { - return Platform.OS === 'ios'; -} - -export const isAndroid = () => { - return Platform.OS === 'android'; -} - -export const iOSTopPadding = 20; -export const iPhoneXBottomPadding = 25; \ No newline at end of file diff --git a/js/ARDrivingCarDemo/README.md b/js/ARDrivingCarDemo/README.md index e552106..f0294f1 100644 --- a/js/ARDrivingCarDemo/README.md +++ b/js/ARDrivingCarDemo/README.md @@ -1,15 +1,11 @@ -# AR Driving Car Demo +# AR Driving Car - - - - -## Setup Instructions: -1. Open `App.js` and uncomment the line at the bottom `ViroCodeSamplesSceneNavigator = require('./js/ARDrivingCarDemo/ARDrivingCar');` -2. Open `ARDrivingCar.js` and add Viro API Key -3. Start `npm` packager server and run sample +Adapted from original code from here: +https://github.com/viromedia/viro/tree/master/js/ARDrivingCarDemo ## Notes: - React Native w/ Android doesn't support multi-touch across multiple buttons, so you can only accelerate, decelerate or turn the steering wheel individually. (The experience works better on iOS) +- Has a yellow console warning: +Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. \ No newline at end of file diff --git a/js/ARDrivingCarDemo/index.js b/js/ARDrivingCarDemo/index.js index 30a6511..15e65b1 100644 --- a/js/ARDrivingCarDemo/index.js +++ b/js/ARDrivingCarDemo/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { + SafeAreaView, Text, View, StyleSheet, @@ -7,14 +8,10 @@ import { Animated, Easing, Image, - ActivityIndicator, - Alert, Platform, } from 'react-native'; -import * as PlatformUtils from './PlatformUtils'; import { ViroARSceneNavigator, - ViroConstants, } from '@viro-community/react-viro'; var joystickWidth = 200; @@ -23,26 +20,26 @@ var joystickWidth = 200; export default class ARDrivingCar extends Component { constructor(props) { super(props) - + this.state = { // initial state here - showInstructions : true, - instructionOpacity : new Animated.Value(1), - carControlsOpacity : new Animated.Value(0), - isReady : false, - isOverPlane : false, - left : false, - up : false, - right : false, - down : false, - touchLocation : "0,0", - leftRightRatio : 0, - shouldResetCar : false, - isRecording : false, - shouldPlayMedia : true, // whether or not the AR session should play media (probably because its hidden) - hours : '00', - minutes : '00', - seconds : '00', + showInstructions: true, + instructionOpacity: new Animated.Value(1), + carControlsOpacity: new Animated.Value(0), + isReady: false, + isOverPlane: false, + left: false, + up: false, + right: false, + down: false, + touchLocation: "0,0", + leftRightRatio: 0, + shouldResetCar: false, + isRecording: false, + shouldPlayMedia: true, // whether or not the AR session should play media (probably because its hidden) + hours: '00', + minutes: '00', + seconds: '00', } // bind functions here @@ -83,43 +80,45 @@ export default class ARDrivingCar extends Component { render() { let text = "" + (this.state.left ? "Left," : "") + (this.state.up ? "Up," : "") - + (this.state.right ? "Right," : "") + (this.state.down ? "Down," : "") + + (this.state.right ? "Right," : "") + (this.state.down ? "Down," : "") return ( - - - {this.getViroARView()} + + - {this.getCarControls()} + {this.getViroARView()} - {/* Get instructions and ready */} - {this.getReadyUI()} - {this.getInstructions()} + {this.getCarControls()} - + {/* Get instructions and ready */} + {this.getReadyUI()} + {this.getInstructions()} + + + ) } getViroARView() { // use viroAppProps to pass in "changing/dynamic" values, passProps is "not" dynamic. let viroAppProps = { - direction : (this.state.left ? 1 : 0) + (this.state.up ? 2 : 0) + (this.state.right ? 4 : 0) + (this.state.down ? 8 : 0), - leftRightRatio : this.state.leftRightRatio, - shouldResetCar : this.state.shouldResetCar, - isReady : this.state.isReady, - setIsOverPlane : this.setIsOverPlane, + direction: (this.state.left ? 1 : 0) + (this.state.up ? 2 : 0) + (this.state.right ? 4 : 0) + (this.state.down ? 8 : 0), + leftRightRatio: this.state.leftRightRatio, + shouldResetCar: this.state.shouldResetCar, + isReady: this.state.isReady, + setIsOverPlane: this.setIsOverPlane, } return ( {this.arNavigator = ref}} + ref={(ref) => { this.arNavigator = ref }} viroAppProps={viroAppProps} initialScene={{ scene: require('./ARDrivingCarScene.js'), passProps: { onARInitialized: this.onARInitialized, onPosterFound: this.onPosterFound, - onExperienceFinished : this.onExperienceFinished, - onARSceneCreated : this.onARSceneCreated, + onExperienceFinished: this.onExperienceFinished, + onARSceneCreated: this.onARSceneCreated, }, }} /> ); @@ -128,8 +127,10 @@ export default class ARDrivingCar extends Component { getCarControls() { return ( - + {/* These are the controls to drive the car */} {this.getDrivingPedals()} {this.getResetButton()} @@ -145,19 +146,19 @@ export default class ARDrivingCar extends Component { - + + onTouchEnd={this.getPressUp('down')} /> - + + onTouchEnd={this.getPressUp('up')} /> @@ -170,8 +171,8 @@ export default class ARDrivingCar extends Component { let joystickButtonStyle = { height: 130, width: 200, - resizeMode : 'contain', - transform: [{rotate : rotation}] + resizeMode: 'contain', + transform: [{ rotate: rotation }] } /* @@ -180,9 +181,9 @@ export default class ARDrivingCar extends Component { */ return ( - - + + ) } @@ -193,26 +194,26 @@ export default class ARDrivingCar extends Component { style={styles.resetButton} onPress={this.resetCar} activeOpacity={0.6} > - + ) } resetCar() { this.setState({ - shouldResetCar : true, + shouldResetCar: true, }) // reset the flag 1 second later. - setTimeout(()=>{ + setTimeout(() => { this.setState({ - shouldResetCar : false, + shouldResetCar: false, }) }, 1000) } getPressDown(key) { - return ()=>{ + return () => { let dict = {} dict[key] = true this.setState(dict) @@ -220,7 +221,7 @@ export default class ARDrivingCar extends Component { } getPressUp(key) { - return ()=>{ + return () => { let dict = {} dict[key] = false this.setState(dict) @@ -234,15 +235,15 @@ export default class ARDrivingCar extends Component { joystickMove(evt) { this.setJoystickProps(evt); this.setState({ - touchLocation : "" + evt.nativeEvent.locationX.toFixed(2) + ", " + evt.nativeEvent.locationY.toFixed(2) + ", " + evt.nativeEvent.pageX.toFixed(2) + ", " + evt.nativeEvent.pageY.toFixed(2) + touchLocation: "" + evt.nativeEvent.locationX.toFixed(2) + ", " + evt.nativeEvent.locationY.toFixed(2) + ", " + evt.nativeEvent.pageX.toFixed(2) + ", " + evt.nativeEvent.pageY.toFixed(2) }) } joystickEnd(evt) { this.setState({ - left : false, - right : false, - leftRightRatio : 0, + left: false, + right: false, + leftRightRatio: 0, }) } @@ -292,9 +293,9 @@ export default class ARDrivingCar extends Component { } this.setState({ - left : leftValue, - right : rightValue, - leftRightRatio : Math.max(Math.min(ratio, 1), 0), // bound ratio to 0 -> 1 + left: leftValue, + right: rightValue, + leftRightRatio: Math.max(Math.min(ratio, 1), 0), // bound ratio to 0 -> 1 }) } @@ -305,26 +306,26 @@ export default class ARDrivingCar extends Component { let text = this.state.isOverPlane ? ' ' : 'Finding the floor...' let overlayStyle = { - position : 'absolute', - width : '100%', - height : '100%', + position: 'absolute', + width: '100%', + height: '100%', } let readyButton = { height: 60, width: 130, - marginTop : 10, - backgroundColor:'#292930B3', + marginTop: 10, + backgroundColor: '#292930B3', borderRadius: 10, borderWidth: 2, borderColor: '#fff', - justifyContent : 'center', - alignItems : 'center', - opacity : this.state.isOverPlane ? 1 : .5, + justifyContent: 'center', + alignItems: 'center', + opacity: this.state.isOverPlane ? 1 : .5, } return ( - + {text} @@ -352,21 +353,23 @@ export default class ARDrivingCar extends Component { } Animated.timing(this.state.instructionOpacity, { - toValue : 0, - duration : 1000, - easing : Easing.linear, - }).start(()=>{ + toValue: 0, + duration: 1000, + useNativeDriver: true, + easing: Easing.linear, + }).start(() => { this.setState({ - showInstructions : false, - isReady : true, + showInstructions: false, + isReady: true, }) }) - setTimeout(()=>{ + setTimeout(() => { Animated.timing(this.state.carControlsOpacity, { - toValue : 1, - duration : 500, - easing : Easing.linear, + toValue: 1, + duration: 500, + useNativeDriver: true, + easing: Easing.linear, }).start() }, 1000) } @@ -378,21 +381,21 @@ export default class ARDrivingCar extends Component { } var instructionContainer = { - position : 'absolute', - backgroundColor : '#000000B3', - flexDirection : 'column', - width : '100%', - height : 100, - justifyContent : 'center', - top : 0, - left : 0, - paddingTop : paddingTop, + position: 'absolute', + backgroundColor: '#000000B3', + flexDirection: 'column', + width: '100%', + height: 100, + justifyContent: 'center', + top: 0, + left: 0, + paddingTop: 0, } let instructions = "Scan the ground and tap Place to begin." return ( - + {instructions} @@ -404,7 +407,7 @@ export default class ARDrivingCar extends Component { setIsOverPlane(isOverPlane) { if (this.state.isOverPlane != isOverPlane) { this.setState({ - isOverPlane : isOverPlane, + isOverPlane: isOverPlane, }) } } @@ -415,157 +418,152 @@ export default class ARDrivingCar extends Component { } -// on AR screens the padding is only added for iPhone X -let extraInstructionHeight = PlatformUtils.isIPhoneX() ? 5 : 0; -let paddingTop = PlatformUtils.isIPhoneX() ? PlatformUtils.iOSTopPadding + extraInstructionHeight : 0; -let paddingBottom = PlatformUtils.isIPhoneX() ? PlatformUtils.iPhoneXBottomPadding : 0; - var styles = StyleSheet.create({ - outerContainer : { - flex : 1, - flexDirection : 'column', + outerContainer: { + flex: 1, + flexDirection: 'column', }, - titleText : { - color : 'white', - fontSize : 20, - fontWeight : '400', - textAlign : 'center', - fontFamily : 'BebasNeue-Regular', + titleText: { + color: 'white', + fontSize: 20, + fontWeight: '400', + textAlign: 'center', + fontFamily: 'BebasNeue-Regular', }, - instructionText : { - color : 'white', - fontSize : 18, - textAlign : 'center', - fontFamily : 'BebasNeue-Regular', + instructionText: { + color: 'white', + fontSize: 18, + textAlign: 'center', + fontFamily: 'BebasNeue-Regular', }, - readyContainer : { - position : 'absolute', - height : 170, - width : '100%', - bottom : 0, - left : 0, - justifyContent : 'center', - alignItems : 'center', + readyContainer: { + position: 'absolute', + height: 170, + width: '100%', + bottom: 0, + left: 0, + justifyContent: 'center', + alignItems: 'center', }, - exitButton : { + exitButton: { position: 'absolute', // Use padding vs "top"/"left" so that the entire zone is tappable - paddingLeft : 15, - paddingTop : 27 + paddingTop, + paddingLeft: 15, + paddingTop: 27, }, - exitImage : { + exitImage: { height: 21, width: 21, - resizeMode : 'stretch', + resizeMode: 'stretch', }, - joystickContainer : { - position : 'absolute', + joystickContainer: { + position: 'absolute', height: 130, width: 200, marginBottom: 10, - marginLeft : 5, - bottom : 10, - left : 10, + marginLeft: 5, + bottom: 10, + left: 10, }, - joystickTouchArea : { - position : 'absolute', + joystickTouchArea: { + position: 'absolute', height: 130, width: 200, // Android needs a background color on views or it won't be touchable - backgroundColor : '#ffffff00', + backgroundColor: '#ffffff00', }, - resetButton : { - position : 'absolute', - width : 30, - height : 30, - right : 15, - top : 24 + paddingTop, + resetButton: { + position: 'absolute', + width: 30, + height: 30, + right: 15, + top: 24, }, - resetImage : { - width : 30, - height : 30, - resizeMode : 'contain', + resetImage: { + width: 30, + height: 30, + resizeMode: 'contain', }, - directionText : { - position : 'absolute', - top : 50, - color:'#fff', - textAlign:'center', - fontSize : 20 + directionText: { + position: 'absolute', + top: 50, + color: '#fff', + textAlign: 'center', + fontSize: 20 }, - drivingButtonsContainer : { - position : 'absolute', - flexDirection : 'row', - bottom : 25, - right : 10, - width : 150, + drivingButtonsContainer: { + position: 'absolute', + flexDirection: 'row', + bottom: 25, + right: 10, + width: 150, justifyContent: 'space-between', - alignItems : 'center', + alignItems: 'center', }, - drivingButton : { + drivingButton: { height: 70, width: 70, marginTop: 10, marginBottom: 10, - marginLeft : 5, - marginRight : 5, + marginLeft: 5, + marginRight: 5, }, - pedalImage : { - position : 'absolute', - height : 70, - width : 70, + pedalImage: { + position: 'absolute', + height: 70, + width: 70, }, - pedalTouchArea : { - position : 'absolute', - height : 70, - width : 70, + pedalTouchArea: { + position: 'absolute', + height: 70, + width: 70, // Android needs a background color on views or it won't be touchable - backgroundColor : '#ffffff00', + backgroundColor: '#ffffff00', }, buttonText: { - color:'#fff', - textAlign:'center', - fontSize : 20 + color: '#fff', + textAlign: 'center', + fontSize: 20 }, - touchText : { - position : 'absolute', - top : 10, - left : 0, - color:'#fff', - textAlign:'center', - fontSize : 20 + touchText: { + position: 'absolute', + top: 10, + left: 0, + color: '#fff', + textAlign: 'center', + fontSize: 20 }, - attributionOverlay : { - position : 'absolute', - width : '100%', - height : '100%', - backgroundColor : 'black', - justifyContent : 'center', - alignItems : 'center', + attributionOverlay: { + position: 'absolute', + width: '100%', + height: '100%', + backgroundColor: 'black', + justifyContent: 'center', + alignItems: 'center', }, - attributionMovieLogoContainer : { - position : 'absolute', - top : 100, - flexDirection : 'column', + attributionMovieLogoContainer: { + position: 'absolute', + top: 100, + flexDirection: 'column', }, - attributionMovieLogo : { - width : 300, - height : 75, - resizeMode : 'contain', - marginBottom : 15, + attributionMovieLogo: { + width: 300, + height: 75, + resizeMode: 'contain', + marginBottom: 15, }, - attributionLoadingContainer : { - flex : 1, - flexDirection : 'column', - justifyContent : 'center', + attributionLoadingContainer: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', }, - attributionViroLogo : { - position : 'absolute', - bottom : 30, + attributionViroLogo: { + position: 'absolute', + bottom: 30, flexDirection: 'column', alignItems: 'center', width: '100%', height: 60, - resizeMode : 'contain', + resizeMode: 'contain', }, }); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1c7e562..22cf483 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1822,7 +1822,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0", @@ -2276,7 +2275,6 @@ "jest-resolve": "^25.5.1", "jest-util": "^25.5.0", "jest-worker": "^25.5.0", - "node-notifier": "^6.0.0", "slash": "^3.0.0", "source-map": "^0.6.0", "string-length": "^3.1.0", @@ -2414,7 +2412,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0", @@ -2707,7 +2704,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0", @@ -2971,7 +2967,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0", @@ -5043,8 +5038,7 @@ "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -8407,7 +8401,6 @@ "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-regex-util": "^26.0.0", "jest-serializer": "^26.6.2", @@ -9159,7 +9152,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0", @@ -9514,7 +9506,6 @@ "@types/graceful-fs": "^4.1.2", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-serializer": "^25.5.0", "jest-util": "^25.5.0",