# Native Features Integration

The phone exposes several native components (Camera, Gallery, Inputs) that you can trigger from your app.

### Camera

Opens the phone's camera to take a photo or video.

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
// Callback receives the URL of the uploaded media
const cameraCallback = useCallback((url: string) => {
    console.log('Captured media:', url);
}, []);

// openCameraComponent(callback, disablePhoto, disableVideo)
openCameraComponent(cameraCallback, false, false);
```

{% endcode %}

<table><thead><tr><th width="134" align="center">Argument</th><th width="211" align="center">Type</th><th width="110" align="center">Optional</th><th>Explanation</th></tr></thead><tbody><tr><td align="center">callback</td><td align="center"><code>(url: string) => void</code></td><td align="center">❌</td><td>Function triggered when media is saved. Receives the URL.</td></tr><tr><td align="center">disablePhoto</td><td align="center"><code>boolean</code></td><td align="center">✅</td><td>If <code>true</code>, the photo mode will be disabled. Default value is <code>false</code></td></tr><tr><td align="center">disableVideo</td><td align="center"><code>boolean</code></td><td align="center">✅</td><td>If <code>true</code>, the video mode will be disabled. Default value is <code>false</code></td></tr></tbody></table>

### Gallery Picker

Opens the gallery for the user to select existing media.

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
const galleryCallback = useCallback((data: string | string[]) => {
    console.log('Selected:', data);
}, []);

// openGalleryPicker(callback, multiple, type, enableLinkInput)
openGalleryPicker(galleryCallback, true, 'image', true);
```

{% endcode %}

<table><thead><tr><th width="114" align="center">Argument</th><th width="298" align="center">Type</th><th width="105" align="center">Optional</th><th>Explanation</th></tr></thead><tbody><tr><td align="center">callback</td><td align="center"><code>(data: string | string[]) => void</code></td><td align="center">❌</td><td>Triggered when media is selected. Returns URL or array of URLs.</td></tr><tr><td align="center">multiple</td><td align="center"><code>boolean</code></td><td align="center">✅</td><td>If true, user can select multiple items. Default value is <code>false</code></td></tr><tr><td align="center">type</td><td align="center"><code>'image' | 'video' | 'both'</code></td><td align="center">✅</td><td>What type of media should be pickable. Default value is <code>'image'</code></td></tr><tr><td align="center">enableLink</td><td align="center"><code>boolean</code></td><td align="center">✅</td><td>If true, allows user to input a custom URL link. Default value is <code>false</code></td></tr></tbody></table>

### Contact Picker

Opens the contacts list to select a phone number.

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
const contactCallback = useCallback((number: string) => {
    console.log('Selected Number:', number);
}, []);

openContactPicker(contactCallback);
```

{% endcode %}

<table><thead><tr><th width="122" align="center">Argument</th><th width="227" align="center">Type</th><th width="104" align="center">Optional</th><th>Explanation</th></tr></thead><tbody><tr><td align="center">callback</td><td align="center"><code>(number: string) => void</code></td><td align="center">❌</td><td>Triggered when a contact is selected. Returns the phone number.</td></tr></tbody></table>

### Emoji & GIF Pickers

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
// Emoji
const emojiCallback = useCallback((emoji: string) => {
    console.log('Selected Emoji:', emoji);
}, []);
openEmojiPicker(emojiCallback);

// GIF
const gifCallback = useCallback((gifUrl: string) => {
    console.log('Selected GIF:', gifUrl);
}, []);
openGIFPicker(gifCallback);
```

{% endcode %}

<table><thead><tr><th width="112" align="center">Argument</th><th width="216" align="center">Type</th><th width="109" align="center">Optional</th><th>Explanation</th></tr></thead><tbody><tr><td align="center">callback</td><td align="center"><code>(emoji: string) => void</code></td><td align="center">❌</td><td>Triggered when an emoji/GIF is selected. Returns the emoji char/gif url.</td></tr></tbody></table>
