NativeVision
onPinch onClick still does not work
Requirements:
Please go through this checklist before opening a new issue
- [V] Review the documentation
- [V] Search for existing issues in: viromedia/viro & ViroCommunity/viro
- [V] Use the latest ViroReact release
Environment
Please provide the following information about your environment:
- Development OS: Mac, Windows, Linux =>Mac
- Device OS & Version: What Android OS version (7.0, 8.0, etc.) or iOS version (11.0, 11.2) is your device running on? iOS 15.0
- Version: ViroReact version and React Native version => 2.22.0/0.65.1
- Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc) iPhone6s
Description
Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know. I check the issue found in https://github.com/viromedia/viro/issues/785, and use the way they suggest, but it is no help.
Reproducible Demo
Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.
The AR function in my design is one of the pages, and user can choose which AR they want to play.
if(mainVisible){ return ( <View style={styles.outer} > <TouchableOpacity style={styles.chooseButton} onPress={()=>_clickExplain('A')} underlayColor={'#68a0ff'}> <Text style={styles.buttonText}>First Game</Text> </TouchableOpacity> <MyModal myModal={wordForm} /> <TouchableOpacity style={styles.chooseButton} onPress={()=>_clickExplain('B')} underlayColor={'#68a0ff'}> <Text style={styles.buttonText}>Second Game</Text> </TouchableOpacity> <TouchableOpacity style={styles.chooseButton} onPress={_exitScreen} underlayColor={'#68a0ff'}> <Text style={styles.buttonText}>Exit</Text> </TouchableOpacity> </View> ) }else if(firstARVisible){ return ( <React.Fragment> <View style={styles.viroContainer}> <SafeAreaView style={GlobalStyles.droidSafeArea}> <View style={{flexDirection: 'row', justifyContent: 'space-between'}}> <Text style={styles.modalText}>{score}</Text> <Text style={styles.modalText}>{nextWord}</Text> <Text style={styles.modalText}>{num}</Text> </View>
<ViroARSceneNavigator
autofocus={true}
initialScene={{
scene: firstAR,
}}
viroAppProps={viroAppProps}
/>
<MyModal myModal={wordForm} />
<TouchableOpacity
style={styles.exitButton}
onPress={_returnMain}
underlayColor={'#68a0ff'}>
<Icon name="exit-to-app" size={30} color="white" />
</TouchableOpacity>
</SafeAreaView>
</View>
</React.Fragment>
)
}else if(secondARVisible){ return ( <React.Fragment> <View style={styles.viroContainer} > <ViroARSceneNavigator autofocus={true} initialScene={{ scene: secondAR, }} viroAppProps={viroAppProps} /> <MyModal myModal={wordForm} /> <TouchableOpacity style={styles.exitButton} onPress={_returnMain} underlayColor={'#68a0ff'}> <Icon name="exit-to-app" size={30} color="white" /> </TouchableOpacity> </View> </React.Fragment> ); }
const secondAR = (props) => { const [modalVisible, setModalVisible] = useState(props.arSceneNavigator.viroAppProps.displayObject);
const [scale, setScale] = useState([0.3,0.3,0.3]); const [rotation, setRotation] = useState([0,0,0]);
const _onRotate = (rotateState, rotationFactor, source) => {
if (rotateState == 3) {
var newRotation = [rotation[0],rotation[1]+rotationFactor,rotation[2]];
setRotation(newRotation)
console.log("rotation"+newRotation)
return;
}
//arNodeRef.current.setNativeProps({rotation:newRotation});
}
const _onPinch = (pinchState, scaleFactor, source) => {
var newScale = scale.map((x)=>{return x * scaleFactor})
if (pinchState == 3) {
setScale(newScale)
console.log("scale:"+newScale)
return;
}
//arNodeRef.current.setNativeProps({scale:newScale});
}
return ( <ViroARScene> <Viro3DObject source={require('./res/pumpkinman_anim/pumpkinman_anim.vrx')} type="VRX" materials={"pbr"} resources={[require('./res/pumpkinman_anim/pumpkinman_body_diffuse.png'), require('./res/pumpkinman_anim/pumpkinman_body_normal.png'), require('./res/pumpkinman_anim/pumpkinman_body_specular.png'), require('./res/pumpkinman_anim/pumpkinman_head_diffuse.png'), require('./res/pumpkinman_anim/pumpkinman_head_normal.png'), require('./res/pumpkinman_anim/pumpkinman_head_specular.png')]} animation={{ "run": true}} scale={scale} rotation={rotation} position={[0,0,-1]} onRotate={_onRotate} onPinch={_onPinch} />
<ViroAmbientLight color={"#aaaaaa"} influenceBitMask={1} />
<ViroSpotLight
innerAngle={5}
outerAngle={90}
direction={[0,-1,-.2]}
position={[0, 3, 1]}
color="#aaaaaa"
castsShadow={true}
/>
</ViroARScene>
); };
var styles = StyleSheet.create({ viroContainer :{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0, width: "100%", height: "100%", }, });
@copper123 Did you find the solution already?
If not, I think the issue is in your conditional rendering of ARScene navigator.
Return the AR scene navigator once, just change the props regarding the condition...
I also had issues with onClick handler. It was not working properly. What I was doing was un-mounting and re-mounting the AR scene navigator and the related screen, because of some optimisations I wanted to achieve. Unfortunately I was just breaking the viro event handlers...
As soon I let the Viro scene navigator just mount with my screen component and keep it mounted, event handlers have started working properly.
@ViktorVojtek thanks for your suggestion. However, In my case, I need two types, one is Viro and one is normal, it means I need to leave the ARScene and back again. How can I solve this?
@copper123 I am doing something similar.
And what I do is that I have a context (you can use redux or state and passing props to children approach as well) with all the settings for AR Scene and for model/models.
I am reading these settings and data to set up scene and add/remove models to/from the scene. And when I want to leave the screen with AR scene I just reset this context but leave the screen with AR scene in the navigation stack, so its not un-mounting/re-mounting.
You just need to rethink the architecture of your current screen/components I suppose.
@copper123 I figured out that on react-native 0.67.5 and viro-react 2.23.0 all events works for me. Even onPinch and onRotate works really well on every device I've tesed and had issues before. I have to notice that it works good only if I have Bitcode enabled in Xcode for the whole project and every pods, same with proguard on android. Hope this helps.
