The Other thing i want to mention is i have tried using KeyBoardAvoidingview,KeyBoardAvoidScrollView but it did not workout or i may not have implement it properly even if that is the case i realised that developing with RN is like am jumping from one thing to another, solving one problem and and another problem arise form the previous solution and to solve that i have to jump to another thing to solve that problem, also there is no transition animation when the keyboard appear and the Formwrapper changes it position and there is also no any transition effect,that leads to bad user UI/UX .
i have seen many react native mobile application but i don’t see any problem out there and the animation is smooth and appealing, Like they been saying instram is made using reactnative however through my research i found out that its not entirely build on reactnative only some part of that app is used react native and remaining they built using native code.
I have been trying to make an app and searching this keyboard problem for like 3days and still haven’t found out the proper solution it only give a buch of package which in most case the app is either not compatilbe with expo go or should use only native react native.
I think this is the case where many developer will face problem ,and am thinking about to swith from react native to flutter. and asking to different developers i found flutter provide solution out of the box . or it has handled the problem properly
Even in the react native documentation there is not proper solution mentioned.
Below is the layout code of the screenshots i have provided
import {
Animated,
Keyboard,
Text,
TextInput,
TouchableOpacity,
View,
Easing,
StyleSheet,
KeyboardAvoidingView,
} from "react-native";
import React, { useEffect, useRef, useState } from "react";
import { navigationProps } from "../SplashScreen";
import colors from "../../Constant/color";
import Icon from "react-native-vector-icons/Feather";
const Signup = ({ navigation }: navigationProps) => {
const [form, setForm] = useState({
firstname: "",
lastname: "",
phonenumber: null,
address: "",
email: "",
password: "",
confirmpassword: "",
});
const [secureText, setSecureText] = useState({
password: true,
confirmpassword: true,
});
const [expanded, setExpanded] = useState(false);
const translateY = useRef(new Animated.Value(0)).current;
const animateFormWrapper = (toValue: number) => {
Animated.timing(translateY, {
toValue,
duration: 600, // Adjust duration as needed
easing: Easing.bezier(0.68, -0.55, 0.27, 1.55),
useNativeDriver: true,
}).start();
};
useEffect(() => {
const keyboardShowListener = Keyboard.addListener(
"keyboardDidShow",
(e) => {
animateFormWrapper(-e.endCoordinates.height / 4);
Animated.timing(translateY, {
toValue: 0, // Adjust the position based on keyboard height
duration: 100,
easing: Easing.bezier(0.39, 0.57, 0.56, 1),
useNativeDriver: true,
}).start();
}
);
const keyboardHideListener = Keyboard.addListener("keyboardDidHide", () => {
Animated.timing(translateY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start();
});
return () => {
keyboardShowListener.remove();
keyboardHideListener.remove();
};
}, [translateY]);
return (
<View style={styles.container}>
<View style={styles.formWrapper}>
<View>
<Text style={styles.title}>Set up your profile</Text>
<Text style={styles.subtitle}>The shop you need</Text>
</View>
<View style={styles.form}>
<View style={styles.input}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
style={styles.inputControl}
placeholder="First Name"
placeholderTextColor={"#5c5c5b"}
value={form.email}
onChangeText={(email) => setForm({ ...form, email })}
/>
</View>
<View style={styles.input}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
style={styles.inputControl}
placeholder="Last Name"
placeholderTextColor={"#5c5c5b"}
value={form.email}
onChangeText={(lastname) => setForm({ ...form, lastname })}
/>
</View>
<View style={styles.input}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
style={styles.inputControl}
placeholder="Email"
placeholderTextColor={"#5c5c5b"}
value={form.email}
onChangeText={(email) => setForm({ ...form, email })}
/>
</View>
<View style={styles.input}>
<TextInput
secureTextEntry={secureText.password}
autoCapitalize="none"
autoCorrect={false}
style={styles.inputControlPassword}
placeholder="********"
placeholderTextColor={"#5c5c5b"}
value={form.password}
onChangeText={(password) => setForm({ ...form, password })}
/>
<TouchableOpacity
style={styles.iconContainer}
onPress={() =>
setSecureText((prev) => ({
...prev,
password: !prev.password,
}))
} // Toggle secureTextEntry
>
<Icon
name={secureText.password ? "eye" : "eye-off"} // Icon changes based on visibility
size={20}
color="#b9b8b6"
/>
</TouchableOpacity>
</View>
<View style={styles.input}>
<TextInput
secureTextEntry={secureText.confirmpassword}
autoCapitalize="none"
autoCorrect={false}
style={styles.inputControlPassword}
placeholder="confirm Password"
placeholderTextColor={"#5c5c5b"}
value={form.confirmpassword}
onChangeText={(confirmpassword) =>
setForm({ ...form, confirmpassword })
}
/>
<TouchableOpacity
style={styles.iconContainer}
onPress={() =>
setSecureText((prev) => ({
...prev,
confirmpassword: !prev.confirmpassword,
}))
} // Toggle secureTextEntry
>
<Icon
name={secureText.confirmpassword ? "eye" : "eye-off"} // Icon changes based on visibility
size={20}
color="#b9b8b6"
/>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
style={styles.btn}
onPress={() => navigation.goBack()}
>
<Text style={styles.btnText}>Continue</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
};
export default Signup;
const styles = StyleSheet.create({
container: {
flex: 1,
borderColor: "red",
borderWidth: 1,
backgroundColor: colors.background,
justifyContent: "flex-start",
paddingHorizontal: 15,
maxHeight: "100%",
},
title: {
fontSize: 35,
fontWeight: "800",
color: colors.headerText,
},
subtitle: {
fontSize: 18,
marginTop: 5,
color: colors.text,
fontWeight: "400",
},
formWrapper: {
height: "80%",
borderColor: "green",
borderWidth: 1,
justifyContent: "flex-start",
gap: 30,
},
form: {
padding: 10,
},
input: { marginBottom: 16 },
inputLabel: {
fontSize: 17,
fontWeight: "600",
color: colors.text,
marginBottom: 8,
},
inputControlPassword: {
height: 55,
position: "relative",
backgroundColor: "white",
paddingVertical: 10,
paddingHorizontal: 16,
borderRadius: 45,
borderColor: "#e8e7e4",
borderWidth: 1,
fontWeight: "500",
color: "#222",
},
inputControl: {
height: 55,
backgroundColor: "white",
paddingVertical: 10,
paddingHorizontal: 16,
borderRadius: 25,
borderColor: "#e8e7e4",
borderWidth: 1,
fontWeight: "500",
color: "#222",
},
iconContainer: {
right: 15,
top: 15,
alignItems: "center",
alignSelf: "center",
position: "absolute",
},
btn: {
marginTop: 30,
backgroundColor: colors.button,
paddingHorizontal: 28,
borderColor: "gray",
borderRadius: 25,
paddingVertical: 15,
},
btnText: {
fontSize: 15,
fontWeight: "400",
color: colors.buttonText,
textAlign: "center",
},
});
You need to sign in to view this answers
Leave feedback about this