"Turn off" the camera / barcode scanner when switching tabs

  1. SDK Version: 41
  2. Platforms(Android/iOS/web/all): all

I have a tab that opens the Barcode Scanner component. When the scan is complete and successful, I use React Navigation to navigate to another tab. Meanwhile, the camera is still running and causing the phone to overheat. How can I “disable” the camera when on other tabs?

I’m using React navigation v4 and Redux (Toolkit) for state management. The onNavigationStateChange property helps me detect when the tab changes, which I then use to store a boolean to indicate whether or not to show the Scanner component on the Barcode Scanner screen.

Currently, the scanner does not appear on the screen despite the fact that the camera is on as soon as I switch to the Barcode Scanner tab / screen and until the Expo app is killed.

Can you post some of the code?

Otherwise, see if something like this works for you?

The Snack is returning an error that shouldn’t exist, so you can ignore that.

Excuse the inefficient code. This is my first React (Native) project.

see https://reactnavigation.org/docs/4.x/function-after-focusing-screen/

As far as I understand it, the onNavigationStateChange property on my navigator does the work of the withNavigationFocus higher-order component.

It seems like the issue is with displaying the barcode scanner to begin with. Despite the green dot indicator on iOS (meaning the camera is “on”), I don’t see the barcode scanner on the tab/screen.

I think this means my problem is no longer as the title / original post state. It seems to be an issue of displaying the barcode scanner at all.

For those looking for an answer, the solution to “turning off” the component is to keep track of tab switching.

In React Navigation v4, the easiest way to implement that (from what I understand) is to use the onNavigationStateChange property. I’m storing the data in a Redux (Toolkit) store.

App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store/index';
import AppContainer from './components/AppContainer';

export default function App() {
	return (
		<Provider store={store}>
			<AppContainer />
		</Provider>
	);
}

./components/AppContainer.js

import React from 'react';
import { useDispatch } from 'react-redux';
import AppNavigator from '../navigation/AppNavigator';
import { scannerActions } from '../store/scanner';

const AppContainer = () => {
	const dispatch = useDispatch();

	// https://reactnavigation.org/docs/4.x/screen-tracking
	// gets the current screen from navigation state
	function getActiveRouteName(navigationState) {
		if (!navigationState) {
			return null;
		}
		const route = navigationState.routes[navigationState.index];

		// dive into nested navigators
		if (route.routes) {
			return getActiveRouteName(route);
		}
		return route.routeName;
	}
	
	return (
		<AppNavigator
			onNavigationStateChange={(_, currentState) => {
				const currentRouteName = getActiveRouteName(currentState);
				if (currentRouteName === 'BarcodeScanner') {
					dispatch(scannerActions.show());
				} else {
					dispatch(scannerActions.hide());
				}
			}}
		/>
	);
}

export default AppContainer;

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.