Expo Barcode Scanner with React-Navigation

Jun Kaneko
1 min readJan 4, 2019

--

Tips to use React Native Expo Barcode Scanner with React Navigation. When using the expo barcode reader in one of the BottomTabNavigator tabs, use navigation.addListener to stop/resume the scanning.

Expo Barcode Scanner

Expo Barcode Scanner Component

Here is the sample component to use Barcode Reader on React Native Expo.

Pause and resume scanning on Scanner Screen

When using the scanner component on one of the tabs managed by BottomTabNavigator, the scan should be paused when navigating to the other screens. You can use React Navigation emits events “didFocus” and “willBlur” to pause/resume the component.

--

--

Jun Kaneko

Based in London and Devon, I love surfing and technology.