react native Image picker opens keyboard after selecting the Image? - ios

Question

In my react native application I have used react native image picker but when I successfully select an image or take a picture from the 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 then close the picker in ios it is opening the keyboard even there is no any input field in that component but it 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