💭 how can I setState from onRecordingFinished?

[moafandi0]

Question

I am trying to call a setState function from inside onRecordingFinished:

const [state, setState] = useState('')

const handleStartRecording = () => {
    setIsRecording(true);
    cameraRef.current.startRecording({
      fileType: "mp4",
      onRecordingFinished: (video) => {
        setState(state+1);
        console.log(video);
      },
      onRecordingError: (error) => console.error(error),
    });
  };

but state is still an empty string after the recording in finished. What am I doing wrong?

What I tried

I tried to useSharedValue() from react-native-worklets instead of useState but got the following error:

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

This error is located at:
    in _default (at app/index.js:5)
    in _default (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(index) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in QualifiedSlot (at Navigator.js:116)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at Navigator.js:72)
    in QualifiedNavigator (at Navigator.js:52)
    in Navigator (at Navigator.js:115)
    in RNCSafeAreaView (at SafeAreaView.tsx:49)
    in Unknown (at Navigator.js:114)
    in DefaultNavigator (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:433)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.js:18)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
 ERROR  TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

This error is located at:
    in _default (at app/index.js:5)
    in _default (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(index) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in QualifiedSlot (at Navigator.js:116)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at Navigator.js:72)
    in QualifiedNavigator (at Navigator.js:52)
    in Navigator (at Navigator.js:115)
    in RNCSafeAreaView (at SafeAreaView.tsx:49)
    in Unknown (at Navigator.js:114)
    in DefaultNavigator (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:433)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.js:18)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

VisionCamera Version

4.0.0-beta.10

Additional information

• [X] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar questions in the issues page as well as in the discussions page and found none.

[mrousavy]

I don't think this is related to VisionCamera.