Position not working on any object in Android
Environment: "expo": "~52.0.46", "react-native": "0.76.9", "@reactvision/react-viro": "^2.43.0",
Expo development prebuild (attached to physical Samsung s23)
I have an ARScene with some ARText. As you can see the position values are all different, yet the Text shows up right on top of each other at the exact same spot no matter how much I change the xyz values. I have also tried wrapping all of the text in nodes with different positions and same issue. The ViroSphere also will not move anywhere no matter what the position values.
Any ideas how to make position work, or is this a known bug? If so what version would I roll back to in order to get working AR.
export default function ArTestView() {
const router = useRouter();
useEffect(() => {
setSceneKey((prev) => prev + 1);
(async () => {
console.log('Checking AR support on device...');
try {
const result = await isARSupportedOnDevice();
console.log('Supported result:', result.isARSupported);
} catch (err) {
console.error(err);
}
})();
}, []);
const HelloWorldSceneAR = () => {
const [text, setText] = useState('Initializing AR...');
const [trackingState, setTrackingState] = useState(ViroTrackingStateConstants.TRACKING_UNAVAILABLE);
const [trackingReason, setTrackingReason] = useState(
ViroARTrackingReasonConstants.TRACKING_REASON_INSUFFICIENT_FEATURES
);
ViroMaterials.createMaterials({
orbMaterial: {
lightingModel: 'Constant', // makes it glow without shading
diffuseColor: '#00ffcc',
writesToDepthBuffer: true,
},
});
function handleTrackingUpdated(state: any, reason: ViroTrackingReason) {
console.log('handleTrackingUpdated', { state, reason });
setTrackingState(state);
setTrackingReason(reason);
}
return (
<ViroARScene onTrackingUpdated={handleTrackingUpdated}>
{trackingState == ViroTrackingStateConstants.TRACKING_NORMAL &&
trackingReason == ViroARTrackingReasonConstants.TRACKING_REASON_NONE ? (
<>
<ViroNode position={[0, 0, -3]}>
<ViroSphere
position={[0, 0, 0]} // 1 meter in front of camera
radius={0.1} // size of the orb
materials={['orbMaterial']}
/>
</ViroNode>
<ViroText
text="Left"
position={[-1, 0, -2]} // 1m left, 2m forward
scale={[0.5, 0.5, 0.5]}
style={{ color: 'white', backgroundColor: 'rgba(0,255,0,0.5)' }}
/>
<ViroText
text="Right"
position={[1, 0, -2]} // 1m right, 2m forward
scale={[0.5, 0.5, 0.5]}
style={{ color: 'black', backgroundColor: 'rgba(255,0,0,0.5)' }}
/>
<ViroText
text="Center"
position={[0, 0, -2]} // directly forward, 4m away
scale={[0.5, 0.5, 0.5]}
style={{ color: 'yellow', backgroundColor: 'rgba(0,0,255,0.5)' }}
/>
</>
) : (
<ViroText
text="BAD TRACKING"
position={[0, 0, 0]}
scale={[0.5, 0.5, 0.5]}
style={{ color: 'white', backgroundColor: 'rgba(0,255,0,0.5)' }}
/>
)}
</ViroARScene>
);
};
return (
<View style={{ flex: 1 }}>
<ViroARSceneNavigator
autofocus={true}
initialScene={{
scene: HelloWorldSceneAR,
}}
style={styles.f1}
/>
<Button
title="Close AR"
onPress={() => {
// Navigate back to previous page
router.back();
}}
/>
</View>
);
}
var styles = StyleSheet.create({
f1: { flex: 1 },
helloWorldTextStyle: {
fontFamily: 'Arial',
fontSize: 30,
color: '#ffffff',
textAlignVertical: 'center',
textAlign: 'center',
},
});
I did a pull on this project which uses Expo 50 and it works fine: https://github.com/ReactVision/expo-starter-kit
For a test I updated the package.json to the latest versions (see below), deleted the package-lock.json and ran "npm install"
"dependencies": { "@reactvision/react-viro": "^2.43.0", "expo": "~52.0.46", "expo-status-bar": "~2.0.1", "react": "18.3.1", "react-native": "0.76.9" },
Then I ran "npm run android" on my same phone.
I was able to see the text move with X and Y changes to position, but Z does nothing. I can change it to -5 and it stays pinned right to my exact location, not in front of or behind me.
<ViroText
text={text}
scale={[0.5, 0.5, 0.5]}
position={[3, 2, -5]}
style={styles.helloWorldTextStyle}
/>
For us, we workaround by using a slightly older version of Viro: 2.41.6
We opened a duplicate issue at #376
This is now working on version 2.43.4 https://viro-community.readme.io/changelog/viroreact-2434-expo-53-and-react-19-support-and-more