In my react native application I have used react native image picker but when I successfully select a image or take a picture from camera it is opening the keyboard. This is how I have organised my code this problem only occurs in ios.
const openPicker = async (type, setFileObject, question, setImages, images) => { // if (setImages && images) { // setImages(null); // } var options; if (type === 4) { options = { title: strings('picker.q-i-pick'), takePhotoButtonTitle: strings('picker.tphoto'), chooseFromLibraryButtonTitle: strings('picker.cgallery'), cancelButtonTitle: strings('picker.cancel'), mediaType: 'photo', quality: 1, storageOptions: { skipBackup: true, path: 'images', }, }; } if (type === 5) { options = { title: strings('picker.q-v-pick'), takePhotoButtonTitle: strings('picker.tphoto'), chooseFromLibraryButtonTitle: strings('picker.cgallery'), cancelButtonTitle: strings('picker.cancel'), mediaType: 'video', durationLimit: question.question.duration, videoQuality: Platform.OS === 'android' ? 'high' : 'high', storageOptions: { skipBackup: true, path: 'images', }, }; } if (type === 3) { options = { title: strings('picker.q-v-pick'), takePhotoButtonTitle: strings('picker.tphoto'), chooseFromLibraryButtonTitle: strings('picker.cgallery'), cancelButtonTitle: strings('picker.cancel'), mediaType: 'video', durationLimit: question.question.duration, videoQuality: Platform.OS === 'android' ? 'high' : 'high', storageOptions: { skipBackup: true, path: 'images', }, }; ImagePicker.launchCamera(options, (response) => { if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { // RNFetchBlob.fs.readFile(response.path, 'base64').then((data) => { // response['data'] = data; // response['type'] = 'mp4'; // response['fileName'] = 'videomulti.mp4'; // setFileObject(response); // }); response['type'] = 'video/mp4'; response['fileName'] = 'videomulti.mp4'; setFileObject(response); } }); } if (type === 4 || type === 5) { ImagePicker.showImagePicker(options, (response) => { if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { if (type === 4) { setFileObject(response); } if (type === 5) { console.log(response); response['type'] = 'video/mp4'; response['fileName'] = 'videomulti.mp4'; setFileObject(response); // RNFetchBlob.fs.readFile(response.path, 'base64').then((data) => { // response['data'] = data; // response['type'] = 'mp4'; // response['fileName'] = 'videomulti.mp4'; // setFileObject(response); // }); } } }); }};I am calling this function inside the component like this.
const DocumentUpload = (props) => { const { type, fileObject, setfilename, question } = props; let [isVisible, setIsVisible] = useState(false); const [uploded, setUploded] = useState(false); const [state, setState] = useState({ fullscreen: false, play: false, currentTime: 0, duration: 0, showControls: true, }); const [images, setImages] = useState(null); useEffect(() => { if (fileObject && fileObject.length !== 0 && type === 4) { let imageArr = []; let imageItem; fileObject.map((item, index) => { imageItem = { ilustration: item.uri, }; imageArr.push(imageItem); }); setImages(imageArr); } }, [fileObject, type]); const player = createRef(); return (<View> {(type === 5 || type === 3) && fileObject && fileObject.length !== 0 && (<View style={styles.videoContainer}><View style={styles.videoInnerContainer}><TouchableWithoutFeedback onPress={() => showControls(state, setState)}><View style={{ flex: 1 }}><Video source={{ uri: fileObject[0].path, }} controls={false} style={styles.backgroundVideo} ref={player} resizeMode={'contain'} paused={!state.play} onEnd={() => onEnd(state, setState, player)} onLoad={(data) => onLoadEnd(data, state, setState)} onProgress={(data) => onProgress(data, state, setState)} /> {state.showControls && (<View style={styles.controlsOverlay}><PlayerControls play={state.play} playVideo={handlePlayPause} state={state} setState={setState} pauseVideo={handlePlayPause} /></View> )}</View></TouchableWithoutFeedback></View></View> )} {type === 4 && fileObject && fileObject.length !== 0 && images && (<View style={{ alignItems: 'center', height: '70%' }}><ImageCarousel images={images} uploadedImages={true} /></View> )} {type === 4 && fileObject && !images && (<View style={styles.loadderContainerWI}><Image source={spinner} resizeMode={'center'} /></View> )} {!fileObject || fileObject.length === 0 ? (<><TouchableOpacity onPress={ // () => setIsVisible(true) () => openPicker(type, setfilename, question) }><Image source={Platform.OS === 'android' ? require('_assets/img/cmerap.png') : require('_assets/img/cmerapios.png')} resizeMode={Platform.OS === 'android' ? "center" : "center"} style={Platform.OS === 'android' ? styles.camPImageWV : styles.camPImageWVIos} /></TouchableOpacity><AppText styles={styles.camPTextIos}> {strings('assetsment.capture')}</AppText></> ) : (<> {type === 4 && images && (<View style={[ styles.videoBottomText, images ? { marginTop: '9%' } : null, ]}><TouchableOpacity onPress={ // () => setIsVisible(true) () => openPicker(type, setfilename, question, setImages, images) }><View style={styles.updateAgainContainer}><AntIcon name="reload1" style={styles.reloadIcon} /><AppText styles={styles.reloadText}> {strings('assetsment.reload')}</AppText></View></TouchableOpacity></View> )} {(type === 5 || type === 3) && (<View style={styles.videoBottomText}><TouchableOpacity onPress={ // () => setIsVisible(true) () => openPicker(type, setfilename, question, setImages, images) }><View style={styles.updateAgainContainer}><AntIcon name="reload1" style={styles.reloadIcon} /><AppText styles={styles.reloadText}> {strings('assetsment.reload')}</AppText></View></TouchableOpacity></View> )}</> )}</View> );};After selecting the image and when close the picker in ios it is opening the keyboard even there is no any input field in that component but is only happens in first Time of image selection second time it is not happening. So can someone help me with this one. I tried to dismiss the keyboard manually by calling keyboard.dismiss() after selecting the image but that also gone in-vain. Thank you