docs/content/docs/lifecycle.mdx
import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
The CameraSession has three lifecycle stages:
It is recommended to move an active Camera Session to the "Ready" state when it goes out of view, to prevent the Camera from running in the background.
This will stop the Camera (see CameraSession.stop()) while keeping it configured and prepared in-memory.
For example, in react-navigation you would use useIsFocused():
<Tabs items={["<Camera /> (view)", "useCamera(...) (hook)", "CameraSession (imperative)"]} groupId="api-style" persist> <Tab value="<Camera /> (view)">
// [!code ++]
import { useIsFocused } from '@react-navigation/native'
function App() {
const device = useCameraDevice('back')
// [!code ++]
const isFocused = useIsFocused()
return (
<Camera
style={StyleSheet.absoluteFill}
// [!code ++]
isActive={isFocused}
device={device}
/>
)
}
function App() { const device = useCameraDevice('back') // [!code ++] const isFocused = useIsFocused() const camera = useCamera({ // [!code ++] isActive: isFocused, device: device, }) }
</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = ...
// [!code ++:6]
const focusListener = navigation.addListener('focus', async () => {
await session.start()
})
const blurListener = navigation.addListener('blur', async () => {
await session.stop()
})
isActive={false}When isActive is set to false, the CameraSession remains fully configured in memory ("Ready" state), causing subsequent calls to isActive = true to be much faster.
If the <Camera /> is instead fully unmounted, the entire CameraSession will be torn down and all connections will be removed.
When the CameraSession is reconfigured (e.g. when attaching or removing outputs={...}, changing the input device={...} or adjusting constraints={...}), it will be paused for a brief moment to submit the new configuration to the hardware.
As a general tip, avoid reconfigurations as much as possible.