Why can't I leave the keyboard on iOS to send the Post in the React Native App?-CodePudding

The

CODE:

import React, { useContext, useState } from "react" import { View, Text, Button, Alert, ActivityIndicator, ScrollView } from "react-native" import ActionButton from "react-native-action-button" import Icon from 'react-native-vector-icons/Ionicons' import FontAwesome5 from 'react-native-vector-icons/FontAwesome5' import ImagePicker from "react-native-image-crop-picker" import storage from '@react-native-firebase/storage' import firestore from '@react-native-firebase/firestore' import globalStyles from "../styles/global" import { InputField, InputWrapper, AddImage, SubmitBtn, SubmitBtnText, StatusWrapper } from '../styles/AddPostStyles' import { AuthContext } from "../navigation/AuthProvider" const AddPostScreen = () => { const { user, logout } = useContext(AuthContext) const [image, setImage] = useState(null) const [uploading, setUploading] = useState(false) const [transferred, setTransferred] = useState(0) const [post, setPost] = useState(null) const takePhotoFromCamera = () => { ImagePicker.openCamera({ width: 1200, height: 780, cropping: true, }).then((image) => { console.log(image) const imageUri = Platform.OS === 'ios' ? image.sourceURL : image.path setImage(imageUri) }) } const choosePhotoFromLibrary = () => { ImagePicker.openPicker({ width: 1200, height: 780, cropping: true, }).then((image) => { console.log(image) const imageUri = Platform.OS === 'ios' ? image.sourceURL : image.path setImage(imageUri) }) } const submitPost = async () => { const imageUrl = await uploadImage() console.log('Image Url', imageUrl) firestore() .collection('posts') .add({ userId: user.uid, post: post, postImg: imageUrl, postTime: firestore.Timestamp.fromDate(new Date()), likes: null, comments: null }) .then(() => { console.log('Post Added...') Alert.alert( 'Post published!', 'Your post has been published Successfully!', ) setPost(null) }) .catch((error) => { console.log('Something went wrong with added post to firestore.', error) }) } const uploadImage = async () => { if (image == null) { return null } const uploadUri = image let filename = uploadUri.substring(uploadUri.lastIndexOf('/') 1) // Add timestad to File Name const extension = filename.split('.').pop() const name = filename.split('.').slice(0, -1).join('.') filename = name Date.now() '.' extension setUploading(true) setTransferred(0) const storageRef = storage().ref(`photos/${filename}`) const task = storageRef.putFile(uploadUri) // Set transferred state task.on('state_changed', (taskSnapshot) => { console.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`) setTransferred( Math.round(taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) * 100 ) }) try { await task const url = await storageRef.getDownloadURL() setUploading(false) setImage(null) /* Alert.alert( 'Imagen subida!', 'Tu imagen se subio correctamente!', ) */ return url } catch (e) { console.log(e) return null } } return ( <View style={globalStyles.container}> <InputWrapper> {image != null ? <AddImage source={{ uri: image }} /> : null} <InputField placeholder="¿Qué tienes en mente?" multiline numberOfLines={4} value={post} onChangeText={(content) => setPost(content)} /> {uploading ? ( <StatusWrapper> <Text>{transferred} % Completed!</Text> <ActivityIndicator size="large" color="#27AE60" /> </StatusWrapper> ) : ( <SubmitBtn onPress={submitPost}> <SubmitBtnText>Post</SubmitBtnText> </SubmitBtn> )} </InputWrapper> <ActionButton buttonColor="rgb(26, 188, 156)"> <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}> <Icon name="md-create" style={globalStyles.actionButtonIcon} /> </ActionButton.Item> <ActionButton.Item buttonColor='#3498db' title="Take Photp" onPress={takePhotoFromCamera}> <Icon name="camera-outline" style={globalStyles.actionButtonIcon} /> </ActionButton.Item> <ActionButton.Item buttonColor='#1abc9c' title="Elegir" onPress={choosePhotoFromLibrary}> <Icon name="md-images-outline" style={globalStyles.actionButtonIcon} /> </ActionButton.Item> </ActionButton> </View> ) } export default AddPostScreen

//////////////////////////

import styled from 'styled-components' export const InputWrapper = styled.View` flex: 1; justify-content: center; align-items: center; width: 100%; background-color: #2e64e515; ` export const InputField = styled.TextInput` justify-content: center; align-items: center; font-size: 24px; text-align: center; width:90%; margin-bottom: 15px; ` export const AddImage = styled.Image` width: 100%; height: 250px; margin-bottom: 15px; ` export const StatusWrapper = styled.View` justify-content: center; align-items: center; ` export const SubmitBtn = styled.TouchableOpacity` flex-direction: row; justify-content: center; background-color: #2e64e515; border-radius: 5px; padding: 10px 25px; ` export const SubmitBtnText = styled.Text` font-size: 18px; font-family: 'Lato-Bold'; font-weight: bold; color: #2e64e5; `

CodePudding user response：

you should use react-native-keyboard-aware-scroll-view

yarn add react-native-keyboard-aware-scroll-view

it will resolve your issue.

Usage

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' <KeyboardAwareScrollView> <View> <TextInput /> </View> </KeyboardAwareScrollView>

Note: if you are using react-native<65 then you should use [email protected]

CodePudding user response：

Not sure if this will work but try this.

yarn add react-native-keyboard-aware-scroll-view

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

Replace <KeyboardAvoidingView> with <KeyboardAwareScrollView> but also make it a child to the wrapper. Like this:

<View style={{flex: 1}} > <KeyboardAwareScrollView extraScrollHeight={20} > //Content </KeyboardAwareScrollView> </View>

4.The extraScrollHeight prop gives you control over how much the content can move up or down (negative numbers for moving downward) when keyboard is invoked.