ShiftButtonWithHook.js

const ShiftButton = () => {
  const dispatch = useDispatch()

  const isOnShift = useIsOnShift()

  const onUserPressButton = () => {
    isOnShift
      ? dispatch(shiftSlice.actions.endShift())
      : dispatch(shiftSlice.actions.startShift())
  }

  const computeStyles = onShift => ({
    backgroundColor: onShift ? config.colors.accent : config.colors.main,
  })

  return (
    <TouchableOpacity
      testID="shift-button"
      style={[computeStyles(isOnShift), styles.container]}
      onPress={onUserPressButton}
    >
      <Text style={styles.text}>{isOnShift ? 'End Shift' : 'Start shift'}</Text>
    </TouchableOpacity>
  )
}