viro icon indicating copy to clipboard operation
viro copied to clipboard

Position not working on any object in Android

Open maxmann74 opened this issue 9 months ago • 1 comments

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',
  },
});

Image

maxmann74 avatar Jun 19 '25 20:06 maxmann74

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}
  />

maxmann74 avatar Jun 20 '25 13:06 maxmann74

For us, we workaround by using a slightly older version of Viro: 2.41.6

We opened a duplicate issue at #376

johannesvollmer avatar Aug 10 '25 07:08 johannesvollmer

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

oliedis avatar Aug 29 '25 09:08 oliedis