Skip to content

S
safetcut-app
Commit 36621823 by Prachpawee
Options

add linear gradient

parent 88a3f7ff
Showing with 134 additions and 78 deletions
src/components/layout/InputField.js
import React from 'react';
import { TextInput, Text, View } from 'react-native';
import { Icon, Item, Input } from 'native-base';
import { Icon } from 'native-base';
import { color, theme } from '../../constants/Styles';
const InputField = ({
......@@ -14,25 +14,33 @@ const InputField = ({
isPass,
}) => {
return (
<View style={theme.inputContainer}>
<TextInput
value={value && value}
onChangeText={onChangeText ? val => onChangeText(val) : null}
placeholder={placeholder ? placeholder : ''}
placeholderTextColor={color.grey2}
disabled={disabled}
style={customStyle ? customStyle : {}}
secureTextEntry={isPass}
/>
<View>
<View style={theme.inputContainer}>
<TextInput
value={value && value}
onChangeText={onChangeText ? val => onChangeText(val) : null}
placeholder={placeholder ? placeholder : ''}
placeholderTextColor={color.grey2}
disabled={disabled}
style={customStyle ? customStyle : {}}
secureTextEntry={isPass}
/>
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
<Icon key={`${index}`} name="close" style={theme.inputErrIcon} />
) : null
)}
</View>
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
// <Text key={`${index}`} style={{ color: 'red', marginLeft: 5, marginTop: 5 }}>
// {item.error}
// </Text>
<Icon key={`${index}`} name="close" style={theme.inputErr} />
<Text key={`${index}`} style={theme.inputErrText}>
{item.error}
</Text>
) : null
)}
</View>
......
src/constants/Styles.js
......@@ -5,6 +5,7 @@ export const color = {
grey2: '#cacaca',
grey3: '#4a4a4a',
primary: '#f44c4c',
red1: '#fc3d3d',
};
export const theme = StyleSheet.create({
......@@ -22,19 +23,27 @@ export const theme = StyleSheet.create({
marginBottom: 10,
marginTop: 40,
},
redRoundedBtn: {
borderRadius: 40,
backgroundColor: color.primary,
roundedBtn: {
alignItems: 'center',
borderRadius: 100,
},
input: {
width: 300,
// borderBottomColor: '#cfd7db',
// borderBottomWidth: 1,
marginLeft: 5,
color: color.grey1,
marginTop: 30,
},
inputErr: { color: 'red', position: 'absolute', right: 5, bottom: 5, fontSize: 20 },
inputErrIcon: {
color: color.red1,
position: 'absolute',
right: 5,
bottom: 5,
fontSize: 20,
},
inputErrText: {
color: color.red1,
fontSize: 10,
},
inputContainer: {
flex: 1,
flexDirection: 'row',
......
src/screens/public/forgotPassword.js
import React, { Component } from 'react';
import { Container, Text, Content, Input, View, Form, Item, Button } from 'native-base';
import { theme } from '../../constants/Styles';
import { theme, color } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
import { LinearGradient } from 'expo-linear-gradient';
export default class forgotPassword extends Component {
render() {
return (
......@@ -9,26 +10,36 @@ export default class forgotPassword extends Component {
<Content style={theme.startContainer}>
<Text style={theme.startTitle}>Forgot Password</Text>
<View style={{ paddingHorizontal: 15, marginTop: 40 }}>
<Text style={{ color: '#808080' }}>Please enter your email address.</Text>
<Text style={{ color: '#808080' }}>
<Text style={{ color: color.grey1 }}>Please enter your email address.</Text>
<Text style={{ color: color.grey1 }}>
You will receive a link to create a new password via email.
</Text>
</View>
<Form style={theme.startFormContainer}>
<Item>
<Input placeholder="E-mail" placeholderTextColor={'#cacaca'} style={{ color: '#808080' }} />
<Input
placeholder="Your E-mail"
placeholderTextColor={color.grey2}
style={{ color: color.grey1 }}
/>
</Item>
</Form>
<Button
full
style={[theme.redRoundedBtn, { marginTop: 75 }]}
onPress={() => {
Actions.SendEmail();
}}
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 75 }]}
>
<Text>SEND</Text>
</Button>
<Button
full
transparent
onPress={() => {
Actions.SendEmail();
}}
>
<Text style={{ color: 'white' }}>SEND</Text>
</Button>
</LinearGradient>
</Content>
</Container>
);
......
src/screens/public/login.js
......@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Container, Text, Content, Input, Radio, Form, Item, Left, Right, Button, Row } from 'native-base';
import { theme } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
import { LinearGradient } from 'expo-linear-gradient';
export default class login extends Component {
constructor(props) {
super(props);
......@@ -58,15 +59,22 @@ export default class login extends Component {
</Text>
</Right>
</Row>
<Button
full
style={[theme.redRoundedBtn, { marginTop: 75 }]}
onPress={() => {
Actions.HomePage();
}}
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 75 }]}
>
<Text>LOGIN</Text>
</Button>
<Button
full
transparent
onPress={() => {
Actions.HomePage();
}}
>
<Text style={{ color: 'white' }}>LOGIN</Text>
</Button>
</LinearGradient>
<Text style={{ color: '#4a4a4a', textAlign: 'center', marginTop: 20 }}>
Don't have an account?{' '}
<Text
......
src/screens/public/register.js
import React, { Component } from 'react';
import { Container, Text, Content, Left, Button, Row, CheckBox } from 'native-base';
import { Container, Text, Content, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/layout/InputField';
import { LinearGradient } from 'expo-linear-gradient';
import { Actions } from 'react-native-router-flux';
// validatioms
// validations
const required = value => (value ? undefined : 'This is a required field.');
const minChar = value => (value && !/^.{6,}$/i.test(value) ? 'At least 6 characters' : undefined);
const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,5}$/i.test(value)
? 'Please provide a valid email address.'
......@@ -40,6 +43,7 @@ export default class register extends Component {
submitSuccess() {
console.log('Submit Success!');
// Actions.LoginPage();
}
submitFailed() {
......@@ -96,7 +100,7 @@ export default class register extends Component {
<Field
required
component={InputField}
validations={[required]}
validations={[required, minChar]}
name="password"
value={this.state.password}
onChangeText={val => this.setState({ password: val })}
......@@ -108,7 +112,7 @@ export default class register extends Component {
<Field
required
component={InputField}
validations={[required, cfPassword]}
validations={[required, cfPassword, minChar]}
name="cfPassword"
value={this.state.cfPassword}
onChangeText={val => this.setState({ cfPassword: val })}
......@@ -129,30 +133,33 @@ export default class register extends Component {
/>
</Form>
<Row style={{ marginTop: 30 }}>
<Left>
<Row>
<CheckBox
color={'#888888'}
checked={this.state.isCheck}
onPress={() =>
this.setState(() => {
return (this.state.isCheck = !this.state.isCheck);
})
}
/>
<Text style={{ color: '#9ea0a5', marginLeft: 15 }}>
I have read the{' '}
<Text style={{ textDecorationLine: 'underline', color: '#56575a' }}>
Terms and Conditions
</Text>
.
</Text>
</Row>
</Left>
<CheckBox
color={'#888888'}
checked={this.state.isCheck}
onPress={() =>
this.setState(() => {
return (this.state.isCheck = !this.state.isCheck);
})
}
/>
<Text style={{ color: '#9ea0a5', marginLeft: 15 }}>
I have read the{' '}
<Text style={{ textDecorationLine: 'underline', color: '#56575a' }}>
Terms and Conditions
</Text>
.
</Text>
</Row>
<Button full style={[theme.redRoundedBtn, { marginTop: 50 }]} onPress={this.submitForm.bind(this)}>
<Text>CONTINUE</Text>
</Button>
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 50 }]}
>
<Button full transparent onPress={this.submitForm.bind(this)}>
<Text style={{ color: 'white' }}>CONTINUE</Text>
</Button>
</LinearGradient>
</Content>
</Container>
);
......
src/screens/public/sendEmail.js
......@@ -3,13 +3,19 @@ import { Container, Text, Content, View, Button } from 'native-base';
import { Image } from 'react-native';
import { theme } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
import { LinearGradient } from 'expo-linear-gradient';
export default class sendEmail extends Component {
render() {
return (
<Container>
<Content style={theme.startContainer}>
<Image
style={{ width: 135, height: 135, alignSelf: 'center', borderRadius: 100 }}
style={{
width: 135,
height: 135,
alignSelf: 'center',
borderRadius: 100,
}}
source={{
uri:
'https://constructioncompanieslebanon.com/wp-content/uploads/2018/02/6ba96ffc82c13a9c4271233ab23e9afe.jpg',
......@@ -21,15 +27,22 @@ export default class sendEmail extends Component {
We sent an email with instructions for resetting your password.
</Text>
</View>
<Button
full
style={[theme.redRoundedBtn, { marginTop: 60 }]}
onPress={() => {
Actions.LoginPage();
}}
<LinearGradient
colors={['#f97070', '#f44c4c']}
start={[0, 0]}
end={[1, 0]}
style={[theme.roundedBtn, { marginTop: 60 }]}
>
<Text>DONE</Text>
</Button>
<Button
full
transparent
onPress={() => {
Actions.LoginPage();
}}
>
<Text style={{ color: 'white' }}>DONE</Text>
</Button>
</LinearGradient>
<Button transparent style={{ marginTop: 40, alignSelf: 'center' }}>
<Text style={{ color: '#9b9b9b' }}>RESEND</Text>
</Button>
......
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