Skip to content

Commit

Permalink
fix: add KeyboardAvoidingView to create profile screen V2 (#362)
Browse files Browse the repository at this point in the history 
* fix: add KeyboardAvoidingView to create profile screen

* fix: KeyboardAvoidingView in ProfileCreateScreen

Co-authored-by: Alexander Evchenko <[email protected]>
  • Loading branch information
@lucachaco
lucachaco and Alexander Evchenko authored Nov 28, 2022
1 parent 2be1800 commit ae78503
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 91 deletions.
2 changes: 1 addition & 1 deletion src/core/Core.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const Core = () => {

// handles the top color behind the clock
const styles = StyleSheet.create({
top: { backgroundColor: topColor, paddingTop: insets.top },
top: { backgroundColor: topColor, paddingTop: insets.top, flex: 1 },
body: {
backgroundColor: topColor,
},
Expand Down
6 changes: 2 additions & 4 deletions src/navigation/rootNavigator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,9 +331,7 @@ export const RootNavigationComponent = ({
options={sharedOptions}
/>
</RootStack.Navigator>
{appIsSetup && !isKeyboardVisible && (
<AppFooterMenu currentScreen={currentScreen} />
)}
{appIsSetup && <AppFooterMenu currentScreen={currentScreen} />}
<ConfirmationModal
isVisible={isWarningVisible}
title="DEVICE SECURITY COMPROMISED"
Expand All @@ -347,7 +345,7 @@ export const RootNavigationComponent = ({

const styles = StyleSheet.create({
parent: {
height: '100%',
flex: 1,
},
})

Expand Down
195 changes: 109 additions & 86 deletions src/screens/profile/ProfileCreateScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import React, { useCallback, useState } from 'react'
import { RegularText } from 'src/components/typography'

import { RootStackScreenProps } from 'navigation/rootNavigator/types'
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native'
import {
Image,
StyleSheet,
TouchableOpacity,
View,
ScrollView,
KeyboardAvoidingView,
Platform,
} from 'react-native'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
import { AvatarIcon } from 'src/components/icons/AvatarIcon'
import { IProfileStore } from 'src/storage/MainStorage'
Expand All @@ -22,8 +30,14 @@ export type CreateProfileScreenProps = {
}
export const ProfileCreateScreen: React.FC<
RootStackScreenProps<'ProfileCreateScreen'> & CreateProfileScreenProps
> = ({ route, profile, setProfile, storeProfile, eraseProfile }) => {
const navigation = route.params.navigation
> = ({
route,
navigation,
profile,
setProfile,
storeProfile,
eraseProfile,
}) => {
const editProfile = route.params.editProfile
const [localProfile, setLocalProfile] = useState<IProfileStore>(profile)
const fullAlias = `${profile.alias}.rsk`
Expand All @@ -47,102 +61,111 @@ export const ProfileCreateScreen: React.FC<
}, [])

return (
<>
<View style={styles.profileHeader}>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<View style={styles.backButton}>
<MaterialIcon name="west" color="white" size={10} />
</View>
</TouchableOpacity>
<MediumText style={styles.titleText}>
{editProfile ? 'edit profile' : 'create profile'}
</MediumText>
{editProfile && (
<TouchableOpacity onPress={deleteAlias}>
<MaterialIcon name="delete" color="white" size={20} />
<KeyboardAvoidingView
style={styles.screen}
keyboardVerticalOffset={100}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
<ScrollView>
<View style={styles.profileHeader}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<View style={styles.backButton}>
<MaterialIcon name="west" color="white" size={10} />
</View>
</TouchableOpacity>
)}
</View>
<View style={styles.container}>
<View style={styles.profileImageContainer}>
{profile.alias ? (
<AvatarIcon value={fullAlias} size={80} />
) : (
<Image
style={styles.profileImage}
source={require('../../images/image_place_holder.jpeg')}
/>
)}
</View>
<View>
<MediumText style={[styles.masterText, styles.textLeftMargin]}>
alias
<MediumText style={styles.titleText}>
{editProfile ? 'edit profile' : 'create profile'}
</MediumText>
{editProfile && (
<TouchableOpacity onPress={deleteAlias}>
<MaterialIcon name="delete" color="white" size={20} />
</TouchableOpacity>
)}
</View>
{!profile?.alias && (
<>
<View style={styles.rowContainer}>
<PrimaryButton
onPress={() => navigation.navigate('SearchDomain')}
accessibilityLabel="register new"
title={'register new'}
<View style={styles.bodyContainer}>
<View style={styles.profileImageContainer}>
{profile.alias ? (
<AvatarIcon value={fullAlias} size={80} />
) : (
<Image
style={styles.profileImage}
source={require('../../images/image_place_holder.jpeg')}
/>
</View>
</>
)}

{!!profile?.alias && (
<View style={styles.rowContainer}>
<View style={styles.aliasContainer}>
<View>
<RegularText style={styles.aliasText}>
{profile?.alias}
</RegularText>
)}
</View>
<View>
<MediumText style={[styles.masterText, styles.textLeftMargin]}>
alias
</MediumText>
</View>
{!profile?.alias && (
<>
<View style={styles.rowContainer}>
<PrimaryButton
onPress={() => navigation.navigate('SearchDomain')}
accessibilityLabel="register new"
title={'register new'}
/>
</View>
<View>
<TouchableOpacity
onPress={() => setProfile({ ...profile, alias: '' })}>
<MaterialIcon name="close" color={colors.white} size={20} />
</TouchableOpacity>
</>
)}

{!!profile?.alias && (
<View style={styles.rowContainer}>
<View style={styles.aliasContainer}>
<View>
<RegularText style={styles.aliasText}>
{profile?.alias}
</RegularText>
</View>
<View>
<TouchableOpacity
onPress={() => setProfile({ ...profile, alias: '' })}>
<MaterialIcon name="close" color={colors.white} size={20} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
)}
)}

<View style={styles.rowContainer}>
<TextInputWithLabel
label="phone"
value={localProfile?.phone}
setValue={onSetPhone}
placeholder="your phone number"
keyboardType="phone-pad"
optional={true}
/>
</View>
<View style={styles.rowContainer}>
<TextInputWithLabel
label="email"
value={localProfile?.email}
setValue={onSetEmail}
placeholder="your email"
optional={true}
/>
</View>
<View style={styles.rowContainer}>
<PrimaryButton
onPress={createProfile}
accessibilityLabel="create"
title={editProfile ? 'save' : 'create'}
disabled={localProfile === emptyProfile}
/>
<View style={styles.rowContainer}>
<TextInputWithLabel
label="phone"
value={localProfile?.phone}
setValue={onSetPhone}
placeholder="your phone number"
keyboardType="phone-pad"
optional={true}
/>
</View>
<View style={styles.rowContainer}>
<TextInputWithLabel
label="email"
value={localProfile?.email}
setValue={onSetEmail}
placeholder="your email"
optional={true}
/>
</View>
<View style={styles.rowContainer}>
<PrimaryButton
onPress={createProfile}
accessibilityLabel="create"
title={editProfile ? 'save' : 'create'}
disabled={localProfile === emptyProfile}
/>
</View>
</View>
</View>
</>
</ScrollView>
</KeyboardAvoidingView>
)
}

const styles = StyleSheet.create({
container: {
screen: {
flex: 1,
backgroundColor: colors.background.darkBlue,
},
bodyContainer: {
flex: 1,
backgroundColor: colors.background.darkBlue,
paddingTop: 10,
Expand Down

0 comments on commit ae78503

Please sign in to comment.