ShiftButton.js

const lastShiftSelector = state => state.shifts.slice(-1)[0]

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

  const lastShift = useSelector(lastShiftSelector)
  const [isOnShift, setIsOnShift] = useState(false)

  useEffect(() => {
    if (lastShift) {
      setIsOnShift(currentTime.isBefore(lastShift.endTime))
    }
  }, [currentTime])

  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>
  )
}