Skip to content

S
safetcut-app
Commit f1580554 by OuiAtichat
Options

input focus behavier & restyle more flex & redux form moved

parent e6e4f28c
Showing with 235 additions and 155 deletions
AppNavigation.js
......@@ -224,7 +224,7 @@ const IntroStack = createStackNavigator(
},
{
initialRouteName: 'Login',
defaultNavigationOptions: { header: null },
defaultNavigationOptions: { headerStyle: { borderColor: 'transparent', elevation: 0 } },
}
);
......
components/Form/Input.js
import React from 'react';
import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput } from 'react-native';
import { color, theme } from '../../constants/Styles';
import { Icon } from 'native-base';
......@@ -22,40 +22,53 @@ const styles = StyleSheet.create({
},
});
const Input = ({
placeholder,
keyboardType,
isPass,
passVisible,
onPressEye,
meta: { touched, error, warning },
input: { onChange, ...restInput },
}) => {
return (
<View>
<View style={styles.container}>
<TextInput
placeholder={placeholder ? placeholder : ''}
placeholderTextColor={color.lightGrey}
style={theme.input}
secureTextEntry={isPass ? !passVisible : false}
keyboardType={keyboardType}
onChangeText={onChange}
{...restInput}
/>
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
{isPass && <Icon onPress={onPressEye} name={passVisible ? 'eye' : 'eye-off'} style={styles.icon} />}
{touched && (error && <Icon name="close" style={[styles.icon, theme.textDanger]} />)}
{touched && (!error && <Icon name="checkmark" style={[styles.icon, theme.textSuccess]} />)}
class Input extends Component {
render() {
const {
refField,
onSubmitEditing,
returnKeyType,
placeholder,
keyboardType,
isPass,
passVisible,
onPressEye,
meta: { touched, error, warning },
input: { onChange, ...restInput },
} = this.props;
return (
<>
<View style={styles.container}>
<TextInput
ref={refField}
placeholder={placeholder ? placeholder : ''}
placeholderTextColor={color.lightGrey}
style={theme.input}
secureTextEntry={isPass ? !passVisible : false}
keyboardType={keyboardType}
onChangeText={onChange}
onSubmitEditing={onSubmitEditing}
returnKeyType={returnKeyType}
{...restInput}
/>
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
{isPass && (
<Icon onPress={onPressEye} name={passVisible ? 'eye' : 'eye-off'} style={styles.icon} />
)}
{touched && (error && <Icon name="close" style={[styles.icon, theme.textDanger]} />)}
{touched && (!error && <Icon name="checkmark" style={[styles.icon, theme.textSuccess]} />)}
</View>
</View>
</View>
{touched &&
((error && <Text style={[theme.smDescription, theme.textDanger, styles.errPosition]}>{error}</Text>) ||
(warning && (
<Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text>
)))}
</View>
);
};
{touched &&
((error && (
<Text style={[theme.smDescription, theme.textDanger, styles.errPosition]}>{error}</Text>
)) ||
(warning && (
<Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text>
)))}
</>
);
}
}
export default Input;
components/Form/LoginForm.js
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { View } from 'react-native';
import { View, KeyboardAvoidingView } from 'react-native';
import Input from './Input';
import { theme } from '../../constants/Styles';
import GradientBtn from '../GradientBtn';
......@@ -16,8 +16,13 @@ class Login extends Component {
render() {
return (
<>
<View style={theme.containerWithVerticalMargin}>
<KeyboardAvoidingView style={theme.containerWithVerticalMargin} behavior="position">
<Field
forwardRef
ref={c => (this.username = c)}
refField="username"
returnKeyType="next"
onSubmitEditing={() => this.password.getRenderedComponent().refs.password.focus()}
name="username"
keyboardType="default"
component={Input}
......@@ -25,6 +30,9 @@ class Login extends Component {
placeholder={'Username'}
/>
<Field
forwardRef
ref={c => (this.password = c)}
refField="password"
name="password"
keyboardType="default"
component={Input}
......@@ -34,7 +42,7 @@ class Login extends Component {
passVisible={this.state.passVisible}
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
</View>
</KeyboardAvoidingView>
{this.props.children}
<GradientBtn onPress={this.props.handleSubmit} title={'login'} />
</>
......
components/Form/RegisterForm.js
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { View } from 'react-native';
import { KeyboardAvoidingView } from 'react-native';
import Input from './Input';
import { theme } from '../../constants/Styles';
import GradientBtn from '../GradientBtn';
import { View } from 'native-base';
// validaition
const required = value => (value ? undefined : 'This is a required field.');
......@@ -30,11 +31,17 @@ class Register extends Component {
state = {
passVisible: false,
};
render() {
return (
<>
<View style={theme.containerWithVerticalMargin}>
<Field
forwardRef
ref={c => (this.name = c)}
refField="name"
returnKeyType="next"
onSubmitEditing={() => this.surname.getRenderedComponent().refs.surname.focus()}
name="name"
keyboardType="default"
component={Input}
......@@ -42,6 +49,11 @@ class Register extends Component {
placeholder="Name"
/>
<Field
forwardRef
ref={c => (this.surname = c)}
refField="surname"
returnKeyType="next"
onSubmitEditing={() => this.email.getRenderedComponent().refs.email.focus()}
name="surname"
keyboardType="default"
component={Input}
......@@ -49,6 +61,11 @@ class Register extends Component {
placeholder="Surname"
/>
<Field
forwardRef
ref={c => (this.email = c)}
refField="email"
returnKeyType="next"
onSubmitEditing={() => this.password.getRenderedComponent().refs.password.focus()}
name="email"
keyboardType="email-address"
component={Input}
......@@ -56,6 +73,11 @@ class Register extends Component {
placeholder="E-mail"
/>
<Field
forwardRef
ref={c => (this.password = c)}
refField="password"
returnKeyType="next"
onSubmitEditing={() => this.cfpassword.getRenderedComponent().refs.cfpassword.focus()}
name="password"
keyboardType="default"
component={Input}
......@@ -66,6 +88,11 @@ class Register extends Component {
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
<Field
forwardRef
ref={c => (this.cfpassword = c)}
refField="cfpassword"
returnKeyType="next"
onSubmitEditing={() => this.phoneno.getRenderedComponent().refs.phoneno.focus()}
name="cfpassword"
keyboardType="default"
component={Input}
......@@ -76,6 +103,10 @@ class Register extends Component {
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
<Field
forwardRef
ref={c => (this.phoneno = c)}
refField="phoneno"
// onSubmitEditing={this.props.handleSubmit}
name="phoneno"
keyboardType="phone-pad"
component={Input}
......
components/IoniconsHeaderButton.js
......@@ -3,5 +3,5 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import { HeaderButton } from 'react-navigation-header-buttons';
export default (IoniconsHeaderButton = props => (
<HeaderButton {...props} IconComponent={Ionicons} iconSize={28} color="#fff" />
<HeaderButton {...props} IconComponent={Ionicons} iconSize={28} color={props.dark ? '#000' : '#fff'} />
));
constants/Styles.js
......@@ -30,7 +30,8 @@ export const theme = StyleSheet.create({
justifyContent: 'center',
},
containerWithVerticalMargin: {
marginVertical: 20,
marginTop: 5,
marginBottom: 20,
},
containerWithPadding: {
padding: 15,
......@@ -39,6 +40,11 @@ export const theme = StyleSheet.create({
top: '12%',
paddingHorizontal: 50,
},
flexContainer: {
flex: 1,
justifyContent: 'space-evenly',
flexDirection: 'column',
},
title: {
fontSize: 22,
fontWeight: 'bold',
......@@ -66,7 +72,7 @@ export const theme = StyleSheet.create({
},
input: {
fontSize: 16,
marginTop: 20,
paddingTop: 20,
paddingBottom: 5,
fontFamily: 'Avenir-Roman',
color: color.grey,
......
package.json
......@@ -7,8 +7,7 @@
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest",
"lint": "eslint .",
"postinstall": "yarn react-native-jetifier"
"lint": "eslint ."
},
"dependencies": {
"@eva-design/eva": "^1.0.1",
......
reduxStore/index.js
// import allReducers from './reducers';
// import { createStore, applyMiddleware } from 'redux';
// import thunk from 'redux-thunk';
import allReducers from './reducers';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// export default (store = createStore(allReducers, applyMiddleware(thunk)));
import { createStore, combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
const reducers = combineReducers({
form,
// your other reducers
});
export default createStore(reducers);
export default (store = createStore(allReducers, applyMiddleware(thunk)));
reduxStore/reducers/index.js
import { combineReducers } from 'redux';
import authReducer from './authReducer';
import { reducer as form } from 'redux-form';
export default combineReducers({
token: authReducer,
form,
});
screens/Public/ForgotPasswordScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, View, Icon } from 'native-base';
import { Text, Icon } from 'native-base';
import { View } from 'react-native';
import { theme } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/InputField';
import GradientBtn from '../../components/GradientBtn';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
// validations
const required = value => (value ? undefined : 'This is a required field.');
const email = value =>
......@@ -11,6 +14,16 @@ const email = value =>
? 'Please provide a valid email address.'
: undefined;
export default class ForgotPasswordScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: undefined,
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} dark />
</HeaderButtons>
),
headerRight: null,
});
state = {
errors: [],
email: '',
......@@ -36,46 +49,37 @@ export default class ForgotPasswordScreen extends Component {
render() {
return (
<Container>
<Icon
name={'arrow-round-back'}
style={{ position: 'absolute', top: '6%', left: '5%' }}
onPress={() => this.props.navigation.goBack()}
/>
<Content style={theme.introContainer}>
<Text style={[theme.title, theme.centerText]}>Forgot Password</Text>
<View style={{ marginTop: 40 }}>
<Text style={theme.normalText}>Please enter your email address.</Text>
<Text style={theme.normalText}>
You will receive a link to create a new password via email.
</Text>
</View>
<Form
ref={ref => (this.registerForm = ref)}
validate={true}
submit={this.submitSuccess.bind(this)}
failed={this.submitFailed.bind(this)}
errors={this.state.errors}
style={theme.containerWithVerticalMargin}
>
<Field
required
component={InputField}
validations={[required, email]}
name="email"
value={this.state.email}
onChangeText={val => this.setState({ email: val })}
placeholder="Your E-mail"
/>
</Form>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('SendEmail');
}}
title={'send'}
<View style={theme.introContainer}>
<Text style={[theme.title, theme.centerText]}>Forgot Password</Text>
<View style={{ marginTop: 40 }}>
<Text style={theme.normalText}>Please enter your email address.</Text>
<Text style={theme.normalText}>You will receive a link to create a new password via email.</Text>
</View>
<Form
ref={ref => (this.registerForm = ref)}
validate={true}
submit={this.submitSuccess.bind(this)}
failed={this.submitFailed.bind(this)}
errors={this.state.errors}
style={theme.containerWithVerticalMargin}
>
<Field
required
component={InputField}
validations={[required, email]}
name="email"
value={this.state.email}
onChangeText={val => this.setState({ email: val })}
placeholder="Your E-mail"
/>
</Content>
</Container>
</Form>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('SendEmail');
}}
title={'send'}
/>
</View>
);
}
}
screens/Public/LoginScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, Left, Right, Row, CheckBox } from 'native-base';
import { Text, Left, Right, Row, CheckBox } from 'native-base';
import { theme, color } from '../../constants/Styles';
import AsyncStorage from '@react-native-community/async-storage';
import LoginForm from '../../components/Form/LoginForm';
import { KeyboardAvoidingView } from 'react-native';
export default class LoginScreen extends Component {
static navigationOptions = {
header: null,
};
state = {
isCheck: false,
pass: '',
......@@ -32,47 +37,45 @@ export default class LoginScreen extends Component {
render() {
return (
<Container>
<Content style={theme.introContainer}>
<Text style={[theme.title, theme.textDark]}>Login</Text>
<LoginForm onSubmit={this.submit}>
<Row style={theme.mt1}>
<Left>
<Row style={{ alignItems: 'center' }}>
<CheckBox
color={color.grey}
checked={this.state.isCheck}
onPress={() => this.setState({ isCheck: !this.state.isCheck })}
style={{ left: 0 }}
/>
<Text style={[theme.description, { marginLeft: 5 }]}>Remember me</Text>
</Row>
</Left>
<Right>
<Text
style={theme.description}
onPress={() => {
this.props.navigation.navigate('Forget');
}}
>
Forgot password?
</Text>
</Right>
</Row>
</LoginForm>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginTop: 20 }]}>
Don't have an account?{' '}
<Text
style={[theme.normalText, theme.textDanger, { fontWeight: 'bold' }]}
onPress={() => {
this.props.navigation.navigate('Register');
}}
>
Register
</Text>
<KeyboardAvoidingView style={theme.introContainer}>
<Text style={[theme.title, theme.textDark]}>Login</Text>
<LoginForm onSubmit={this.submit}>
<Row style={theme.mt1}>
<Left>
<Row style={{ alignItems: 'center' }}>
<CheckBox
color={color.grey}
checked={this.state.isCheck}
onPress={() => this.setState({ isCheck: !this.state.isCheck })}
style={{ left: 0 }}
/>
<Text style={[theme.description, { marginLeft: 5 }]}>Remember me</Text>
</Row>
</Left>
<Right>
<Text
style={theme.description}
onPress={() => {
this.props.navigation.navigate('Forget');
}}
>
Forgot password?
</Text>
</Right>
</Row>
</LoginForm>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginTop: 20 }]}>
Don't have an account?{' '}
<Text
style={[theme.normalText, theme.textDanger, { fontWeight: 'bold' }]}
onPress={() => {
this.props.navigation.navigate('Register');
}}
>
Register
</Text>
</Content>
</Container>
</Text>
</KeyboardAvoidingView>
);
}
}
screens/Public/OnboardingScreen.js
......@@ -27,6 +27,10 @@ const pages = [
},
];
export default class OnboardingScreen extends Component {
static navigationOptions = {
header: null,
};
state = {
loading: true,
};
......
screens/Public/RegisterScreen.js
import React, { Component } from 'react';
import { Container, Text, CheckBox, Icon } from 'native-base';
import { color, theme } from '../../constants/Styles';
import { KeyboardAvoidingView, View } from 'react-native';
import { KeyboardAvoidingView, View, ScrollView } from 'react-native';
import RegisterForm from '../../components/Form/RegisterForm';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
export default class RegisterScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: undefined,
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} dark />
</HeaderButtons>
),
headerRight: null,
});
state = {
isCheck: false,
};
......@@ -23,14 +36,9 @@ export default class RegisterScreen extends Component {
render() {
return (
<Container>
<Icon
name={'arrow-round-back'}
style={{ position: 'absolute', top: '6%', left: '5%' }}
onPress={() => this.props.navigation.goBack()}
/>
<KeyboardAvoidingView style={theme.introContainer} behavior="padding" enabled>
<Text style={theme.title}>Register</Text>
<View style={[theme.flexContainer]}>
<Text style={[theme.title, { paddingHorizontal: 50 }]}>Register</Text>
<ScrollView contentContainerStyle={{ paddingHorizontal: 50 }}>
<RegisterForm onSubmit={this.submit}>
<View style={theme.rowContainer}>
<CheckBox
......@@ -49,8 +57,8 @@ export default class RegisterScreen extends Component {
</Text>
</View>
</RegisterForm>
</KeyboardAvoidingView>
</Container>
</ScrollView>
</View>
);
}
}
screens/Public/SendEmailScreen.js
import React, { Component } from 'react';
import { Container, Text, Content, View, Button } from 'native-base';
import { Text, View, Button } from 'native-base';
import { Image, StyleSheet } from 'react-native';
import { theme, color } from '../../constants/Styles';
import GradientBtn from '../../components/GradientBtn';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
const styles = StyleSheet.create({
successText: {
......@@ -13,10 +15,19 @@ const styles = StyleSheet.create({
},
});
export default class SendEmailScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: undefined,
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.pop()} dark />
</HeaderButtons>
),
headerRight: null,
});
render() {
return (
<Container>
<Content style={theme.introContainer}>
<View stlye={theme.flexContainer}>
<View style={{ paddingHorizontal: 50, paddingVertical: 20 }}>
<Text style={[theme.title, theme.textSuccess, theme.centerText]}>Reset Password Successfully</Text>
<Image
style={{
......@@ -45,8 +56,8 @@ export default class SendEmailScreen extends Component {
<Button full transparent style={{ marginTop: 10 }}>
<Text style={theme.normalText}>RESEND</Text>
</Button>
</Content>
</Container>
</View>
</View>
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment