> For the complete documentation index, see [llms.txt](https://docs.17movement.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.17movement.net/phone/building-custom-apps/native-features-integration.md). # 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 %}

Argument	Type	Optional	Explanation
callback	`(url: string) => void`	❌	Function triggered when media is saved. Receives the URL.
disablePhoto	`boolean`	✅	If `true`, the photo mode will be disabled. Default value is `false`
disableVideo	`boolean`	✅	If `true`, the video mode will be disabled. Default value is `false`

### 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 %}

Argument	Type	Optional	Explanation
callback	`(data: string \| string[]) => void`	❌	Triggered when media is selected. Returns URL or array of URLs.
multiple	`boolean`	✅	If true, user can select multiple items. Default value is `false`
type	`'image' \| 'video' \| 'both'`	✅	What type of media should be pickable. Default value is `'image'`
enableLink	`boolean`	✅	If true, allows user to input a custom URL link. Default value is `false`

### 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 %}

Argument	Type	Optional	Explanation
callback	`(number: string) => void`	❌	Triggered when a contact is selected. Returns the phone number.

### 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 %}

Argument	Type	Optional	Explanation
callback	`(emoji: string) => void`	❌	Triggered when an emoji/GIF is selected. Returns the emoji char/gif url.

### Listen to AppOpen/AppClose You can use such event to listen if app was opened or closed ```lua RegisterNetEvent("17mov_Phone:Client:AppStateChanged", function(appName, state) print(appName, state) end) ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.17movement.net/phone/building-custom-apps/native-features-integration.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.