Call a function from inside of another function in React Native

Question

I want to call snapShotTaker function from inside of HelloWorldApp function but i get ERROR TypeError: undefined is not a function, js engine: hermes in terminal. How to solve this problem?

notifee.registerForegroundService(notification => {
  return new Promise(() => {
    // Long running task...
    setInterval(() => {
      HelloWorldApp.snapShotTaker();
    }, 2000);
  });
});

const HelloWorldApp = () => {
  const isAppForeground = useIsForeground();
  console.log('In Foreground?: ', isAppForeground);

  const cameraRef = useRef(null);
  const [finalPath, setPhotoPath] = useState('');

  const devices = useCameraDevices();
  const device = devices.front;

  if (device == null) {
    return <ActivityIndicator style={styles.indicator} size="large" />;
  }

  const snapShotTaker = async () => {
    const snapshot = await cameraRef.current.takeSnapshot({
      quality: 20,
      skipMetadata: true,
    });
    setPhotoPath('file://' + snapshot.path);
  };

try to create you snapShotTaker function using function keyword — Talha Jutt
– Talha Jutt, Commented Jan 5, 2023 at 6:06

Ugur Eren · Accepted Answer · 2023-01-05 06:13:41Z

3

You simply can't call it outside of the component. However you can move the notifee code to inside of your component using the useEffect hook and call it there.

const HelloWorldApp = () => {
  const isAppForeground = useIsForeground();
  console.log('In Foreground?: ', isAppForeground);

  const cameraRef = useRef(null);
  const [finalPath, setPhotoPath] = useState('');

  const devices = useCameraDevices();
  const device = devices.front;

  if (device == null) {
    return <ActivityIndicator style={styles.indicator} size="large" />;
  }

  const snapShotTaker = async () => {
    const snapshot = await cameraRef.current.takeSnapshot({
      quality: 20,
      skipMetadata: true,
    });
    setPhotoPath('file://' + snapshot.path);
  };

  useEffect(() => {
    // Register your service
    notifee.registerForegroundService(notification => {
      return new Promise(() => {
        // Long running task...
        setInterval(() => {
         snapShotTaker();
        }, 2000);
      });
    });

    // You need to stop the service on cleanup, so it doesn't register multiple times.
    // See https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
    return () => {
      notifee.stopForegroundService();
    };
  
  // You can pass the snapShotTaker function to the deps array but it won't affect it since it isn't memoized. See useCallback hook if you want to memoize it.
  });

answered Jan 5, 2023 at 6:13

Ugur Eren

2,2642 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Abe Over a year ago

I recommend adding an empty dependency array to the useEffect unless you want to register for the service every time something changes in the component.

Ugur Eren Over a year ago

I didn't want to put it in my answer since i don't know how he wants to use it, so added a comment in the closing line. But yeah, an empty array could be used if OP doesn't use (doesn't use in the question but, you know, might) variables that can change in snapShotTaker function.

Mfa Xyz Over a year ago

@UgurEren your code is working when app is open but when i close the app i get this error: session/camera-not-ready: [session/camera-not-ready] The Camera is not ready yet! Wait for the onInitialized() callback!

Ugur Eren Over a year ago

You need to wait for the camera to initialize as the error states. According to vision camera docs, you can pass a function to the onInitialized prop and start taking snapshots when that function is called. You can do this by storing a boolean state with false default value, setting this state's value to true on the onInitialized props callback function, and checking if this state's value is true in the snapShotTaker function before calling the takeSnapshot method.

Mfa Xyz Over a year ago

@UgurEren I asked a new question for my problem here: stackoverflow.com/questions/75017209/…

|

Collectives™ on Stack Overflow

Call a function from inside of another function in React Native

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related