Skip to content

S
safetcut-app
Commit f1580554 by OuiAtichat
Options

input focus behavier & restyle more flex & redux form moved

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