Guest User

VerificationScreen

a guest
Aug 24th, 2019
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.18 KB | None | 0 0
  1. import React from "react";
  2. import {
  3. Text,
  4. View,
  5. Image,
  6. Alert,
  7. Animated,
  8. TouchableOpacity
  9. } from 'react-native';
  10.  
  11. import styles, {
  12. ACTIVE_CELL_BG_COLOR,
  13. CELL_BORDER_RADIUS,
  14. CELL_SIZE,
  15. DEFAULT_CELL_BG_COLOR,
  16. NOT_EMPTY_CELL_BG_COLOR,
  17. } from './styles';
  18. import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
  19. import CodeFiled from 'react-native-confirmation-code-field';
  20. const codeLength = 4;
  21. const source = require("../img/userimage.png");
  22.  
  23. class VerifyCode extends React.Component {
  24. constructor(props) {
  25. super(props);
  26. this.state = {Firstname: '', Surname: '', Username: '', Email: '', Password: '', PasswordAgain: '', PhoneNumber: '', EmailCode: '', loading: false, disabled: false }
  27. }
  28.  
  29.  
  30. newMethod_1() {
  31. return this.newMethod();
  32. }
  33.  
  34. newMethod() {
  35. const { navigation } = this.props;
  36. const user = navigation.getParam('userDetails');
  37. return user;
  38. }
  39.  
  40. componentDidMount() {
  41. const {user} = this.newMethod_1;
  42. this.setState({ user: user });
  43. }
  44.  
  45. _animationsColor = [...new Array(codeLength)].map(
  46. () => new Animated.Value(0),
  47. );
  48. _animationsScale = [...new Array(codeLength)].map(
  49. () => new Animated.Value(1),
  50. );
  51.  
  52. onFinishCheckingCode = code => {
  53. if (code !== '1234') {
  54. return Alert.alert(
  55. 'Confirmation Code',
  56. 'Code not match! Try 1234',
  57. [{ text: 'OK' }],
  58. { cancelable: false },
  59. );
  60. }
  61.  
  62. Alert.alert('Confirmation Code', 'Successful!', [{ text: 'OK' }], {
  63. cancelable: false,
  64. });
  65. };
  66.  
  67. animateCell({ hasValue, index, isFocused }) {
  68. Animated.parallel([
  69. Animated.timing(this._animationsColor[index], {
  70. toValue: isFocused ? 1 : 0,
  71. duration: 250,
  72. }),
  73. Animated.spring(this._animationsScale[index], {
  74. toValue: hasValue ? 0 : 1,
  75. duration: hasValue ? 300 : 250,
  76. }),
  77. ]).start();
  78. }
  79.  
  80. cellProps = ({ hasValue, index, isFocused }) => {
  81. const animatedCellStyle = {
  82. backgroundColor: hasValue
  83. ? this._animationsScale[index].interpolate({
  84. inputRange: [0, 1],
  85. outputRange: [NOT_EMPTY_CELL_BG_COLOR, ACTIVE_CELL_BG_COLOR],
  86. })
  87. : this._animationsColor[index].interpolate({
  88. inputRange: [0, 1],
  89. outputRange: [DEFAULT_CELL_BG_COLOR, ACTIVE_CELL_BG_COLOR],
  90. }),
  91. borderRadius: this._animationsScale[index].interpolate({
  92. inputRange: [0, 1],
  93. outputRange: [CELL_SIZE, CELL_BORDER_RADIUS],
  94. }),
  95. transform: [
  96. {
  97. scale: this._animationsScale[index].interpolate({
  98. inputRange: [0, 1],
  99. outputRange: [0.2, 1],
  100. }),
  101. },
  102. ],
  103. };
  104.  
  105. // Run animation on next event loop tik
  106. // Because we need first return new style prop and then animate this value
  107. setTimeout(() => {
  108. this.animateCell({ hasValue, index, isFocused });
  109. }, 0);
  110.  
  111. return {
  112. style: [styles.verifyinput, animatedCellStyle],
  113. };
  114. };
  115.  
  116. containerProps = { style: styles.inputWrapStyle };
  117.  
  118.  
  119. render() {
  120. const {user} = this.state;
  121. return (
  122. <KeyboardAwareScrollView ref='scrollView' enableOnAndroid>
  123. <View style={styles.inputWrapper}>
  124. <Text style={styles.inputLabel}>Verification</Text>
  125. <Image style={styles.iconV} source={source} />
  126. <Text style={styles.inputSubLabel}>
  127. {'Please enter the verification code\nwe send to your email address'}
  128. </Text>
  129. <Text style={styles.inputSubLabel}>{user.PhoneNumber}</Text>
  130. <CodeFiled
  131. maskSymbol=" "
  132. variant="clear"
  133. codeLength={codeLength}
  134. keyboardType="numeric"
  135. cellProps={this.cellProps}
  136. containerProps={this.containerProps}
  137. onFulfill={this.onFinishCheckingCode}
  138. CellComponent={Animated.Text}
  139. />
  140. <View style={styles.nextButton}>
  141. <Text style={styles.nextButtonText}>Verify</Text>
  142. </View>
  143. </View>
  144. </KeyboardAwareScrollView>
  145. );
  146.  
  147. }
  148. }
  149.  
  150.  
  151. export default VerifyCode;
Add Comment
Please, Sign In to add comment