I am new to react native I have uploaded the whole code here I need help to convert this class component to a function component, thanks in advance.
import React, { Component, Fragment } from "react";
import {
TouchableOpacity,
Text,
View,
KeyboardAvoidingView,
Modal,
TextInput,
Platform,
Keyboard,
Dimensions,
ScrollView,
StatusBar,
SafeAreaView,
} from "react-native";
import QRCodeScanner from "react-native-qrcode-scanner";
import styles from "./scanStyle";
import AppStore from "../../stores/AppStore";
import { handleScreenNavigation } from "../../utils/NavigationService";
import Theme from "../../utils/Theme";
import LinearGradient from "react-native-linear-gradient";
import CardView from "react-native-cardview";
import Scanstore from "../../stores/Scanstore";
import Toast from 'react-native-simple-toast';
import { Screen } from "../../components/common/Screen";
import { UniversalNavigationHeader } from "../../components/common/NavigationHeader";
import Iconpack from "../../utils/Iconpack";
// import { ScrollView } from "react-native-gesture-handler";
const hRem = AppStore.screenHeight / 812;
const wRem = AppStore.screenWidth / 375;
const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const totp = require("totp-generator");
let b32_regex = /^[a-zA-Z2-7]+=*$/;
class Scan extends Component {
constructor(props) {
super(props);
this.state = {
scan: false,
ScanResult: false,
result: null,
isShow: false,
textName: "",
secretKey: "",
backupCode: "",
isBackUpCode: true,
textInputHighlight: null,
textInputHighlight2: null,
textInputHighligh3: null,
value: "",
height: 0,
updateHeightSecretKey: 0,
platformUri:"",
styleChange:false,
keyboardState: 'closed'
};
}
componentDidMount() {
if(this.props.route.params.edit){
// console.log("Appstore.userPin*******************", this.props.route.params.index,
// this.props.route.params.edit,
// this.props.route.params.otpFrom,
// this.props.route.params.backUpCode,
// this.props.route.params.friendlyName)
this.setState({ secretKey:this.props.route.params.secretKey,
platformUri :this.props.route.params.otpFrom,
textName : this.props.route.params.friendlyName ,
backupCode : this.props.route.params.backUpCode,
isBackUpCode: this.props.route.params.backUpCode.length>0?false:true,
isShow:true
})
}
// this.setState({ isShow: true, secretKey: "fsdfsfsf",platformUri:"fdsfsffs" });
//let data = base32.decode("otpauth://totp/Google%3Arakesh.s%40catalystmedia.io?secret=tqskd2aiylctmid2vzi4lirnuhbshqem&issuer=Googlethe");
// Keys provided must be base32 strings, ie. only containing characters matching (A-Z, 2-7, =).
// var hotp = require('hotp')
// var key = 'tqskd2aiylctmid2vzi4lirnuhbshqem'
// var counter = 0
// var tokenhotp = hotp(key, counter, { digits: 6 })
// // var tokentotp = hotp.totp( key, { digits: 6 })//converting hotp to totp
// // console.log("totp same---> ", tokentotp)
// console.log("hotp same ---> ", tokenhotp)
// console.log("totp diff--->", token);
// // this.otpList()
// AppStore.incrementCount()
}
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
componentWillMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
_keyboardDidShow = () => {
this.setState({
keyboardState: 'opened'
});
}
_keyboardDidHide = () => {
this.setState({
keyboardState: 'closed',
styleChange:false
});
console.log("console,console")
}
handleCreate = () => {
console.log(this.state.secretKey,"---------------->",b32_regex.exec(this.state.secretKey))
if((this.state.secretKey.length>0) && (b32_regex.test(this.state.secretKey) && (this.state.secretKey.length % 8) === 0) ){
// console.log("----->",AppStore.secretKeyAdded)
if (AppStore.secretKeyAdded){
Scanstore.addNewKeyAuthenticator(
this.state.secretKey,
this.state.platformUri !== undefined ?this.state.platformUri:"",
this.state.textName,
this.state.backupCode
);
} else {
Scanstore.setKeyAuthenticator(
this.state.secretKey,
this.state.platformUri !== undefined ?this.state.platformUri:"",
this.state.textName,
this.state.backupCode
);
}
Scanstore.fetchSecretKeyArray();
}
else if(this.state.secretKey.length===0){
// console.log("enter valid")
Toast.show("Please enter the Secret Key", Toast.LONG);
}
else{
Toast.show("Please enter valid Secret Key", Toast.LONG);
}
};
updateSize = (height) => {
this.setState({
height,
});
};
updateSizeSecretKey = (updateHeightSecretKey) => {
this.setState({
updateHeightSecretKey,
});
};
bottomModal = () => {
return (
<View style={styles.modalStyle}>
<LinearGradient
start={{ x: 0, y: 0.3 }}
end={{ x: 0, y: 1.2 }}
colors={["#020A13", "#000000"]}
style={styles.modalContent}
>
<TouchableOpacity
onPress={() => this.setState({ isShow: false })}
style={styles.topBar}
/>
<View style={{height: this.state.styleChange ? 200 :"100%",paddingHorizontal:20 }} >
<ScrollView>
<CardView
cardElevation={8}
cardMaxElevation={2}
cornerRadius={15}
style={[
{
shadowColor: this.state.textInputHighlight,
},
styles.friendlyNameCard,
]}
>
<TextInput
style={[styles.input, styles.mod0]}
placeholderTextColor={Theme.white_color}
onFocus={() => {
this.setState({
textInputHighlight: Theme.hightLightColor,
textInputHighlight2: null,
textInputHighligh3: null,
styleChange:true
});
}}
onBlur={()=>{
this.setState({styleChange:false})
}}
onChangeText={(value) => {
this.setState({ textName: value });
}}
onSubmitEditing={Keyboard.dismiss}
value={this.state.textName}
placeholder={"Friendly Name"}
/>
</CardView>
<CardView
cardElevation={8}
cardMaxElevation={2}
cornerRadius={15}
style={[
{
shadowColor: this.state.textInputHighlight2,
},
styles.secretKeyStyle,
]}
>
<TextInput
style={[
styles.input,
{
maxHeight: Platform.OS == "android" ? 76 : 44,
height:Platform.OS == "android"?this.state.updateHeightSecretKey :44,
},
]}
placeholderTextColor={Theme.white_color}
editable={true}
multiline={true}
onFocus={() => {
this.setState({
textInputHighlight2: Theme.hightLightColor,
textInputHighlight: null,
textInputHighligh3: null,
styleChange:true
});
}}
onChangeText={(value) => {
this.setState({ secretKey: value });
}}
onContentSizeChange={(e) =>
this.updateSizeSecretKey(e.nativeEvent.contentSize.height)
}
value={this.state.secretKey}
onSubmitEditing={Keyboard.dismiss}
placeholder={"Secret Key"}
/>
</CardView>
{this.state.isBackUpCode ? (
<TouchableOpacity
style={styles.backUp}
onPress={() => {
this.setState({ isBackUpCode: false });
}}
>
<Text style={[styles.backUpText,{marginLeft:10 }]}>Want to add Backup Codes?</Text>
</TouchableOpacity>
) : (
<View style={styles.backUp}>
<Text
style={{ ...Theme.encodeSansReg15, color: Theme.white_color,marginLeft:10 }}
>
Enter Backup Codes
</Text>
<CardView
cardElevation={8}
cardMaxElevation={2}
cornerRadius={15}
style={[
{
shadowColor: this.state.textInputHighligh3,
},
styles.backUpCodeStyle,
]}
>
<TextInput
style={[
styles.input,
{
maxHeight: Platform.OS == "android" ? 102 : 70,
height:Platform.OS == "android"?this.state.height: 70,
},
]}
placeholderTextColor={Theme.white_color}
editable={true}
multiline={true}
onFocus={() => {
this.setState({
textInputHighligh3: Theme.hightLightColor,
textInputHighlight: null,
textInputHighlight2: null,
styleChange:true
});
}}
onChangeText={(value) => {
this.setState({ backupCode: value });
}}
onContentSizeChange={(e) =>
this.updateSize(e.nativeEvent.contentSize.height)
}
onSubmitEditing={Keyboard.dismiss}
value={this.state.backupCode}
placeholder={"Backup Code"}
/>
</CardView>
</View>
)}
<View style={{flexDirection:"row", justifyContent:"space-around",alignItems:"center",marginTop:40,marginBottom:AppStore.isAndroid?20:0}}>
<TouchableOpacity
style={styles.createButton}
onPress={() => {
if(this.props.route.params.edit){
Scanstore.editElement(
this.props.route.params.index ,
this.state.secretKey,
this.state.platformUri ,
this.state.textName ,
this.state.backupCode
)
this.setState({ isShow: false, styleChange:false });
Scanstore.fetchSecretKeyArray();
Toast.show("Updated Successfully.", Toast.LONG);
}
else{
this.handleCreate();
this.setState({ isShow: false, styleChange:false });
}
}}
// onLongPress={() => this.setState({ scan: false })}
>
<Text style={[styles.tapText, { fontWeight: "600" }]}>{this.props.route.params.edit?"Update":"Create"}</Text>
</TouchableOpacity>
<TouchableOpacity
// style={{ marginTop: 25 }}
onPress={() =>
{this.setState({ isShow: false, styleChange:false })
console.log("87887787")
}
}
onLongPress={() => this.setState({ scan: false })}
>
<Text style={styles.cancelButton}>Cancel</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
</LinearGradient>
</View>
);
};
onSuccess = (e) => {
const check = e.data.substring(0, 7);
console.log("check", check);
console.log("scanned data -> " + e.data + " the whole bunch of data -> ");
let fetchedData = e.data;
let secretKey,platformUri;
if (fetchedData.includes("totp")) {
secretKey = fetchedData.split("=");
platformUri = secretKey[2]
console.log("------------", secretKey);
secretKey = secretKey[1].split("&");
// const totpGen = ;
// let lengthId = AppStore.rData.length;
// AppStore.addTotp({
// id: lengthId,
// title: secretKey[0],
// otpFrom:platform,
// });
}
// console.log("what the hell", AppStore.deviceIdInfo);
this.setState({
result: e,
scan: false,
ScanResult: true,
});
if (e.data.includes("totp") ) {
// handleScreenNavigation("OtpScreen", {})
this.setState({ isShow: true, secretKey: secretKey[0],platformUri:platformUri });
}
else if(e.data.includes("hotp")) {
Toast.show("Something went wrong", Toast.LONG);
} else {
Toast.show("Please scan valid QR", Toast.LONG);
handleScreenNavigation("MainAdd")
}
};
scanAgain = () => {
this.setState({ scan: true, ScanResult: false });
};
render() {
const { height } = this.state;
let newStyle = {
height,
};
let newStyleSecretKey = {
height,
};
return (
<SafeAreaView>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : null}
style={{ flex: 1 }}
>
{/* <Screen
style={styles.mod1}
statusBar={"light-content"}
variant={true}
showMenu={false}
onNavigate={this.props.navigation}
>
<UniversalNavigationHeader
hideBack={false}
goBack={this.props.navigation.goBack}
/> */}
<View style={styles.scrollViewStyle}>
<Fragment>
{true && (
<QRCodeScanner
reactivate={false}
showMarker={true}
ref={(node) => {
this.scanner = node;
}}
cameraStyle={styles.cameraView}
onRead={this.onSuccess}
// topContent={
// <View style={{zIndex:9999,width:AppStore.screenWidth,marginTop:Platform.OS === 'ios'?STATUSBAR_HEIGHT:0 }}>
// <TouchableOpacity
// underlayColor={"none"}
// style={{ padding: 20, }}
// onPress={() => this.props.navigation.goBack()}
// >
// <Image
// style={{ width: wRem * 12, height: hRem * 21, }}
// source={Iconpack.GLOBAL_BACK_BUTTON}
// />
// </TouchableOpacity>
// </View>
// }
bottomContent={
<View style={styles.bottomContainer}>
<TouchableOpacity
style={styles.tapStyle}
onPress={() => this.setState({ isShow: true })}
onLongPress={() => this.setState({ scan: false })}
>
<Text style={styles.tapText}>Have a Key? Tap Here</Text>
</TouchableOpacity>
</View>
}
/>
)}
</Fragment>
<Modal
animationType="slide"
transparent={true}
visible={this.state.isShow}
onRequestClose={() => {
this.setState({ isShow: false });
}}
>
<KeyboardAvoidingView
behavior="position"
enabled
// style={{paddingBottom:30}}
>
{this.bottomModal(newStyle, newStyleSecretKey)}
</KeyboardAvoidingView>
</Modal>
{/* </View> */}
</View>
{/* </Screen> */}
</KeyboardAvoidingView>
</SafeAreaView>
);
}
}
export default Scan;
I have tried several ways but I am getting errors that’s why I have pasted the whole code here, also one thing is I have used mobx for state management purposes.
