Skip to content

Instantly share code, notes, and snippets.

@Pelumiii1

Pelumiii1/App.tsx

Last active February 3, 2025 11:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Pelumiii1/d62e5810602ba56df46e842c1c2268b1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Pelumiii1/d62e5810602ba56df46e842c1c2268b1 to your computer and use it in GitHub Desktop.
Download ZIP
Data Encryption and Decryption
Raw
App.tsx
import React, { useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import { encrypt, decrypt } from "./EncryptionUtils";
const App = () => {
const [plainText, setPlainText] = useState<string>("");
const [secretKey, setSecretKey] = useState<string>("");
const [encryptedText, setEncryptedText] = useState<string>("");
const [decryptedText, setDecryptedText] = useState<string>("");
function handleEncrypt() {
const encrypted = encrypt(plainText, secretKey);
setEncryptedText(encrypted);
}
function handleDecrypt() {
const decrypted = decrypt(encryptedText, secretKey);
setDecryptedText(decrypted);
}
return (
<View style={styles.container}>
<Text
style={{
textAlign: "center",
marginBottom: 10,
fontWeight: 600,
fontSize: 20,
}}
>
Encryption App
</Text>
<Text>Plain Text:</Text>
<TextInput
style={styles.input}
placeholder="Enter Plaintext"
onChangeText={setPlainText}
value={plainText}
/>
<Text>Secret Key:</Text>
<TextInput
style={styles.input}
placeholder="Enter Secret key"
value={secretKey}
onChangeText={setSecretKey}
/>
<Button title="Encrypt" onPress={handleEncrypt} />
<Text style={styles.output}>Encrypted Text: {encryptedText}</Text>
<View style={{ marginBottom: 10 }} />
<Button title="Decrypt" onPress={handleDecrypt} />
<Text style={styles.output}>Decrypted Text: {decryptedText}</Text>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
padding: 16,
},
input: {
height: 40,
borderColor: "gray",
borderWidth: 1,
marginBottom: 12,
paddingHorizontal: 8,
},
output: {
marginTop: 12,
fontSize: 16,
},
});
Raw
EncryptionUtils.ts
// EncryptionUtils.js
// Function to encrypt the plaintext
export const encrypt = (plaintext: string, key: string): string => {
let encryptedText = "";
for (let i = 0; i < plaintext.length; i++) {
const char = plaintext[i];
if (char.match(/[a-z]/i)) {
const code = plaintext.charCodeAt(i);
let shift = key.length; // Use key length as the shift value
if (code >= 65 && code <= 90) {
encryptedText += String.fromCharCode(((code - 65 + shift) % 26) + 65);
} else if (code >= 97 && code <= 122) {
encryptedText += String.fromCharCode(((code - 97 + shift) % 26) + 97);
}
} else {
encryptedText += char; // Non-alphabetic characters remain unchanged
}
}
return encryptedText;
};
// Function to decrypt the encrypted text
export const decrypt = (encryptedText: string, key: string): string => {
let decryptedText = "";
for (let i = 0; i < encryptedText.length; i++) {
const char = encryptedText[i];
if (char.match(/[a-z]/i)) {
const code = encryptedText.charCodeAt(i);
let shift = key.length; // Use key length as the shift value
if (code >= 65 && code <= 90) {
decryptedText += String.fromCharCode(
((code - 65 - shift + 26) % 26) + 65
);
} else if (code >= 97 && code <= 122) {
decryptedText += String.fromCharCode(
((code - 97 - shift + 26) % 26) + 97
);
}
} else {
decryptedText += char; // Non-alphabetic characters remain unchanged
}
}
return decryptedText;
};
@Pelumiii1
Copy link
Author

Pelumiii1 commented Feb 3, 2025

Set Up:

  • Install Expo CLI (npm install -g expo-cli).
  • Clone the project and install dependencies (npm install).
  • Start the app (expo start).

Run the App:

  • Scan the QR code with the Expo Go app on your phone or use an emulator.
  • Use the App:
  • Enter a plaintext (e.g., HelloWorld) and a secret key (e.g., secret).
  • Tap Encrypt to get the encrypted text.
  • Tap Decrypt to retrieve the original plaintext.

Example Inputs and Outputs

Plaintext: HelloWorld
Key: secret
Encrypted Text: KhoorZruog
Decrypted Text: HelloWorld

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment