daily pastebin goal
39%
SHARE
TWEET

Untitled

a guest Dec 13th, 2018 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { ScrollView, StyleSheet, AsyncStorage } from "react-native";
  3. import { Madoka } from "react-native-textinput-effects";
  4. import CreditCard from "react-native-credit-card";
  5. import * as Animatable from 'react-native-animatable';
  6.  
  7. export class SettingsInput extends React.Component {
  8.   constructor(props) {
  9.     super(props);
  10.     this.state = {
  11.         myKey: undefined
  12.     }
  13.   }
  14.  
  15.   componentDidMount() {
  16.       this.getKey()
  17.   }
  18.  
  19.   async getKey() {
  20.     try {
  21.       const value = await AsyncStorage.getItem(this.props.storageKey);
  22.       this.setState({myKey: value});
  23.     } catch (error) {
  24.       console.log("Error retrieving data" + error);
  25.     }
  26.   }
  27.  
  28.   async saveKey(value) {
  29.     try {
  30.         this.props.onChange && this.props.onChange(value)
  31.         await AsyncStorage.setItem(this.props.storageKey, value)
  32.     } catch (error) {
  33.       console.log("Error saving data" + error);
  34.     }
  35.   }
  36.  
  37.   render() {
  38.     return (
  39.         <Madoka
  40.           label={this.props.label}
  41.           borderColor={"#fff"}
  42.           labelStyle={{ color: "#fff" }}
  43.           inputStyle={{ color: "#fff" }}
  44.           value={this.state.myKey}
  45.           onChangeText={(value) => this.saveKey(value)}
  46.         />
  47.     )
  48.   }
  49. }
  50.  
  51. export default class Settings extends React.Component {
  52.     state = {
  53.         fullName: '',
  54.         number: '',
  55.         expiry: '',
  56.         cvc: ''
  57.     }
  58.  
  59.     onChange = (name, value) => {
  60.         this.setState({
  61.             [name]: value
  62.         })
  63.     }
  64.  
  65.     render() {
  66.         return (
  67.             <Animatable.View animation="bounceIn" style={styles.container}>
  68.               <ScrollView showsVerticalScrollIndicator={false}>
  69.                 <SettingsInput label="Full Name" storageKey="key1" onChange={(val) => this.onChange('fullName', val)} />
  70.                 <SettingsInput label="Email" storageKey="key2" />
  71.                 <SettingsInput label="Tel" storageKey="key3" />
  72.                 <SettingsInput label="Address" storageKey="key4" />
  73.                 <SettingsInput label="City" storageKey="key5" />
  74.                 <SettingsInput label="Postcode" storageKey="key6" />
  75.                 <SettingsInput label="Country" storageKey="key7" />
  76.                 <SettingsInput label="Card Type" storageKey="key8" />
  77.                 <SettingsInput label="Number" storageKey="key9" onChange={(val) => this.onChange('number', val)} />
  78.                 <SettingsInput label="Expiry" storageKey="key10" onChange={(val) => this.onChange('expiry', val)} />
  79.                 <SettingsInput label="CVV" storageKey="key11" onChange={(val) => this.onChange('cvc', val)} />
  80.                 <CreditCard
  81.                 imageFront={require("../assets/card-front.png")}
  82.                 imageBack={require("../assets/card-back.png")}
  83.                 number={this.state.number}
  84.                 name={this.state.fullName}
  85.                 expiry={this.state.expiry}
  86.                 cvc={this.state.cvc}
  87.                 onChangeText={(value) => this.saveKey()}
  88.                  />
  89.               </ScrollView>
  90.             </Animatable.View>
  91.         )
  92.     }
  93. }
  94.  
  95. const styles = StyleSheet.create({
  96.   container: {
  97.     margin: 35,
  98.     justifyContent: "space-around",
  99.     alignItems: "center"
  100.   }
  101. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top