Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react";
- import { ScrollView, StyleSheet, AsyncStorage } from "react-native";
- import { Madoka } from "react-native-textinput-effects";
- import CreditCard from "react-native-credit-card";
- import * as Animatable from 'react-native-animatable';
- export class SettingsInput extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- myKey: undefined
- }
- }
- componentDidMount() {
- this.getKey()
- }
- async getKey() {
- try {
- const value = await AsyncStorage.getItem(this.props.storageKey);
- this.setState({myKey: value});
- } catch (error) {
- console.log("Error retrieving data" + error);
- }
- }
- async saveKey(value) {
- try {
- this.props.onChange && this.props.onChange(value)
- await AsyncStorage.setItem(this.props.storageKey, value)
- } catch (error) {
- console.log("Error saving data" + error);
- }
- }
- render() {
- return (
- <Madoka
- label={this.props.label}
- borderColor={"#fff"}
- labelStyle={{ color: "#fff" }}
- inputStyle={{ color: "#fff" }}
- value={this.state.myKey}
- onChangeText={(value) => this.saveKey(value)}
- />
- )
- }
- }
- export default class Settings extends React.Component {
- state = {
- fullName: '',
- number: '',
- expiry: '',
- cvc: ''
- }
- onChange = (name, value) => {
- this.setState({
- [name]: value
- })
- }
- render() {
- return (
- <Animatable.View animation="bounceIn" style={styles.container}>
- <ScrollView showsVerticalScrollIndicator={false}>
- <SettingsInput label="Full Name" storageKey="key1" onChange={(val) => this.onChange('fullName', val)} />
- <SettingsInput label="Email" storageKey="key2" />
- <SettingsInput label="Tel" storageKey="key3" />
- <SettingsInput label="Address" storageKey="key4" />
- <SettingsInput label="City" storageKey="key5" />
- <SettingsInput label="Postcode" storageKey="key6" />
- <SettingsInput label="Country" storageKey="key7" />
- <SettingsInput label="Card Type" storageKey="key8" />
- <SettingsInput label="Number" storageKey="key9" onChange={(val) => this.onChange('number', val)} />
- <SettingsInput label="Expiry" storageKey="key10" onChange={(val) => this.onChange('expiry', val)} />
- <SettingsInput label="CVV" storageKey="key11" onChange={(val) => this.onChange('cvc', val)} />
- <CreditCard
- imageFront={require("../assets/card-front.png")}
- imageBack={require("../assets/card-back.png")}
- number={this.state.number}
- name={this.state.fullName}
- expiry={this.state.expiry}
- cvc={this.state.cvc}
- onChangeText={(value) => this.saveKey()}
- />
- </ScrollView>
- </Animatable.View>
- )
- }
- }
- const styles = StyleSheet.create({
- container: {
- margin: 35,
- justifyContent: "space-around",
- alignItems: "center"
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement