use state

app/containers/Passcode/Button.js

@@ -2,21 +2,25 @@ import React from 'react';
 import { TouchableHighlight, Text } from 'react-native';
 
 import styles from './styles';
+import { themes } from '../../constants/colors';
 
-const ButtonNumber = ({ text }) => (
+const ButtonNumber = ({
+	text, disabled, theme, onPress
+}) => (
 	<TouchableHighlight
 		style={[
 			styles.buttonCircle,
-			// { backgroundColor: this.props.colorCircleButtons },
+			{ backgroundColor: themes[theme].backgroundColor },
 			// this.props.styleButtonCircle,
 		]}
 		// underlayColor={this.props.numbersButtonOverlayColor}
-		// disabled={disabled}
+		disabled={disabled}
 		// onShowUnderlay={() => this.setState({ textButtonSelected: text })}
 		// onHideUnderlay={() => this.setState({ textButtonSelected: "" })}
 		// onPress={() => {
 		// 	this.onPressButtonNumber(text);
 		// }}
+		onPress={() => onPress && onPress(text)}
 		// accessible
 		// accessibilityLabel={text}
 	>

app/containers/Passcode/Dots.js

@@ -5,28 +5,28 @@ import _ from 'lodash';
 import styles from './styles';
 import { themes } from '../../constants/colors';
 
-const PASSWORD_LENGTH = 6;
 const SIZE_EMPTY = 8;
 const SIZE_FULL = 12;
 
-const PasscodeDots = ({
+const Dots = ({
-	password,
+	passcode,
 	moveData,
 	showError,
 	changeScreen,
 	attemptFailed,
-	theme
+	theme,
+	length
 }) => (
-	<View style={[styles.topViewCirclePassword]}>
+	<View style={[styles.topViewCirclePasscode]}>
-		{_.range(PASSWORD_LENGTH).map((val) => {
+		{_.range(length).map((val) => {
-			const lengthSup = ((password.length >= val + 1 && !changeScreen) || showError) && !attemptFailed;
+			const lengthSup = ((passcode.length >= val + 1 && !changeScreen) || showError) && !attemptFailed;
 			const opacity = lengthSup ? 1 : 0.5;
 			const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 			const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 			let color = '';
 			if (showError) {
 				color = themes[theme].dangerColor;
-			} else if (lengthSup && password.length > 0) {
+			} else if (lengthSup && passcode.length > 0) {
 				color = themes[theme].titleText;
 			} else {
 				color = themes[theme].bodyText;
@@ -59,4 +59,4 @@ const PasscodeDots = ({
 	</View>
 );
 
-export default PasscodeDots;
+export default Dots;

app/containers/Passcode/index.js

@@ -1,112 +1,79 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
 import { Col, Row, Grid } from 'react-native-easy-grid';
 import _ from 'lodash';
 
 import styles from './styles';
-import ButtonNumber from './ButtonNumber';
+import Button from './Button';
-import PasscodeDots from './PasscodeDots';
+import Dots from './Dots';
 import Title from './Title';
 import Subtitle from './Subtitle';
 
+const PASSCODE_LENGTH = 6;
+
 const Passcode = ({ theme }) => {
+	const [passcode, setPasscode] = useState('');
+
+	const handleEnd = () => {
+		alert('END')
+	};
+
+	const onPressNumber = text => setPasscode((p) => {
+		const newPasscode = p + text;
+		if (newPasscode?.length === PASSCODE_LENGTH) {
+			handleEnd();
+			return '';
+		}
+		return newPasscode;
+	});
+
+	const onPressDelete = () => setPasscode((p) => {
+		if (p?.length > 0) {
+			const newPasscode = p.slice(0, -1);
+			return newPasscode;
+		}
+		return '';
+	});
+
 	return (
-		<View
+		<View style={styles.container}>
-			style={[
+			<View style={styles.container}>
-				styles.container,
+				<View style={styles.viewTitle}>
-				// this.props.styleContainer
-			]}
-		>
-			<View
-				style={[
-					styles.container,
-					// this.props.styleContainer
-				]}
-			>
-				<View
-					style={[
-						styles.viewTitle,
-						// { opacity: opacity }
-					]}
-				>
 					<Title theme={theme} />
 					<Subtitle theme={theme} />
 				</View>
-				<View style={styles.flexCirclePassword}>
+				<View style={styles.flexCirclePasscode}>
-					<PasscodeDots password='123' theme={theme} />
+					<Dots passcode={passcode} theme={theme} length={PASSCODE_LENGTH} />
 				</View>
 				<Grid style={styles.grid}>
-					<Row
+					<Row style={styles.row}>
-						style={[
-							styles.row
-						]}
-					>
 						{_.range(1, 4).map(i => (
-							<Col
+							<Col key={i} style={styles.colButtonCircle}>
-								key={i}
+								<Button text={i} theme={theme} onPress={onPressNumber} />
-								style={[
-									styles.colButtonCircle
-								]}
-							>
-								<ButtonNumber text={i} />
 							</Col>
 						))}
 					</Row>
-					<Row
+					<Row style={styles.row}>
-						style={[
-							styles.row
-						]}
-					>
 						{_.range(4, 7).map(i => (
-							<Col
+							<Col key={i} style={styles.colButtonCircle}>
-								key={i}
+								<Button text={i} theme={theme} onPress={onPressNumber} />
-								style={[
-									styles.colButtonCircle
-								]}
-							>
-								<ButtonNumber text={i} />
 							</Col>
 						))}
 					</Row>
-					<Row
+					<Row style={styles.row}>
-						style={[
-							styles.row
-						]}
-					>
 						{_.range(7, 10).map(i => (
-							<Col
+							<Col key={i} style={styles.colButtonCircle}>
-								key={i}
+								<Button text={i} theme={theme} onPress={onPressNumber} />
-								style={[
-									styles.colButtonCircle
-								]}
-							>
-								<ButtonNumber text={i} />
 							</Col>
 						))}
 					</Row>
-					<Row
+					<Row style={styles.row}>
-						style={[
+						<Col style={styles.colButtonCircle} />
-							styles.row
+						<Col style={styles.colButtonCircle}>
-						]}
+							<Button text='0' theme={theme} onPress={onPressNumber} />
-					>
-						<Col
-							style={[
-								styles.colButtonCircle
-							]}
-						/>
-						<Col
-							style={[
-								styles.colButtonCircle
-							]}
-						>
-							<ButtonNumber text='0' />
 						</Col>
-						<Col
+						<Col style={styles.colButtonCircle}>
-							style={[
+							<Button text='X' theme={theme} onPress={onPressDelete} />
-								styles.colButtonCircle
-							]}
-						>
-							<ButtonNumber text='X' />
 						</Col>
 					</Row>
 				</Grid>

app/containers/Passcode/styles.js

@@ -68,12 +68,12 @@ export default StyleSheet.create({
 		fontWeight: '200',
 		textAlign: 'center'
 	},
-	flexCirclePassword: {
+	flexCirclePasscode: {
 		flex: 2,
 		justifyContent: 'center',
 		alignItems: 'center'
 	},
-	topViewCirclePassword: {
+	topViewCirclePasscode: {
 		flexDirection: 'row',
 		height: 'auto',
 		justifyContent: 'center',