Overview

A known issue with React Native Screens, a dependency of React Navigation, may prevent onPress events from Button or TouchableOpacity elements from propagating to elements displayed below the SparkScanView.

⚠️ The onPress event issue may occur on all React Native versions, not only 0.76+, where New Architecture is enabled by default.

How to Fix onPress Events

Only the onPress events do not propagate events, but the onPressIn and onPressOut events will propagate. However, a TouchableOpacity element must be used since the Button does not include these additional event options.

	`Button`	`TouchableOpacity`
`onPress`	✅	✅
`onPressIn`	❌	✅
`onPressOut`	❌	✅

The expected behaviors of the events are different, and while onPressOut is recommended, it will behave differently from onPress.

`onPress`	Fires only when a touch is started and released within the component's bounds.
`onPressIn`	Fires immediately when a finger touches the component.
`onPressOut`	Fires when the finger is lifted, regardless of where it moved after initial touch.

Here's how to replicate the Button element with an onPress event most similarly.

import {
  TouchableOpacity
  StyleSheet
} from 'react-native';

return (
  <TouchableOpacity style={styles.button} onPressOut={() => { ... } />
    <Text style={styles.buttonText}>Scan</Text>
  </TouchableOpacity>
)

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 4,
    backgroundColor: '#2196F3',
    marginBottom: 10,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  }
});