Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Register page #2

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
register page and fixed rendering of error message on input
  • Loading branch information
Daniel Adepoju committed Apr 22, 2020
commit e1665a67400cbaebb6ac7d4bdaa6250680ff3133
7 changes: 7 additions & 0 deletions src/assets/style.js
Original file line number Diff line number Diff line change
@@ -130,4 +130,11 @@ export const loginScreenStyles = {
textAlign: 'center',
marginBottom: scale(10),
},
bottomText: {
fontFamily: fonts.regularText.fontFamily,
fontSize: scale(fonts.h5.fontSize - 1),
color: colors.abuttoDark,
textAlign: 'center',
marginBottom: scale(10),
},
};
71 changes: 71 additions & 0 deletions src/assets/svgs/AppSvg.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';
import {Svg, Rect, Path, G} from 'react-native-svg';
import {scale} from '../style';


export const MenuSVG = ({color}) => (
<Svg
width={scale(27)}
height={scale(15)}
viewBox="0 0 27 15"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<Rect
x="4.40816"
width="21.4898"
height="2.7551"
rx="1.37755"
fill={color || '#E5E5E5'}
/>
<Rect
y="6.06128"
width="21.4898"
height="2.7551"
rx="1.37755"
fill={color || '#E5E5E5'}
/>
<Rect
x="5.5102"
y="12.1224"
width="21.4898"
height="2.7551"
rx="1.37755"
fill={color || '#E5E5E5'}
/>
</Svg>
);

export const RightChevronSVG = ({color, size = 1}) => (
<Svg
width={scale(18 * size)}
height={scale(18 * size)}
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<G id="chevron">
<Path
id="chevron_2"
d="M6.22125 12.4425L9.65625 9L6.22125 5.5575L7.27875 4.5L11.7788 9L7.27875 13.5L6.22125 12.4425Z"
fill={color || '#F6FEFF'}
/>
</G>
</Svg>
);

export const LeftChevronSVG = ({color, size = 1}) => (
<Svg
width={scale(18 * size)}
height={scale(18 * size)}
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<G id="arrow_back_ios_24px">
<Path
id="icon/navigation/arrow_back_ios_24px"
d="M13.3762 2.90251L12.0412 1.57501L4.62375 9.00001L12.0487 16.425L13.3762 15.0975L7.27875 9.00001L13.3762 2.90251Z"
fill={color || '#F6FEFF'}
fillOpacity="0.54"
/>
</G>
</Svg>
);
122 changes: 63 additions & 59 deletions src/components/FloatingLabelInput.js
Original file line number Diff line number Diff line change
@@ -59,69 +59,73 @@ const FloatingLabelInput = forwardRef((props, ref) => {
};
return (
<TouchableWithoutFeedback onPress={focusInput}>
<View
style={{
// paddingTop: Platform.OS === 'ios' ? 18 : 0,
marginVertical: scale(10),
paddingHorizontal: scale(5),
paddingBottom: 0,
height: scale(48),
borderRadius: scale(5),
borderWidth: 2,
borderColor: props.error
? colors.abuttoError
: state.isFocused
? colors.abuttoBlue
: colors.abuttoGrey,
}}>
<Animated.Text style={labelStyle}>{label}</Animated.Text>
<TextInput
{...props}
ref={ref}
secureTextEntry={props.secureTextEntry ? secureTextInput : false}
enablesReturnKeyAutomatically={true}
<View>
<View
style={{
// height: 26,
marginBottom: -scale(10),
// height: scale(40),
flex: 1,
fontFamily: fonts.regularText.fontFamily,
fontSize: scale(fonts.h5.fontSize),
color: colors.abuttoDark,
// paddingTop: Platform.OS === 'ios' ? 18 : 0,
marginTop: scale(10),
paddingHorizontal: scale(5),
paddingBottom: 0,
}}
onFocus={handleFocus}
onBlur={handleBlur}
/>
{icon ? (
props.secureTextEntry ? (
<TouchableOpacity
style={{
top: -25,
display: 'flex',
marginLeft: '91%',
}}
onPress={() => {
setState((prevState) => ({
secureTextInput: !prevState.secureTextInput,
}));
}}>
<View>
height: scale(48),
borderRadius: scale(5),
borderWidth: 2,
borderColor: props.error
? colors.abuttoError
: state.isFocused
? colors.abuttoBlue
: colors.abuttoGrey,
}}>
<Animated.Text style={labelStyle}>{label}</Animated.Text>
<TextInput
{...props}
ref={ref}
secureTextEntry={props.secureTextEntry ? secureTextInput : false}
enablesReturnKeyAutomatically={true}
style={{
// height: 26,
marginBottom: -scale(10),
// height: scale(40),
flex: 1,
fontFamily: fonts.regularText.fontFamily,
fontSize: scale(fonts.h5.fontSize),
color: colors.abuttoDark,
paddingBottom: 0,
}}
onFocus={handleFocus}
onBlur={handleBlur}
/>
{icon ? (
props.secureTextEntry ? (
<TouchableOpacity
style={{
top: -25,
display: 'flex',
marginLeft: '91%',
}}
onPress={() => {
setState((prevState) => ({
secureTextInput: !prevState.secureTextInput,
}));
}}>
<View>
<Image source={icon} />
</View>
</TouchableOpacity>
) : (
<View
style={{
top: -25,
display: 'flex',
marginLeft: '91%',
}}>
<Image source={icon} />
</View>
</TouchableOpacity>
) : (
<View
style={{
top: -25,
display: 'flex',
marginLeft: '91%',
}}>
<Image source={icon} />
</View>
)
) : null}
<Text type="small" style={{color: colors.abuttoError}}>
)
) : null}
</View>
<Text
type="small"
style={{color: colors.abuttoError, textAlign: 'right'}}>
{props.error}
</Text>
</View>
2 changes: 2 additions & 0 deletions src/navigators/AuthNavigator.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Login from '../screens/Auth/Login';
import Intro from '../screens/Auth/Intro';
import Register from '../screens/Auth/Register';

const AuthStack = createStackNavigator();

@@ -14,6 +15,7 @@ export default function AuthNavigator() {
}}>
<AuthStack.Screen name="Intro" component={Intro} />
<AuthStack.Screen name="Login" component={Login} />
<AuthStack.Screen name="Register" component={Register} />
</AuthStack.Navigator>
);
}
34 changes: 20 additions & 14 deletions src/screens/Auth/Intro.js
Original file line number Diff line number Diff line change
@@ -50,31 +50,37 @@ export default function Intro(props) {
alignItems: 'center',
paddingTop: scaleVertical(10),
}}>
<Button text="email or phone" onPress={() => {}} type="light" />
<Button
text="email or phone"
onPress={() => {
props.navigation.navigate('Register');
}}
type="light"
/>
</View>
<View
style={{
paddingVertical: scaleVertical(10),
alignItems: 'center',
}}>
<View
<TouchableOpacity
style={{
flexDirection: 'row',
alignItems: 'center',
paddingVertical: scale(5),
}}
onPress={() => {
props.navigation.navigate('Login');
}}>
<Text style={introScreenStyles.noAccountText}>
Already have an account?{' '}
</Text>
<TouchableOpacity
<View
style={{
paddingVertical: scale(5),
}}
onPress={() => {
props.navigation.navigate('Login');
flexDirection: 'row',
alignItems: 'center',
}}>
<Text style={introScreenStyles.noAccountText}>
Already have an account?{' '}
</Text>
<Text style={introScreenStyles.link}>Log in</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</ScrollView>
Loading