Skip to content

S
safetcut-app
Commit 190fbc8f by OuiAtichat
Options

fix bug android &update camera & mask phoneNo & style timer,swipeable

parent 23afcf27
Showing with 151 additions and 93 deletions
android/app/src/main/java/com/rn_safetcutapp/MainActivity.java
package com.rn_safetcutapp; package com.rn_safetcutapp;
import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity { public class MainActivity extends ReactActivity {
/** /**
* Returns the name of the main component registered from JavaScript. * Returns the name of the main component registered from JavaScript. This is
* This is used to schedule rendering of the component. * used to schedule rendering of the component.
*/ */
@Override @Override
protected String getMainComponentName() { protected String getMainComponentName() {
return "rn_safetcutapp"; return "rn_safetcutapp";
} }
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
} }
components/Form/Input.js
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ 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';
// import { TextInputMask } from 'react-native-masked-text';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...@@ -31,13 +32,14 @@ class Input extends Component { ...@@ -31,13 +32,14 @@ class Input extends Component {
placeholder, placeholder,
keyboardType, keyboardType,
isPass, isPass,
hideCheckmark,
passVisible, passVisible,
onPressEye, onPressEye,
meta: { touched, error, warning }, meta: { touched, error, warning },
input: { onChange, ...restInput }, input: { onChange, ...restInput },
} = this.props; } = this.props;
return ( return (
<> <View>
<View style={styles.container}> <View style={styles.container}>
<TextInput <TextInput
ref={refField} ref={refField}
...@@ -56,7 +58,9 @@ class Input extends Component { ...@@ -56,7 +58,9 @@ class Input extends Component {
<Icon onPress={onPressEye} name={passVisible ? 'eye' : 'eye-off'} style={styles.icon} /> <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]} />)} {hideCheckmark
? null
: touched && (!error && <Icon name="checkmark" style={[styles.icon, theme.textSuccess]} />)}
</View> </View>
</View> </View>
{touched && {touched &&
...@@ -66,7 +70,7 @@ class Input extends Component { ...@@ -66,7 +70,7 @@ class Input extends Component {
(warning && ( (warning && (
<Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text> <Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text>
)))} )))}
</> </View>
); );
} }
} }
......
components/Form/LoginForm.js
...@@ -18,6 +18,7 @@ class Login extends Component { ...@@ -18,6 +18,7 @@ class Login extends Component {
<> <>
<KeyboardAvoidingView style={theme.containerWithVerticalMargin} behavior="position"> <KeyboardAvoidingView style={theme.containerWithVerticalMargin} behavior="position">
<Field <Field
hideCheckmark
forwardRef forwardRef
ref={c => (this.username = c)} ref={c => (this.username = c)}
refField="username" refField="username"
...@@ -30,6 +31,7 @@ class Login extends Component { ...@@ -30,6 +31,7 @@ class Login extends Component {
placeholder={'Username'} placeholder={'Username'}
/> />
<Field <Field
hideCheckmark
forwardRef forwardRef
ref={c => (this.password = c)} ref={c => (this.password = c)}
refField="password" refField="password"
......
components/Form/RegisterForm.js
...@@ -5,6 +5,7 @@ import Input from './Input'; ...@@ -5,6 +5,7 @@ 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'; import { View } from 'native-base';
import normalizePhone from '../../utils/normalizePhone';
// validaition // validaition
const required = value => (value ? undefined : 'This is a required field.'); const required = value => (value ? undefined : 'This is a required field.');
...@@ -25,7 +26,8 @@ const number = value => ...@@ -25,7 +26,8 @@ const number = value =>
const special = value => const special = value =>
value && !/^(?=.*[!@#\$%\^&\*])/i.test(value) ? 'Password must contain at least 1 special character' : undefined; value && !/^(?=.*[!@#\$%\^&\*])/i.test(value) ? 'Password must contain at least 1 special character' : undefined;
const cfpassword = (value, allValues) => (value !== allValues.password ? 'Password not match' : undefined); const cfpassword = (value, allValues) => (value !== allValues.password ? 'Password not match' : undefined);
const phoneNum = value => (value && !/^[0][689][0-9]{8}$/i.test(value) ? 'Invalid number' : undefined); const phoneNum = value =>
value && !/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(value) ? 'Invalid number' : undefined;
class Register extends Component { class Register extends Component {
state = { state = {
...@@ -112,6 +114,7 @@ class Register extends Component { ...@@ -112,6 +114,7 @@ class Register extends Component {
component={Input} component={Input}
validate={[required, phoneNum]} validate={[required, phoneNum]}
placeholder={'Phone number'} placeholder={'Phone number'}
normalize={normalizePhone}
/> />
</View> </View>
{this.props.children} {this.props.children}
......
components/SwipeableRow.js
...@@ -11,12 +11,7 @@ const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons); ...@@ -11,12 +11,7 @@ const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
const Row = ({ data }) => ( const Row = ({ data }) => (
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}> <RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<View <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
style={{
flexDirection: 'row',
paddingVertical: 5,
}}
>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[theme.title]}> <Text style={[theme.title]}>
{data.time} <Text style={[theme.description, theme.textDark]}>{data.period}</Text> {data.time} <Text style={[theme.description, theme.textDark]}>{data.period}</Text>
...@@ -85,6 +80,7 @@ class SwipeableRow extends Component { ...@@ -85,6 +80,7 @@ class SwipeableRow extends Component {
// </RectButton> // </RectButton>
// ); // );
// }; // };
selectedRow = null;
state = { state = {
isVisible: false, isVisible: false,
}; };
...@@ -149,7 +145,9 @@ class SwipeableRow extends Component { ...@@ -149,7 +145,9 @@ class SwipeableRow extends Component {
// leftThreshold={80} // leftThreshold={80}
rightThreshold={40} rightThreshold={40}
// renderLeftActions={this.renderLeftActions} // renderLeftActions={this.renderLeftActions}
renderRightActions={this.renderRightActions} renderRightActions={this.renderRightActions}
containerStyle={{ backgroundColor: color.primary }}
> >
<Row data={this.props.item} /> <Row data={this.props.item} />
</Swipeable> </Swipeable>
...@@ -172,6 +170,7 @@ const styles = StyleSheet.create({ ...@@ -172,6 +170,7 @@ const styles = StyleSheet.create({
rightAction: { rightAction: {
alignItems: 'center', alignItems: 'center',
backgroundColor: color.primary, backgroundColor: color.primary,
width: '20%', width: '20%',
justifyContent: 'center', justifyContent: 'center',
}, },
......
constants/Styles.js
...@@ -42,8 +42,7 @@ export const theme = StyleSheet.create({ ...@@ -42,8 +42,7 @@ export const theme = StyleSheet.create({
}, },
flexContainer: { flexContainer: {
flex: 1, flex: 1,
justifyContent: 'space-evenly', justifyContent: 'space-around',
flexDirection: 'column',
}, },
title: { title: {
fontSize: 22, fontSize: 22,
......
screens/Private/CameraScreen.js
...@@ -8,6 +8,7 @@ import { RNCamera } from 'react-native-camera'; ...@@ -8,6 +8,7 @@ import { RNCamera } from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask'; import BarcodeMask from 'react-native-barcode-mask';
import { withNavigationFocus } from 'react-navigation'; import { withNavigationFocus } from 'react-navigation';
import Permissions from 'react-native-permissions'; import Permissions from 'react-native-permissions';
import { TouchableNativeFeedback } from 'react-native-gesture-handler';
class CameraScreen extends Component { class CameraScreen extends Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
...@@ -24,10 +25,15 @@ class CameraScreen extends Component { ...@@ -24,10 +25,15 @@ class CameraScreen extends Component {
scanned: false, scanned: false,
flashMode: RNCamera.Constants.FlashMode.off, flashMode: RNCamera.Constants.FlashMode.off,
cameraPermission: null, cameraPermission: null,
isWaiting: false,
}; };
componentDidMount = () => { componentDidMount = () => {
this.requestPermission(); this.requestPermission();
//short delay to increase frmaerate when open this screen
setTimeout(() => {
this.setState({ isWaiting: true });
}, 500);
}; };
handleBarCodeScanned = ({ type, data }) => { handleBarCodeScanned = ({ type, data }) => {
...@@ -70,16 +76,18 @@ class CameraScreen extends Component { ...@@ -70,16 +76,18 @@ class CameraScreen extends Component {
</View> </View>
<View style={[styles.center, { flex: 2 }]} /> <View style={[styles.center, { flex: 2 }]} />
<View style={[styles.center, { flex: 1 }]}> <View style={[styles.center, { flex: 1 }]}>
<View style={[styles.torchBtn, styles.center]}> <TouchableNativeFeedback
style={[styles.torchBtn, styles.center]}
onPress={() => {
this.setState({
flashMode:
this.state.flashMode === RNCamera.Constants.FlashMode.off
? RNCamera.Constants.FlashMode.torch
: RNCamera.Constants.FlashMode.off,
});
}}
>
<Icon <Icon
onPress={() => {
this.setState({
flashMode:
this.state.flashMode === RNCamera.Constants.FlashMode.off
? RNCamera.Constants.FlashMode.torch
: RNCamera.Constants.FlashMode.off,
});
}}
type="MaterialCommunityIcons" type="MaterialCommunityIcons"
name={ name={
this.state.flashMode === RNCamera.Constants.FlashMode.off this.state.flashMode === RNCamera.Constants.FlashMode.off
...@@ -94,7 +102,7 @@ class CameraScreen extends Component { ...@@ -94,7 +102,7 @@ class CameraScreen extends Component {
textAlign: 'center', textAlign: 'center',
}} }}
/> />
</View> </TouchableNativeFeedback>
</View> </View>
</View> </View>
</> </>
...@@ -102,12 +110,12 @@ class CameraScreen extends Component { ...@@ -102,12 +110,12 @@ class CameraScreen extends Component {
); );
render() { render() {
const { cameraPermission } = this.state; const { cameraPermission, isWaiting } = this.state;
const { isFocused } = this.props; const { isFocused } = this.props;
return cameraPermission === 'authorized' && isFocused ? ( return cameraPermission === 'authorized' && isFocused && isWaiting ? (
this.renderCamera() this.renderCamera()
) : ( ) : (
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.7)' }} /> <View style={{ flex: 1, backgroundColor: '#fff' }} />
); );
} }
} }
......
screens/Private/TimerScreen/TimerScreen.js
...@@ -408,43 +408,42 @@ export default class TimerScreen extends Component { ...@@ -408,43 +408,42 @@ export default class TimerScreen extends Component {
> >
<ScrollView contentContainerStyle={styles.scrollContainer}> <ScrollView contentContainerStyle={styles.scrollContainer}>
<Text style={theme.title}>Create Timer</Text> <Text style={theme.title}>Create Timer</Text>
<View>
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
<DatePicker
date={this.state.date}
onDateChange={date => this.setState({ date })}
mode="time"
style={{ height: 100 }}
/>
</View>
<View>
<Text style={[theme.normalText, theme.textDark]}>Name</Text>
<InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch />
</View>
<View style={styles.timerInputContainer}> <View>
<View> <Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text> <View style={styles.dayContainer}>
<DatePicker {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => (
date={this.state.date} <TouchableHighlight
onDateChange={date => this.setState({ date })} key={index + item}
mode="time" style={[styles.dayBtn, { borderColor: color.primary }]}
/> >
</View> <Text style={[theme.normalText, { color: color.primary }]}>{item}</Text>
<View> </TouchableHighlight>
<Text style={[theme.normalText, theme.textDark]}>Name</Text> ))}
<InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch />
</View>
<View>
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<View style={styles.dayContainer}>
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => (
<TouchableHighlight
key={index + item}
style={[styles.dayBtn, { borderColor: color.primary }]}
>
<Text style={[theme.normalText, { color: color.primary }]}>{item}</Text>
</TouchableHighlight>
))}
</View>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
<Button <Button
transparent transparent
...@@ -500,13 +499,14 @@ const styles = StyleSheet.create({ ...@@ -500,13 +499,14 @@ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flex: 0.95, flex: 0.95,
top: height * 0.05, top: height * 0.05,
paddingVertical: 30, paddingTop: 20,
paddingBottom: 18,
paddingHorizontal: 25, paddingHorizontal: 25,
backgroundColor: '#fff', backgroundColor: '#fff',
borderTopLeftRadius: 10, borderTopLeftRadius: 10,
borderTopRightRadius: 10, borderTopRightRadius: 10,
alignContent: 'space-between', alignContent: 'space-between',
justifyContent: 'space-evenly', justifyContent: 'space-between',
}, },
timerInputContainer: { timerInputContainer: {
flex: 1, flex: 1,
......
screens/Public/RegisterSuccess.js
...@@ -4,32 +4,39 @@ import { theme, color } from '../../constants/Styles'; ...@@ -4,32 +4,39 @@ import { theme, color } from '../../constants/Styles';
import GradientBtn from '../../components/GradientBtn'; import GradientBtn from '../../components/GradientBtn';
export default class RegisterSuccess extends Component { export default class RegisterSuccess extends Component {
static navigationOptions = {
header: null,
};
render() { render() {
return ( return (
<View style={theme.introContainer}> <View style={[theme.centerContainer, { paddingHorizontal: 50 }]}>
<Text style={[theme.title, theme.textSuccess, theme.centerText]}>Register Successfully</Text> <View stlye={theme.flexContainer}>
<Image <Text style={[theme.title, theme.textSuccess, theme.centerText]}>Register Successfully</Text>
style={{ <Image
width: 135, style={{
height: 135, width: 135,
alignSelf: 'center', height: 135,
marginVertical: 30, alignSelf: 'center',
tintColor: color.primary, marginVertical: 20,
}} tintColor: color.primary,
source={{ }}
uri: 'https://image.flaticon.com/icons/png/512/91/91848.png', source={{
}} uri: 'https://image.flaticon.com/icons/png/512/91/91848.png',
/> }}
<Text style={[theme.title, theme.centerText]}>Check your email</Text> />
<Text style={[theme.normalText, theme.centerText, theme.mt1]}> <Text style={[theme.title, theme.centerText]}>Check your email</Text>
Your registration was successful. {'\n'}Please check your registered email for email verification. <Text style={[theme.normalText, theme.centerText, theme.mt1]}>
</Text> Your registration was successful. {'\n'}Please check your registered email for email
<GradientBtn verification.
onPress={() => { </Text>
this.props.navigation.navigate('Login'); <GradientBtn
}} onPress={() => {
title={'ok'} this.props.navigation.navigate('Login');
/> }}
title={'ok'}
/>
</View>
</View> </View>
); );
} }
......
screens/Public/SendEmailScreen.js
...@@ -26,15 +26,15 @@ export default class SendEmailScreen extends Component { ...@@ -26,15 +26,15 @@ export default class SendEmailScreen extends Component {
}); });
render() { render() {
return ( return (
<View stlye={theme.flexContainer}> <View style={[theme.centerContainer, { paddingHorizontal: 50 }]}>
<View style={{ paddingHorizontal: 50, paddingVertical: 20 }}> <View stlye={theme.flexContainer}>
<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={{
width: 135, width: 135,
height: 135, height: 135,
alignSelf: 'center', alignSelf: 'center',
marginVertical: 30, marginVertical: 20,
tintColor: color.primary, tintColor: color.primary,
}} }}
source={{ source={{
......
utils/normalizePhone.js 0 → 100644
const normalizePhone = (value, previousValue) => {
if (!value) {
return value;
}
const onlyNums = value.replace(/[^\d]/g, '');
if (!previousValue || value.length > previousValue.length) {
// typing forward
if (onlyNums.length === 3) {
return onlyNums + '-';
}
if (onlyNums.length === 6) {
return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3) + '-';
}
}
if (onlyNums.length <= 3) {
return onlyNums;
}
if (onlyNums.length <= 6) {
return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3);
}
return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3, 6) + '-' + onlyNums.slice(6, 10);
};
export default normalizePhone;
yarn.lock
...@@ -5522,10 +5522,9 @@ react-native-elements@^1.1.0: ...@@ -5522,10 +5522,9 @@ react-native-elements@^1.1.0:
react-native-ratings "^6.3.0" react-native-ratings "^6.3.0"
react-native-status-bar-height "^2.2.0" react-native-status-bar-height "^2.2.0"
react-native-gesture-handler@^1.3.0: "react-native-gesture-handler@git://github.com/hyochan/react-native-gesture-handler.git#package-names":
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f" resolved "git://github.com/hyochan/react-native-gesture-handler.git#9ee7279c0ada33d1dfd0b41d99ed7043cb682d21"
integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
dependencies: dependencies:
hoist-non-react-statics "^2.3.1" hoist-non-react-statics "^2.3.1"
invariant "^2.2.2" invariant "^2.2.2"
......
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