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;
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 {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
* Returns the name of the main component registered from JavaScript. This is
* used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
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';
import { StyleSheet, View, Text, TextInput } from 'react-native';
import { color, theme } from '../../constants/Styles';
import { Icon } from 'native-base';
// import { TextInputMask } from 'react-native-masked-text';
const styles = StyleSheet.create({
container: {
......@@ -31,13 +32,14 @@ class Input extends Component {
placeholder,
keyboardType,
isPass,
hideCheckmark,
passVisible,
onPressEye,
meta: { touched, error, warning },
input: { onChange, ...restInput },
} = this.props;
return (
<>
<View>
<View style={styles.container}>
<TextInput
ref={refField}
......@@ -56,7 +58,9 @@ class Input extends Component {
<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]} />)}
{hideCheckmark
? null
: touched && (!error && <Icon name="checkmark" style={[styles.icon, theme.textSuccess]} />)}
</View>
</View>
{touched &&
......@@ -66,7 +70,7 @@ class Input extends Component {
(warning && (
<Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text>
)))}
</>
</View>
);
}
}
......
components/Form/LoginForm.js
......@@ -18,6 +18,7 @@ class Login extends Component {
<>
<KeyboardAvoidingView style={theme.containerWithVerticalMargin} behavior="position">
<Field
hideCheckmark
forwardRef
ref={c => (this.username = c)}
refField="username"
......@@ -30,6 +31,7 @@ class Login extends Component {
placeholder={'Username'}
/>
<Field
hideCheckmark
forwardRef
ref={c => (this.password = c)}
refField="password"
......
components/Form/RegisterForm.js
......@@ -5,6 +5,7 @@ import Input from './Input';
import { theme } from '../../constants/Styles';
import GradientBtn from '../GradientBtn';
import { View } from 'native-base';
import normalizePhone from '../../utils/normalizePhone';
// validaition
const required = value => (value ? undefined : 'This is a required field.');
......@@ -25,7 +26,8 @@ const number = value =>
const special = value =>
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 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 {
state = {
......@@ -112,6 +114,7 @@ class Register extends Component {
component={Input}
validate={[required, phoneNum]}
placeholder={'Phone number'}
normalize={normalizePhone}
/>
</View>
{this.props.children}
......
components/SwipeableRow.js
......@@ -11,12 +11,7 @@ const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
const Row = ({ data }) => (
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<View
style={{
flexDirection: 'row',
paddingVertical: 5,
}}
>
<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
<View style={{ flex: 1 }}>
<Text style={[theme.title]}>
{data.time} <Text style={[theme.description, theme.textDark]}>{data.period}</Text>
......@@ -85,6 +80,7 @@ class SwipeableRow extends Component {
// </RectButton>
// );
// };
selectedRow = null;
state = {
isVisible: false,
};
......@@ -149,7 +145,9 @@ class SwipeableRow extends Component {
// leftThreshold={80}
rightThreshold={40}
// renderLeftActions={this.renderLeftActions}
renderRightActions={this.renderRightActions}
containerStyle={{ backgroundColor: color.primary }}
>
<Row data={this.props.item} />
</Swipeable>
......@@ -172,6 +170,7 @@ const styles = StyleSheet.create({
rightAction: {
alignItems: 'center',
backgroundColor: color.primary,
width: '20%',
justifyContent: 'center',
},
......
constants/Styles.js
......@@ -42,8 +42,7 @@ export const theme = StyleSheet.create({
},
flexContainer: {
flex: 1,
justifyContent: 'space-evenly',
flexDirection: 'column',
justifyContent: 'space-around',
},
title: {
fontSize: 22,
......
screens/Private/CameraScreen.js
......@@ -8,6 +8,7 @@ import { RNCamera } from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';
import { withNavigationFocus } from 'react-navigation';
import Permissions from 'react-native-permissions';
import { TouchableNativeFeedback } from 'react-native-gesture-handler';
class CameraScreen extends Component {
static navigationOptions = ({ navigation }) => ({
......@@ -24,10 +25,15 @@ class CameraScreen extends Component {
scanned: false,
flashMode: RNCamera.Constants.FlashMode.off,
cameraPermission: null,
isWaiting: false,
};
componentDidMount = () => {
this.requestPermission();
//short delay to increase frmaerate when open this screen
setTimeout(() => {
this.setState({ isWaiting: true });
}, 500);
};
handleBarCodeScanned = ({ type, data }) => {
......@@ -70,16 +76,18 @@ class CameraScreen extends Component {
</View>
<View style={[styles.center, { flex: 2 }]} />
<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
onPress={() => {
this.setState({
flashMode:
this.state.flashMode === RNCamera.Constants.FlashMode.off
? RNCamera.Constants.FlashMode.torch
: RNCamera.Constants.FlashMode.off,
});
}}
type="MaterialCommunityIcons"
name={
this.state.flashMode === RNCamera.Constants.FlashMode.off
......@@ -94,7 +102,7 @@ class CameraScreen extends Component {
textAlign: 'center',
}}
/>
</View>
</TouchableNativeFeedback>
</View>
</View>
</>
......@@ -102,12 +110,12 @@ class CameraScreen extends Component {
);
render() {
const { cameraPermission } = this.state;
const { cameraPermission, isWaiting } = this.state;
const { isFocused } = this.props;
return cameraPermission === 'authorized' && isFocused ? (
return cameraPermission === 'authorized' && isFocused && isWaiting ? (
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 {
>
<ScrollView contentContainerStyle={styles.scrollContainer}>
<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>
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
<DatePicker
date={this.state.date}
onDateChange={date => this.setState({ date })}
mode="time"
/>
</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>
<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>
<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 style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
<Button
transparent
......@@ -500,13 +499,14 @@ const styles = StyleSheet.create({
scrollContainer: {
flex: 0.95,
top: height * 0.05,
paddingVertical: 30,
paddingTop: 20,
paddingBottom: 18,
paddingHorizontal: 25,
backgroundColor: '#fff',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
alignContent: 'space-between',
justifyContent: 'space-evenly',
justifyContent: 'space-between',
},
timerInputContainer: {
flex: 1,
......
screens/Public/RegisterSuccess.js
......@@ -4,32 +4,39 @@ import { theme, color } from '../../constants/Styles';
import GradientBtn from '../../components/GradientBtn';
export default class RegisterSuccess extends Component {
static navigationOptions = {
header: null,
};
render() {
return (
<View style={theme.introContainer}>
<Text style={[theme.title, theme.textSuccess, theme.centerText]}>Register Successfully</Text>
<Image
style={{
width: 135,
height: 135,
alignSelf: 'center',
marginVertical: 30,
tintColor: color.primary,
}}
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]}>
Your registration was successful. {'\n'}Please check your registered email for email verification.
</Text>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('Login');
}}
title={'ok'}
/>
<View style={[theme.centerContainer, { paddingHorizontal: 50 }]}>
<View stlye={theme.flexContainer}>
<Text style={[theme.title, theme.textSuccess, theme.centerText]}>Register Successfully</Text>
<Image
style={{
width: 135,
height: 135,
alignSelf: 'center',
marginVertical: 20,
tintColor: color.primary,
}}
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]}>
Your registration was successful. {'\n'}Please check your registered email for email
verification.
</Text>
<GradientBtn
onPress={() => {
this.props.navigation.navigate('Login');
}}
title={'ok'}
/>
</View>
</View>
);
}
......
screens/Public/SendEmailScreen.js
......@@ -26,15 +26,15 @@ export default class SendEmailScreen extends Component {
});
render() {
return (
<View stlye={theme.flexContainer}>
<View style={{ paddingHorizontal: 50, paddingVertical: 20 }}>
<View style={[theme.centerContainer, { paddingHorizontal: 50 }]}>
<View stlye={theme.flexContainer}>
<Text style={[theme.title, theme.textSuccess, theme.centerText]}>Reset Password Successfully</Text>
<Image
style={{
width: 135,
height: 135,
alignSelf: 'center',
marginVertical: 30,
marginVertical: 20,
tintColor: color.primary,
}}
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:
react-native-ratings "^6.3.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"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
resolved "git://github.com/hyochan/react-native-gesture-handler.git#9ee7279c0ada33d1dfd0b41d99ed7043cb682d21"
dependencies:
hoist-non-react-statics "^2.3.1"
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