When building forms using native components like PhotoPicker or DocumentPicker, you might encounter this error:
NATIVE_COMPONENT_IN_FORM_INIT_VALUES
“Property 'init-values' should not contain value for components: [PhotoPicker, DocumentPicker]”
Quick Fix
Remove the native components (PhotoPicker, DocumentPicker, etc.) from the init-values of your Form. These components do not support initialization via init-values, because they rely on user input at runtime.
The Problem
Let’s say you’re trying to prefill a form like this:
{
"type": "Form",
"name": "PASS_CUSTOM_VALUE",
"init-values": {
"photo": "abc",
"doc": "efg"
},
"children": [
{
"type": "PhotoPicker",
"name": "photo",
"label": "Add your picture"
},
{
"type": "DocumentPicker",
"name": "doc",
"label": "Add ID proof"
}
]
}Even though this looks valid, it throws an error because you're trying to assign values to PhotoPicker and DocumentPicker through init-values - something that’s not supported.
The Correct Approach
Here’s how you should structure your form:
{
"type": "Form",
"name": "PASS_CUSTOM_VALUE",
"init-values": {
// Only include non-native fields here
},
"children": [
{
"type": "PhotoPicker",
"name": "photo",
"label": "Add your picture"
},
{
"type": "DocumentPicker",
"name": "doc",
"label": "Add ID proof"
}
]
}This way, the form remains valid and native components work as expected - waiting for user interaction without assuming pre-filled values.
Why This Matters
Native components are designed to capture files, media, or hardware input from the user. Attempting to assign static values to them during initialization breaks the core expectation of runtime interaction and leads to unnecessary errors.
TL;DR
Don't use init-values with native components.
Let the user provide these inputs during interaction.
Keep init-values reserved for text fields, dropdowns, switches, etc.
For more troubleshooting insights related to WhatsApp Business API, check out heltar.com/blogs.