Skip to content

Commit

Permalink
Frankreed/slightly improved keyboard avoiding (#318)
Browse files Browse the repository at this point in the history 
* slightly improved keyboard avoiding for update panel in profile

* pretty
  • Loading branch information
@FrankreedX
FrankreedX committed Aug 16, 2024
1 parent 91d2263 commit 2800846
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 134 deletions.
276 changes: 142 additions & 134 deletions app/content/profile/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { MaterialIcons } from "@expo/vector-icons";
import { KeyboardAvoiderScrollView } from "@good-react-native/keyboard-avoider";
import {
BottomSheetModalProvider,
BottomSheetScrollView,
Expand Down Expand Up @@ -320,150 +321,157 @@ function Index() {
}}
>
<BottomSheetScrollView
contentContainerStyle={styles.modalContent}
keyboardDismissMode="interactive"
keyboardShouldPersistTaps="handled"
>
{/* Profile Picture */}
<TouchableOpacity
onPress={async () => {
try {
await handleImageUpload(
setImageUploading,
showSnackBar,
getPfpName(currentTeamId, userId),
userRef,
profilePicSize,
profilePicSize,
);
await invalidateMultipleKeys(queryClient, [["userInfo"]]);
} catch (e) {
console.log(e);
showDialog("Error", getErrorString(e));
}
}}
>
<View style={styles.profilePictureContainer}>
{imageUploading ? (
<ActivityIndicator
animating={imageUploading}
size="large"
color={themeColors.accent}
style={styles.activityIndicator}
/>
) : (
<ProfilePicture
userInfo={userData}
style={styles.profilePicture}
/>
)}
<View style={styles.penIconContainer}>
<MaterialIcons name="edit" size={24} color="black" />
</View>
</View>
</TouchableOpacity>
{/* Display Name */}
<Text
style={{
fontSize: 20,
marginBottom: 10,
fontWeight: "bold",
}}
>
{userData.name}
</Text>
<KeyboardAvoiderScrollView>
<View style={styles.modalContent}>
{/* Profile Picture */}
<TouchableOpacity
onPress={async () => {
try {
await handleImageUpload(
setImageUploading,
showSnackBar,
getPfpName(currentTeamId, userId),
userRef,
profilePicSize,
profilePicSize,
);
await invalidateMultipleKeys(queryClient, [["userInfo"]]);
} catch (e) {
console.log(e);
showDialog("Error", getErrorString(e));
}
}}
>
<View style={styles.profilePictureContainer}>
{imageUploading ? (
<ActivityIndicator
animating={imageUploading}
size="large"
color={themeColors.accent}
style={styles.activityIndicator}
/>
) : (
<ProfilePicture
userInfo={userData}
style={styles.profilePicture}
/>
)}
<View style={styles.penIconContainer}>
<MaterialIcons name="edit" size={24} color="black" />
</View>
</View>
</TouchableOpacity>
{/* Display Name */}
<Text
style={{
fontSize: 20,
marginBottom: 10,
fontWeight: "bold",
}}
>
{userData.name}
</Text>

{/* Display Email */}
<View style={styles.emailContainer}>
<Text style={styles.emailText}>{email}</Text>
</View>

{/* Name Update input field */}
<View style={{ width: "80%", marginBottom: 10 }}>
<Text style={styles.changePasswordButton}>Update your name</Text>
</View>
<BottomSheetTextInput
style={styles.input}
value={newName}
onChangeText={(text) => setNewName(text)}
placeholder="Update your name"
/>

{/* Change Password Button */}
<View
style={{
marginBottom: 20, // Increase margin bottom for more spacing
flexDirection: "row",
alignItems: "center",
width: "80%",
justifyContent: "space-between",
}}
>
<Text style={styles.changePasswordButton}>Change Password</Text>
<Switch
value={passwordInputVisible}
onValueChange={(newValue) => {
resetForm();
setPasswordInputVisible(newValue);
}}
theme={{
colors: {
primary: themeColors.accent,
},
}}
/>
</View>
{/* Display Email */}
<View style={styles.emailContainer}>
<Text style={styles.emailText}>{email}</Text>
</View>

{/* Password Input Field */}
{passwordInputVisible && (
<>
<BottomSheetTextInput
style={styles.input}
value={currentPassword}
onChangeText={setCurrentPassword}
placeholder="Enter your current password"
secureTextEntry={true}
// to get rid of ios password suggestions
// More info on onChangeText + ios password suggestions bug: https://github.com/facebook/react-native/issues/21261
// Workaround ("oneTimeCode" textContentType): https://stackoverflow.com/a/68658035
textContentType="oneTimeCode"
/>
<BottomSheetTextInput
style={styles.input}
value={newPassword}
onChangeText={setNewPassword}
placeholder="Enter your new password"
secureTextEntry={true}
textContentType="newPassword"
/>
{/* Name Update input field */}
<View style={{ width: "80%", marginBottom: 10 }}>
<Text style={styles.changePasswordButton}>
Update your name
</Text>
</View>
<BottomSheetTextInput
style={styles.input}
value={newPasswordCheck}
onChangeText={setNewPasswordCheck}
placeholder="Confirm your new password"
secureTextEntry={true}
textContentType="newPassword"
value={newName}
onChangeText={(text) => setNewName(text)}
placeholder="Update your name"
/>
</>
)}

{/* Save Button */}
<Button
style={styles.saveChangesButton}
onPress={handleUpdate}
textColor={themeColors.highlight}
labelStyle={{
fontWeight: "bold",
}}
loading={updateLoading}
>
Update
</Button>
{/* Change Password Button */}
<View
style={{
marginBottom: 20, // Increase margin bottom for more spacing
flexDirection: "row",
alignItems: "center",
width: "80%",
justifyContent: "space-between",
}}
>
<Text style={styles.changePasswordButton}>
Change Password
</Text>
<Switch
value={passwordInputVisible}
onValueChange={(newValue) => {
resetForm();
setPasswordInputVisible(newValue);
}}
theme={{
colors: {
primary: themeColors.accent,
},
}}
/>
</View>

{/* Password Input Field */}
{passwordInputVisible && (
<>
<BottomSheetTextInput
style={styles.input}
value={currentPassword}
onChangeText={setCurrentPassword}
placeholder="Enter your current password"
secureTextEntry={true}
// to get rid of ios password suggestions
// More info on onChangeText + ios password suggestions bug: https://github.com/facebook/react-native/issues/21261
// Workaround ("oneTimeCode" textContentType): https://stackoverflow.com/a/68658035
textContentType="oneTimeCode"
/>
<BottomSheetTextInput
style={styles.input}
value={newPassword}
onChangeText={setNewPassword}
placeholder="Enter your new password"
secureTextEntry={true}
textContentType="newPassword"
/>
<BottomSheetTextInput
style={styles.input}
value={newPasswordCheck}
onChangeText={setNewPasswordCheck}
placeholder="Confirm your new password"
secureTextEntry={true}
textContentType="newPassword"
/>
</>
)}

{/* Save Button */}
<Button
style={styles.saveChangesButton}
onPress={handleUpdate}
textColor={themeColors.highlight}
labelStyle={{
fontWeight: "bold",
}}
loading={updateLoading}
>
Update
</Button>

{/* Sign Out Button */}
<Pressable onPress={handleSignOut}>
<Text style={styles.signOutButton}>Sign Out</Text>
</Pressable>
{/* Sign Out Button */}
<Pressable onPress={handleSignOut}>
<Text style={styles.signOutButton}>Sign Out</Text>
</Pressable>
</View>
</KeyboardAvoiderScrollView>
</BottomSheetScrollView>
</BottomSheetWrapper>
{uniqueDrills.length > 0 && userData.role === "player" ? (
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"dependencies": {
"@expo/ngrok": "^4.1.0",
"@expo/webpack-config": "^19.0.0",
"@good-react-native/keyboard-avoider": "^1.1.4",
"@gorhom/bottom-sheet": "^4",
"@react-native-async-storage/async-storage": "1.23.1",
"@tanstack/query-async-storage-persister": "^5.27.5",
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1749,6 +1749,13 @@
resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz#0b62c9f47f557a5b4adc073bb0a47542ce6af4c4"
integrity sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ==

"@good-react-native/keyboard-avoider@^1.1.4":
version "1.1.4"
resolved "https://registry.yarnpkg.com/@good-react-native/keyboard-avoider/-/keyboard-avoider-1.1.4.tgz#634a18d8634d100b2b4e1f419c4b56dc0ab831ab"
integrity sha512-Yfbr3b7pOdjdZW03cyHC5kVzFX7D1kPP2jr8yvT7hzI3zoCPuvwTjxzl80vjs3NWCGt1ZAPAbhEkG4oFzGaCSg==
dependencies:
react-native-uuid "^2.0.1"

"@gorhom/bottom-sheet@^4":
version "4.6.3"
resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.3.tgz#0e16999de7468efc6b730f680692f6d53f0abd8e"
Expand Down Expand Up @@ -9360,6 +9367,11 @@ react-native-svg@15.2.0:
css-select "^5.1.0"
css-tree "^1.1.3"

react-native-uuid@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-native-uuid/-/react-native-uuid-2.0.2.tgz#3da192e342ef35ee95a7def676ab41c1256dfd66"
integrity sha512-5ypj/hV58P+6VREdjkW0EudSibsH3WdqDERoHKnD9syFWjF+NfRWWrJb2sa3LIwI5zpzMvUiabs+DX40WHpEMw==

react-native-web@~0.19.6:
version "0.19.12"
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.12.tgz#30d1fd70bdff7886f43c0c2698629d830fade6bc"
Expand Down

0 comments on commit 2800846

Please sign in to comment.