react-native-shared-preferences/example/index.android.js at master · sriraman/react-native-shared-preferences · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	TouchableOpacity,
	View,
	TextInput,
	ToastAndroid
} from 'react-native';

var SharedPreferences = require('react-native-shared-preferences');

class example extends Component {

	constructor(props){
		super(props)
		this.state = {
			keyToStore: "",
			valueToStore: "",
			keyToGet: ""
		}
	}
	addSharedPreference(){
		SharedPreferences.setItem(this.state.keyToStore,this.state.valueToStore);
		this.setState({
			keyToStore: "",
			valueToStore: ""
		})
		ToastAndroid.show("Added Shared Preference", ToastAndroid.SHORT);
	}
	getSharedPreference(){
		SharedPreferences.getItem(this.state.keyToGet, function(value){
			ToastAndroid.show(value,ToastAndroid.SHORT);
		})

		SharedPreferences.getItems([this.state.keyToGet], function(value){
			console.log(value);
		})

		SharedPreferences.getAll(function(value){
			console.log(value);
		})
	}

	// TODO : Function to get all the shared preferences
	//getAllSharedPreferences(){
	//	SharedPreferences.getAll(function(value){
	//		console.log(value);
	//		ToastAndroid.show(value,ToastAndroid.SHORT);
	//	})
	//}
	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.heading}> Shared Preferences </Text>
				<View style={styles.box}>
					<TextInput placeholder="Key" placeholderTextColor='#ccc' onChangeText={(keyToStore) => this.setState({keyToStore})} value={this.state.keyToStore} style={styles.textField}/>
					<TextInput placeholder="Value" placeholderTextColor='#ccc' onChangeText={(valueToStore) => this.setState({valueToStore})} value={this.state.valueToStore} style={styles.textField}/>
					<TouchableOpacity onPress={this.addSharedPreference.bind(this)} style={styles.button}>
						<Text style={styles.buttonText}>Store</Text>
					</TouchableOpacity>
				</View>
				<View style={styles.box}>
					<TextInput placeholder="Key" placeholderTextColor="#ccc" onChangeText={(keyToGet) => this.setState({keyToGet})} value={this.state.keyToGet} style={styles.textField}/>
					<TouchableOpacity onPress={this.getSharedPreference.bind(this)} style={styles.button}>
						<Text style={styles.buttonText}>Retrieve</Text>
					</TouchableOpacity>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignSelf: 'center'
	},
	box: {
		width: 220,
		backgroundColor: '#fff',
		padding: 10,
		marginBottom: 10
	},
	button: {
		flex: 1,
		padding: 5,
		backgroundColor: '#aaa',
		marginBottom: 10
	},
	buttonText: {
		textAlign: 'center',
		flex: 1
	},
	heading: {
			fontSize: 20,
			textAlign: 'center',
			margin: 10,
		},
		instructions: {
				textAlign: 'center',
				color: '#333333',
				marginBottom: 5,
			},
		textField: {
				width: 200
			}
});

AppRegistry.registerComponent('example', () => example);