react-native-vision-camera/docs/docs/guides/LIFECYCLE.mdx

---
id: lifecycle
title: Lifecycle
sidebar_label: Lifecycle
---

import useBaseUrl from '@docusaurus/useBaseUrl';

<div>
  <img align="right" width="283" src={useBaseUrl("img/example.png")} />
</div>

### The `isActive` prop

The Camera's `isActive` property can be used to _pause_ the session (`isActive={false}`) while still keeping the session "warm". This is more desirable than completely unmounting the camera, since _resuming_ the session (`isActive={true}`) will be **much faster** than re-mounting the camera view.

For example, you want to **pause the camera** when the user **navigates to another page** or **minimizes the app** since otherwise the camera continues to run in the background without the user seeing it, causing **siginificant battery drain**. Also, on iOS a green dot indicates the user that the camera is still active, possibly causing the user to raise privacy concerns. (🔗 See ["About the orange and green indicators in your iPhone status bar"](https://support.apple.com/en-us/HT211876))

This example demonstrates how you could pause the camera stream once the app goes into background using a [custom `useIsAppForeground` hook](https://github.com/mrousavy/react-native-vision-camera/blob/main/example/src/hooks/useIsForeground.ts):

```tsx
function App() {
  const devices = useCameraDevices()
  const device = devices.back
  const isAppForeground = useIsAppForeground()

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={isAppForeground}
    />
  )
}
```

#### Usage with `react-navigation`

To automatically pause the Camera when the user navigates to a different page, use the [`useIsFocused`](https://reactnavigation.org/docs/use-is-focused/) function:

```tsx {4}
function App() {
  // ...

  const isFocused = useIsFocused()

  return <Camera {...props} isActive={isFocused} />
}
```

<br />

#### 🚀 Next section: [Camera Formats](formats)