here I have imported some other files from my store folder this screen is for pin authentication purpose .
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import AppStore from "../../stores/AppStore";
import Theme from "../../utils/Theme";
import { Observer } from "mobx-react";
import Iconpack from "../../utils/Iconpack";
import FastImage from "react-native-fast-image";
import { Screen } from "../CommonComponent/Screen";
import PinAuthenticationStore from "../../stores/PinAuthenticationStore";
import Toast from "react-native-simple-toast";
import Header from "../CommonComponent/Header";
const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;
class PinAuthentication extends Component {
constructor(props) {
super(props);
this.state = {
passcode: ["", "", "", ""],
pin: "",
confirmThePin: false,
reconfirmPin: "",
};
}
showToast = () => {
// ToastAndroid.show("Pick Enter Valid Pin !", ToastAndroid.SHORT);
Toast.show("Please Enter Valid Pin !", Toast.LONG);
};
onPressNumber = (num) => {
let tempCode = this.state.passcode;
for (var i = 0; i < tempCode.length; i ) {
if (tempCode[i] == "") {
tempCode[i] = num;
if (this.state.confirmThePin) {
this.setState({ reconfirmPin: this.state.reconfirmPin num });
} else {
this.setState({ pin: this.state.pin num });
}
break;
} else {
continue;
}
}
this.setState({ passcode: tempCode });
};
onPressCancel = () => {
let tempCode = this.state.passcode;
for (var i = tempCode.length - 1; i >= 0; i--) {
if (tempCode[i] != "") {
tempCode[i] = "";
this.setState({
pin: this.state.pin.slice(0, i),
reconfirmPin: this.state.reconfirmPin.slice(0, i),
});
break;
} else {
continue;
}
}
// if(tempCode.length==0){
console.log("cancel", tempCode);
// }
this.setState({ passcode: tempCode });
};
reset = () => {
this.setState({
passcode: ["", "", "", ""],
confirmThePin: false,
reconfirmPin: "",
pin: "",
});
};
confirmPin = () => {
if (AppStore.idExist) {
if (this.state.pin == AppStore.userPin) {
this.props.navigation.navigate("MainAdd");
this.reset();
// AppStore.setFields("isNewUserPin", true);
} else {
this.showToast();
this.setState({ passcode: ["", "", "", ""], pin: "" });
// AppStore.setFields("isNewUserPin", false);
}
} else if (this.state.pin == this.state.reconfirmPin) {
// console.log("new user");
PinAuthenticationStore.setPinForNewUser(this.state.reconfirmPin);
// PinAuthenticationStore.setUserPin(this.state.reconfirmPin)
PinAuthenticationStore.setStringIsLoggedIn("true");
this.reset();
this.props.navigation.navigate("MainAdd");
// AppStore.setFields("isNewUserPin", true);
} else if (
this.state.pin != this.state.reconfirmPin &&
this.state.reconfirmPin.length > 0
) {
this.setState({
passcode: ["", "", "", ""],
confirmThePin: false,
reconfirmPin: "",
pin: "",
});
this.showToast();
// AppStore.setFields("isNewUserPin", false);
} else {
if (this.state.pin.length == 4 && !this.state.confirmThePin) {
this.setState({ passcode: ["", "", "", ""], confirmThePin: true });
} else if (this.state.reconfirmPin.length == 4) {
this.setState({ passcode: ["", "", "", ""] });
}
// AppStore.setFields("isNewUserPin", false);
}
console.log("confirm pin", this.state.pin, AppStore.userPin);
};
render() {
let numbers = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{
id: 10,
},
{ id: 0 },
{
id: 11,
},
];
return (
<Observer>
{() => (
<>
{/* <Screen
style={{ flex: 1 }}
statusBar={"light-content"}
variant={true}
showMenu={false}
onNavigate={this.props.navigation}
> */}
<FastImage
style={styles.container}
source={Iconpack.PIN_SCREEN_BG}
resizeMode={FastImage.resizeMode.cover}
/>
<Header
headerText="Set new PIN"
onPress={() => {
this.props.navigation.navigate("WalkThrough");
}}
/>
<View>
<Text style={styles.pinConfirmationText}>
{AppStore.idExist
? `Enter current PIN`
: this.state.confirmThePin
? `Re-confirm PIN`
: `Enter new PIN`}
</Text>
</View>
<View style={styles.codeContainer}>
{this.state.passcode.map((p, i) => {
console.log("xxxx", p);
let style = p != "" ? styles.inputBox1 : styles.inputBox;
let passMask = p != "" ? "*" : "";
return (
<View style={style} key={i}>
<Text style={styles.inputText}>{passMask}</Text>
</View>
);
})}
</View>
<View style={styles.mod0}>
<View style={styles.numberContainer}>
{numbers.map((num, numb) => {
return (
<>
{num.id == 10 ? (
<TouchableOpacity
key={num.id.toString()}
onPress={() => this.onPressCancel()}
style={
AppStore.isiOS ? styles.number : styles.number2
}
>
<Image
style={styles.img}
source={Iconpack.PIN_CANCEL}
/>
</TouchableOpacity>
) : num.id == 11 ? (
<TouchableOpacity
key={num.id.toString()}
onPress={() => {
this.confirmPin();
}}
style={
AppStore.isiOS ? styles.number : styles.number2
}
>
<Image
style={styles.img}
source={Iconpack.PIN_CHECK}
/>
</TouchableOpacity>
) : (
<TouchableOpacity
key={num.id.toString()}
onPress={() => this.onPressNumber(num.id.toString())}
style={
AppStore.isiOS ? styles.number : styles.number2
}
>
<Text style={styles.numberText}>
{num.id.toString()}
</Text>
</TouchableOpacity>
)}
</>
);
})}
</View>
</View>
{/* </Screen> */}
</>
)}
</Observer>
);
}
}
export default PinAuthentication;
const styles = StyleSheet.create({
mod0: { alignItems: "center", justifyContent: "center" },
container: {
flex: 1,
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: "#021831",
},
pinConfirmationText: {
textAlign: "center",
marginTop: hRem * 44,
color: "white",
...Theme.encodeSansMed3,
lineHeight: hRem * 19.07,
},
borderStyleBase: {
width: 30,
height: 45,
},
borderStyleHighLighted: {
borderColor: "#707070",
},
underlineStyleBase: {
width: wRem * 62,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
},
underlineStyleHighLighted: {
borderColor: "#FFFFFF",
},
number: {
borderRadius:
Math.round(
Dimensions.get("window").width Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.2,
height: Dimensions.get("window").width * 0.2,
backgroundColor: "#000000",
justifyContent: "center",
alignItems: "center",
marginHorizontal: wRem * 12,
marginVertical: hRem * 9,
},
number2: {
borderRadius:
Math.round(
Dimensions.get("window").width Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.2,
height: Dimensions.get("window").width * 0.2,
backgroundColor: "#000000",
justifyContent: "center",
alignItems: "center",
marginHorizontal: wRem * 12,
marginVertical: hRem * 9,
shadowColor: "rgba(27, 100, 206, 0.8)",
shadowOffset: {
width: 1,
height: 5,
},
shadowOpacity: 1.5,
shadowRadius: 5,
elevation: 10,
},
numberContainer: {
flexDirection: "row",
flexWrap: "wrap",
marginTop: hRem * 99,
alignItems: "center",
justifyContent: "center",
shadowColor: Theme.shadow_Button,
shadowOffset: {
width: 1,
height: 1,
},
shadowOpacity: 1.5,
shadowRadius: 5,
elevation: 3,
},
numberText: {
...Theme.encodeSansMed4,
// lineHeight: hRem * 16,
// position: "absolute",
textAlign: "center",
color: Theme.white_color,
},
codeContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginHorizontal: wRem * 49,
marginTop: hRem * 50,
},
inputBox: {
width: wRem * 62,
borderBottomWidth: 1,
borderColor: "#707070",
alignItems: "center",
justifyContent: "space-between",
},
inputBox1: {
width: wRem * 62,
borderBottomWidth: 1,
borderColor: "#FFFFFF",
alignItems: "center",
justifyContent: "space-between",
},
inputText: {
color: "white",
...Theme.encodeSansMed3,
marginBottom: hRem * 21,
},
img: {
width: wRem * 30,
height: hRem * 22,
},
});
here I have uploaded my whole code which is needed to be converted in class component to function component, sry for the whole code I am new to the react-native pls guide me and help me out , thanks in advance
CodePudding user response：
import React, { Component, useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import AppStore from "../../stores/AppStore";
import Theme from "../../utils/Theme";
import { Observer } from "mobx-react";
import Iconpack from "../../utils/Iconpack";
import FastImage from "react-native-fast-image";
import { Screen } from "../CommonComponent/Screen";
import PinAuthenticationStore from "../../stores/PinAuthenticationStore";
import Toast from "react-native-simple-toast";
import Header from "../CommonComponent/Header";
const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;
function PinAuthentication(props) {
const [state, setState] = useState({
passcode: ["", "", "", ""],
pin: "",
confirmThePin: false,
reconfirmPin: "",
});
const showToast = () => {
// ToastAndroid.show("Pick Enter Valid Pin !", ToastAndroid.SHORT);
Toast.show("Please Enter Valid Pin !", Toast.LONG);
};
const onPressNumber = (num) => {
let tempCode = state.passcode;
for (var i = 0; i < tempCode.length; i ) {
if (tempCode[i] == "") {
tempCode[i] = num;
if (state.confirmThePin) {
setState({ ...state, reconfirmPin: state.reconfirmPin num });
} else {
setState({ ...state, pin: state.pin num });
}
break;
} else {
continue;
}
}
setState({ ...state, passcode: tempCode });
};
const onPressCancel = () => {
let tempCode = state.passcode;
for (var i = tempCode.length - 1; i >= 0; i--) {
if (tempCode[i] != "") {
tempCode[i] = "";
setState({
...state,
pin: state.pin.slice(0, i),
reconfirmPin: state.reconfirmPin.slice(0, i),
});
break;
} else {
continue;
}
}
// if(tempCode.length==0){
console.log("cancel", tempCode);
// }
setState({ ...state, passcode: tempCode });
};
const reset = () => {
setState({
passcode: ["", "", "", ""],
confirmThePin: false,
reconfirmPin: "",
pin: "",
});
};
const confirmPin = () => {
if (AppStore.idExist) {
if (state.pin == AppStore.userPin) {
props.navigation.navigate("MainAdd");
reset();
// AppStore.setFields("isNewUserPin", true);
} else {
showToast();
setState({ ...state, passcode: ["", "", "", ""], pin: "" });
// AppStore.setFields("isNewUserPin", false);
}
} else if (state.pin == state.reconfirmPin) {
// console.log("new user");
PinAuthenticationStore.setPinForNewUser(state.reconfirmPin);
// PinAuthenticationStore.setUserPin(this.state.reconfirmPin)
PinAuthenticationStore.setStringIsLoggedIn("true");
reset();
props.navigation.navigate("MainAdd");
// AppStore.setFields("isNewUserPin", true);
} else if (
state.pin != state.reconfirmPin &&
state.reconfirmPin.length > 0
) {
setState({
passcode: ["", "", "", ""],
confirmThePin: false,
reconfirmPin: "",
pin: "",
});
showToast();
// AppStore.setFields("isNewUserPin", false);
} else {
if (state.pin.length == 4 && !state.confirmThePin) {
setState({ ...state, passcode: ["", "", "", ""], confirmThePin: true });
} else if (state.reconfirmPin.length == 4) {
setState({ ...state, passcode: ["", "", "", ""] });
}
// AppStore.setFields("isNewUserPin", false);
}
console.log("confirm pin", state.pin, AppStore.userPin);
};
let numbers = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{
id: 10,
},
{ id: 0 },
{
id: 11,
},
];
return (
<Observer>
{() => (
<>
{/* <Screen
style={{ flex: 1 }}
statusBar={"light-content"}
variant={true}
showMenu={false}
onNavigate={this.props.navigation}
> */}
<FastImage
style={styles.container}
source={Iconpack.PIN_SCREEN_BG}
resizeMode={FastImage.resizeMode.cover}
/>
<Header
headerText="Set new PIN"
onPress={() => {
this.props.navigation.navigate("WalkThrough");
}}
/>
<View>
<Text style={styles.pinConfirmationText}>
{AppStore.idExist
? `Enter current PIN`
: this.state.confirmThePin
? `Re-confirm PIN`
: `Enter new PIN`}
</Text>
</View>
<View style={styles.codeContainer}>
{this.state.passcode.map((p, i) => {
console.log("xxxx", p);
let style = p != "" ? styles.inputBox1 : styles.inputBox;
let passMask = p != "" ? "*" : "";
return (
<View style={style} key={i}>
<Text style={styles.inputText}>{passMask}</Text>
</View>
);
})}
</View>
<View style={styles.mod0}>
<View style={styles.numberContainer}>
{numbers.map((num, numb) => {
return (
<>
{num.id == 10 ? (
<TouchableOpacity
key={num.id.toString()}
onPress={() => this.onPressCancel()}
style={AppStore.isiOS ? styles.number : styles.number2}
>
<Image
style={styles.img}
source={Iconpack.PIN_CANCEL}
/>
</TouchableOpacity>
) : num.id == 11 ? (
<TouchableOpacity
key={num.id.toString()}
onPress={() => {
this.confirmPin();
}}
style={AppStore.isiOS ? styles.number : styles.number2}
>
<Image style={styles.img} source={Iconpack.PIN_CHECK} />
</TouchableOpacity>
) : (
<TouchableOpacity
key={num.id.toString()}
onPress={() => this.onPressNumber(num.id.toString())}
style={AppStore.isiOS ? styles.number : styles.number2}
>
<Text style={styles.numberText}>
{num.id.toString()}
</Text>
</TouchableOpacity>
)}
</>
);
})}
</View>
</View>
{/* </Screen> */}
</>
)}
</Observer>
);
}
export default PinAuthentication;
const styles = StyleSheet.create({
mod0: { alignItems: "center", justifyContent: "center" },
container: {
flex: 1,
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: "#021831",
},
pinConfirmationText: {
textAlign: "center",
marginTop: hRem * 44,
color: "white",
...Theme.encodeSansMed3,
lineHeight: hRem * 19.07,
},
borderStyleBase: {
width: 30,
height: 45,
},
borderStyleHighLighted: {
borderColor: "#707070",
},
underlineStyleBase: {
width: wRem * 62,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
},
underlineStyleHighLighted: {
borderColor: "#FFFFFF",
},
number: {
borderRadius:
Math.round(
Dimensions.get("window").width Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.2,
height: Dimensions.get("window").width * 0.2,
backgroundColor: "#000000",
justifyContent: "center",
alignItems: "center",
marginHorizontal: wRem * 12,
marginVertical: hRem * 9,
},
number2: {
borderRadius:
Math.round(
Dimensions.get("window").width Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.2,
height: Dimensions.get("window").width * 0.2,
backgroundColor: "#000000",
justifyContent: "center",
alignItems: "center",
marginHorizontal: wRem * 12,
marginVertical: hRem * 9,
shadowColor: "rgba(27, 100, 206, 0.8)",
shadowOffset: {
width: 1,
height: 5,
},
shadowOpacity: 1.5,
shadowRadius: 5,
elevation: 10,
},
numberContainer: {
flexDirection: "row",
flexWrap: "wrap",
marginTop: hRem * 99,
alignItems: "center",
justifyContent: "center",
shadowColor: Theme.shadow_Button,
shadowOffset: {
width: 1,
height: 1,
},
shadowOpacity: 1.5,
shadowRadius: 5,
elevation: 3,
},
numberText: {
...Theme.encodeSansMed4,
// lineHeight: hRem * 16,
// position: "absolute",
textAlign: "center",
color: Theme.white_color,
},
codeContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginHorizontal: wRem * 49,
marginTop: hRem * 50,
},
inputBox: {
width: wRem * 62,
borderBottomWidth: 1,
borderColor: "#707070",
alignItems: "center",
justifyContent: "space-between",
},
inputBox1: {
width: wRem * 62,
borderBottomWidth: 1,
borderColor: "#FFFFFF",
alignItems: "center",
justifyContent: "space-between",
},
inputText: {
color: "white",
...Theme.encodeSansMed3,
marginBottom: hRem * 21,
},
img: {
width: wRem * 30,
height: hRem * 22,
},
});
CodePudding user response：
In order to convert class components to functional components, you need to detatch class and prop behaviours and instead use "hooks".
I will give you some examples rather than manually change your entire solution;
PinAuthentication = (props) => {
const [passcode, setPasscode] = useState('')
const showToast = () => Toast.show('Please enter a valid pin', Toast.LONG)
return (
<Observer>
{() => (
<>
<FastImage ... />
...
</>
)}
)
}
So if you want to keep using state, use UseState. Fully declare your methods with either "function" or "const". And remove all instances of this, just use the scoped variable name.
CodePudding user response：
Take a look at the Functional Component documentation.
- Wherever you're using
this.stateyou want to convert it toReact.useState. - You don't need the render as you just need to return a renderable object (jsx/
null/React.Fragment). - Your functions are pretty much already there, just add
constand reference them without thethisprefix.
Then you'll be 90% of the way there.
CodePudding user response：
Your Component will now be this ..
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import AppStore from "../../stores/AppStore";
import Theme from "../../utils/Theme";
import { Observer } from "mobx-react";
import Iconpack from "../../utils/Iconpack";
import FastImage from "react-native-fast-image";
import PinAuthenticationStore from "../../stores/PinAuthenticationStore";
import Toast from "react-native-simple-toast";
import Header from "../CommonComponent/Header";
const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;
function PinAuthentication (props) {
const [state, setState] = useState({
passcode: ["", "", "", ""],
pin: "",
confirmThePin: false,
reconfirmPin: "",
})
const showToast = () => {
// ToastAndroid.show("Pick Enter Valid Pin !", ToastAndroid.SHORT);
Toast.show("Please Enter Valid Pin !", Toast.LONG);
};
const onPressNumber = (num) => {
let tempCode = state.passcode;
for (var i = 0; i < tempCode.length; i ) {
if (tempCode[i] == "") {
tempCode[i] = num;
if (state.confirmThePin) {
setState({...state, reconfirmPin: state.reconfirmPin num });
} else {
setState({...state, pin: state.pin num });
}
break;
} else {
continue;
}
}
setState({...state, passcode: tempCode });
};
const onPressCancel = () => {
let tempCode = state.passcode;
for (var i = tempCode.length - 1; i >= 0; i--) {
if (tempCode[i] != "") {
tempCode[i] = "";
setState({
...state,
pin: state.pin.slice(0, i),
reconfirmPin: state.reconfirmPin.slice(0, i),
});
break;
} else {
continue;
}
}
// if(tempCode.length==0){
console.log("cancel", tempCode);
// }
setState({...state, passcode: tempCode });
};
const reset = () => {
setState({
...state,
passcode: ["", "", "", ""],
confirmThePin: false,
reconfirmPin: "",
pin: "",
});
};
const confirmPin = () => {
if (AppStore.idExist) {
if (state.pin == AppStore.userPin) {
props.navigation.navigate("MainAdd");
reset();
// AppStore.setFields("isNewUserPin", true);
} else {
showToast();
setState({...state, passcode: ["", "", "", ""], pin: "" });
// AppStore.setFields("isNewUserPin", false);
}
} else if (state.pin == state.reconfirmPin) {
// console.log("new user");
PinAuthenticationStore.setPinForNewUser(state.reconfirmPin);
// PinAuthenticationStore.setUserPin(this.state.reconfirmPin)
PinAuthenticationStore.setStringIsLoggedIn("true");
reset();
props.navigation.navigate("MainAdd");
// AppStore.setFields("isNewUserPin", true);
} else if (
state.pin != state.reconfirmPin &&
state.reconfirmPin.length > 0
) {
setState({
...state,
passcode: ["", "", "", ""],
confirmThePin: false,
reconfirmPin: "",
pin: "",
});
showToast();
// AppStore.setFields("isNewUserPin", false);
} else {
if (state.pin.length == 4 && !state.confirmThePin) {
setState({...state, passcode: ["", "", "", ""], confirmThePin: true
});
} else if (state.reconfirmPin.length == 4) {
setState({...state, passcode: ["", "", "", ""] });
}
// AppStore.setFields("isNewUserPin", false);
}
console.log("confirm pin", state.pin, AppStore.userPin);
};
const numbers = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{
id: 10,
},
{ id: 0 },
{
id: 11,
},
];
return (
<Observer>
{() => (
<>
<FastImage
style={styles.container}
source={Iconpack.PIN_SCREEN_BG}
resizeMode={FastImage.resizeMode.cover}
/>
<Header
headerText="Set new PIN"
onPress={() => {
props.navigation.navigate("WalkThrough");
}}
/>
<View>
<Text style={styles.pinConfirmationText}>
{AppStore.idExist
? `Enter current PIN`
: state.confirmThePin
? `Re-confirm PIN`
: `Enter new PIN`}
</Text>
</View>
<View style={styles.codeContainer}>
{state.passcode.map((p, i) => {
console.log("xxxx", p);
let style = p != "" ? styles.inputBox1 : styles.inputBox;
let passMask = p != "" ? "*" : "";
return (
<View style={style} key={i}>
<Text style={styles.inputText}>{passMask}</Text>
</View>
);
})}
</View>
<View style={styles.mod0}>
<View style={styles.numberContainer}>
{numbers.map((num, numb) => {
return (
<>
{num.id == 10 ? (
<TouchableOpacity
key={num.id.toString()}
onPress={() => onPressCancel()}
style={
AppStore.isiOS ? styles.number : styles.number2
}
>
<Image
style={styles.img}
source={Iconpack.PIN_CANCEL}
/>
</TouchableOpacity>
) : num.id == 11 ? (
<TouchableOpacity
key={num.id.toString()}
onPress={() => {
confirmPin();
}}
style={
AppStore.isiOS ? styles.number : styles.number2
}
>
<Image
style={styles.img}
source={Iconpack.PIN_CHECK}
/>
</TouchableOpacity>
) : (
<TouchableOpacity
key={num.id.toString()}
onPress={() => onPressNumber(num.id.toString())}
style={
AppStore.isiOS ? styles.number : styles.number2
}
>
<Text style={styles.numberText}>
{num.id.toString()}
</Text>
</TouchableOpacity>
)}
</>
);
})}
</View>
</View>
{/* </Screen> */}
</>
)}
</Observer>
);
}
export default PinAuthentication;
const styles = StyleSheet.create({
mod0: { alignItems: "center", justifyContent: "center" },
container: {
flex: 1,
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: "#021831",
},
pinConfirmationText: {
textAlign: "center",
marginTop: hRem * 44,
color: "white",
...Theme.encodeSansMed3,
lineHeight: hRem * 19.07,
},
borderStyleBase: {
width: 30,
height: 45,
},
borderStyleHighLighted: {
borderColor: "#707070",
},
underlineStyleBase: {
width: wRem * 62,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
},
underlineStyleHighLighted: {
borderColor: "#FFFFFF",
},
number: {
borderRadius:
Math.round(
Dimensions.get("window").width Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.2,
height: Dimensions.get("window").width * 0.2,
backgroundColor: "#000000",
justifyContent: "center",
alignItems: "center",
marginHorizontal: wRem * 12,
marginVertical: hRem * 9,
},
number2: {
borderRadius:
Math.round(
Dimensions.get("window").width Dimensions.get("window").height
) / 2,
width: Dimensions.get("window").width * 0.2,
height: Dimensions.get("window").width * 0.2,
backgroundColor: "#000000",
justifyContent: "center",
alignItems: "center",
marginHorizontal: wRem * 12,
marginVertical: hRem * 9,
shadowColor: "rgba(27, 100, 206, 0.8)",
shadowOffset: {
width: 1,
height: 5,
},
shadowOpacity: 1.5,
shadowRadius: 5,
elevation: 10,
},
numberContainer: {
flexDirection: "row",
flexWrap: "wrap",
marginTop: hRem * 99,
alignItems: "center",
justifyContent: "center",
shadowColor: Theme.shadow_Button,
shadowOffset: {
width: 1,
height: 1,
},
shadowOpacity: 1.5,
shadowRadius: 5,
elevation: 3,
},
numberText: {
...Theme.encodeSansMed4,
// lineHeight: hRem * 16,
// position: "absolute",
textAlign: "center",
color: Theme.white_color,
},
codeContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginHorizontal: wRem * 49,
marginTop: hRem * 50,
},
inputBox: {
width: wRem * 62,
borderBottomWidth: 1,
borderColor: "#707070",
alignItems: "center",
justifyContent: "space-between",
},
inputBox1: {
width: wRem * 62,
borderBottomWidth: 1,
borderColor: "#FFFFFF",
alignItems: "center",
justifyContent: "space-between",
},
inputText: {
color: "white",
...Theme.encodeSansMed3,
marginBottom: hRem * 21,
},
img: {
width: wRem * 30,
height: hRem * 22,
},
});