React Native Keyboard Aware Scroll View Squeezing Content - css

Question

I was recently working on a React Native project and I choose to use KeyBoardAwareScrollView to handle the keyboard scroll of the screen. The Below image shows the design which should be actual but when I use keyboardAvoidingView it starts to add padding to the bottom of the screen while I want the screen to scroll up when the keyboard is visible, after doing some research I came across the KeyboardAvoidingScrollView but using that if i give they height of
flex: 1
If i change this line to a static height it fixes the issue on a static screen
scrollContainer: { height: 1000 }
to the container that holds the content everything is pushed to the top.
To somehow adjust the view I gave the scroll container fixed height that did solve the problem temporarily but didn't work on all screen sizes.
My Code Looks like this
import {
View,
Text,
StyleSheet,
SafeAreaView,
Image,
StatusBar,
KeyboardAvoidingView,
} from "react-native";
import AuthContent from "../../auth/AuthContent";
import AuthForm from "../../auth/AuthForm";
import CustomTextInput from "../../components/CustomTextInput";
import { setEmailPass } from "../../../redux/UserReucer";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { ImageBackground } from "react-native";
import { GlobalStyles } from "../../../consts/GlobalConsts";
import OrientationLoadingOverlay from "react-native-orientation-loading-overlay";
import { useState } from "react";
import Loading from "../../components/Loading";
import { getAxiosClient } from "../../apis/TallyApi";
import { showAlert } from "../../../utils/Alert";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const SignUpScreen = ({ navigation }) => {
const dispatch = useDispatch();
const currentUser = useSelector((state) => {
return state.mUser;
});
const [isLoading, setIsLoading] = useState(false);
// console.log("Redux state", currentUser);
async function loginHandler({ email, password }) {
setIsLoading(true);
console.log("Signup Screen", email, password);
try {
let response = await getAxiosClient().post("/users/checkEmail", {
email: email,
});
dispatch(setEmailPass({ email, password }));
navigation.navigate("RoleScreen");
console.log("Axios response ", response.data);
} catch (err) {
// const { response } = err;
// const { request, ...errorObject } = response;
console.log("Axios Error ", err.response.data.message);
showAlert(err.response.data.message);
// console.error(err);
// console.error(err);
} finally {
setIsLoading(false);
}
}
return (
<>
<ImageBackground
source={require("../../../../assets/background_color.png")}
style={GlobalStyles.backgroundContainer}
>
<SafeAreaView style={styles.container}>
<KeyboardAwareScrollView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<View style={styles.scrollContainer}>
<StatusBar barStyle="light-content" />
<View style={styles.topSpace}></View>
<View style={styles.mainContainer}>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={require("../../../../assets/email_icn.png")}
></Image>
</View>
<View style={styles.textContainer}>
<Text style={styles.largeText}>Continue with email</Text>
<Text style={styles.smallText}>
Enter your email address to get register with palace
</Text>
</View>
<View style={styles.authContainer}>
<AuthContent
styles={styles.authContainer}
onAuthenticate={loginHandler}
></AuthContent>
</View>
</View>
<View style={styles.bottomSpace}></View>
<Loading isLoading={isLoading}></Loading>
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
</ImageBackground>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: { flex: 1 },
largeText: {
fontSize: 30,
color: "white",
marginVertical: 9,
textAlign: "center",
},
smallText: {
fontSize: 16,
color: "white",
marginVertical: 9,
textAlign: "center",
},
topSpace: {
flex: 0.5,
},
mainContainer: {
flex: 8.5,
},
bottomSpace: {
flex: 1,
},
imageContainer: {
flex: 3,
alignItems: "center",
justifyContent: "center",
},
textContainer: {
flex: 1.5,
justifyContent: "center",
},
authContainer: {
flex: 2.5,
},
image: {
resizeMode: "contain",
height: "90%",
},
});
export default SignUpScreen;

Answer 1

Just use a <ScrollView> rather than <KeyboardAwareScrollView>