javascript – Why does onPressOut not set off constantly when onPressIn works completely?

I’ve a element that’s imagined to be a pressable icon utilizing TouchableOpacity. I wish to detect when it is held, in order that I can present a view and set off recording features like a voice message recording.

IconButton.js:

export default perform IconButton(props) {
  return (
    <TouchableOpacity
      {...props}
      //onPress={props.disabled ? null : props.onPress}
      model={[
        props.disabled ? { opacity: .5 } : null,
        props.containerStyle,
        { justifyContent: 'center', alignItems: 'center' }
      ]}
    >
      <View>
        {props.icon}
        {props.kids}
      </View>
    </TouchableOpacity>
  )
};

Card.js:

const CardFooter = () => (
    <View model={kinds.cardFooter}>
      <Textual content>{isRecording}</Textual content>
      <IconButton
        activeOpacity={1}
        onPressIn={() => {
          console.log("begin document");
          setRecording(true);
        }}
        onPressOut={() => {
          console.log("finish document");
          setRecording(false);
        }}
        icon={<MicIcon model={{ colour: isRecording ? theme.colours.major : theme.colours.textual content }} />}
      />
    </View>
  );

CardFooter is a perform inside one other useful element.

Why does “onPressOut” solely set off generally, like on second, third or actually quick clicks? The opposite perform, onPressIn, works completely. I can inform it isn’t simply the state that is not being set, the console.log does not present both.