On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.
The AsyncStorage JavaScript code is a simple facade that provides a clear JavaScript API, real Error objects, and simple non-multi functions. Each method in the API returns a Promise object.
Persisting data:
-try {
- await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
-} catch (error) {
- // Error saving data
+_storeData = async () => {
+ try {
+ await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
+ } catch (error) {
+ // Error saving data
+ }
}
Fetching data:
-try {
- const value = await AsyncStorage.getItem('@MySuperStore:key');
- if (value !== null){
- // We have data!!
- console.log(value);
- }
-} catch (error) {
- // Error retrieving data
+_retrieveData = async () => {
+ try {
+ const value = await AsyncStorage.getItem('TASKS');
+ if (value !== null) {
+ // We have data!!
+ console.log(value);
+ }
+ } catch (error) {
+ // Error retrieving data
+ }
}
Methods
diff --git a/docs/next/tutorial.html b/docs/next/tutorial.html
index 4069eb23f93..bf53efc7d04 100644
--- a/docs/next/tutorial.html
+++ b/docs/next/tutorial.html
@@ -14,17 +14,20 @@
export default class HelloWorldApp extends Component {
render() {
return (
- <Text>Hello world!</Text>
+ <View>
+ <Text>Hello world!</Text>
+ </View>
+
);
}
}
-
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your App.js file to create a real app on your local machine.
Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.
First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. import, from, class, and extends in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, this page has a good overview of ES2015 features.
The other unusual thing in this code example is <Text>Hello world!</Text>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a built-in component that just displays some text.
The other unusual thing in this code example is <View><Text>Hello world!</Text></View>. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a built-in component that just displays some text and View is like the <div> or <span>.
So this code is defining HelloWorldApp, a new Component. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a render function which returns some JSX to render.