From 6c60465e4ccf70490a5b4d25146357d091eed4e2 Mon Sep 17 00:00:00 2001
From: simek <gosimek@gmail.com>
Date: Thu, 5 Mar 2020 21:04:07 +0100
Subject: [PATCH 1/2] add Snack example to Settings page

---
 docs/settings.md | 50 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/docs/settings.md b/docs/settings.md
index 7f19edde71c..4a6da3dd553 100644
--- a/docs/settings.md
+++ b/docs/settings.md
@@ -5,6 +5,48 @@ title: Settings
 
 `Settings` serves as a wrapper for [`NSUserDefaults`](https://developer.apple.com/documentation/foundation/nsuserdefaults), a persistent key-value store available only on iOS.
 
+## Example
+
+```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
+import React, { useEffect, useState } from "react";
+import { Button, Settings, StyleSheet, Text, View } from "react-native";
+
+export default App = () => {
+  const [data, setData] = useState("-");
+  
+  useEffect(() => {
+    const watchId = Settings.watchKeys(
+      "data", 
+      () => setData(Settings.get("data"))
+    );
+    return () => Settings.clearWatch(watchId);
+  });
+
+  return (
+    <View style={styles.container}>
+      <Text>Stored value:</Text>
+      <Text>{data}</Text>
+      <Button 
+        onPress={() => Settings.set({ data: "React" })} 
+        title="Store 'React'"
+      />
+      <Button 
+        onPress={() => Settings.set({ data: "Native" })} 
+        title="Store 'Native'"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+```
+
 ---
 
 # Reference
@@ -14,7 +56,7 @@ title: Settings
 ### `clearWatch()`
 
 ```jsx
-static clearWatch(watchId)
+static clearWatch(watchId: number)
 ```
 
 `watchId` is the number returned by `watchKeys()` when the subscription was originally configured.
@@ -22,7 +64,7 @@ static clearWatch(watchId)
 ### `get()`
 
 ```jsx
-static get(key)
+static get(key: string): mixed
 ```
 
 Get the current value for a key in `NSUserDefaults`.
@@ -32,7 +74,7 @@ Get the current value for a key in `NSUserDefaults`.
 ### `set()`
 
 ```jsx
-static set(settings)
+static set(settings: object)
 ```
 
 Set one or more values in `NSUserDefaults`.
@@ -42,7 +84,7 @@ Set one or more values in `NSUserDefaults`.
 ### `watchKeys()`
 
 ```jsx
-static watchKeys(keys, callback)
+static watchKeys(keys: string | array<string>, callback: function): number
 ```
 
 Subscribe to be notified when the value for any of the keys specified by the `keys` array changes in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.

From 3ba204617588e1d3c383e5c0fdceeb60a02fd027 Mon Sep 17 00:00:00 2001
From: simek <gosimek@gmail.com>
Date: Tue, 10 Mar 2020 12:30:05 +0100
Subject: [PATCH 2/2] remove watchKeys from the example, add note, update
 styles

---
 docs/settings.md | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/docs/settings.md b/docs/settings.md
index 4a6da3dd553..b05aaa2caa6 100644
--- a/docs/settings.md
+++ b/docs/settings.md
@@ -8,30 +8,27 @@ title: Settings
 ## Example
 
 ```SnackPlayer name=Settings%20Example&supportedPlatforms=ios
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button, Settings, StyleSheet, Text, View } from "react-native";
 
 export default App = () => {
-  const [data, setData] = useState("-");
-  
-  useEffect(() => {
-    const watchId = Settings.watchKeys(
-      "data", 
-      () => setData(Settings.get("data"))
-    );
-    return () => Settings.clearWatch(watchId);
-  });
+  const [data, setData] = useState(Settings.get("data"));
+
+  const storeData = data => {
+    Settings.set(data);
+    setData(Settings.get("data"));
+  };
 
   return (
     <View style={styles.container}>
       <Text>Stored value:</Text>
-      <Text>{data}</Text>
-      <Button 
-        onPress={() => Settings.set({ data: "React" })} 
+      <Text style={styles.value}>{data}</Text>
+      <Button
+        onPress={() => storeData({ data: "React" })}
         title="Store 'React'"
       />
-      <Button 
-        onPress={() => Settings.set({ data: "Native" })} 
+      <Button
+        onPress={() => storeData({ data: "Native" })}
         title="Store 'Native'"
       />
     </View>
@@ -43,6 +40,10 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center"
+  },
+  value: {
+    fontSize: 24,
+    marginVertical: 12
   }
 });
 ```
@@ -67,7 +68,7 @@ static clearWatch(watchId: number)
 static get(key: string): mixed
 ```
 
-Get the current value for a key in `NSUserDefaults`.
+Get the current value for a given `key` in `NSUserDefaults`.
 
 ---
 
@@ -87,4 +88,6 @@ Set one or more values in `NSUserDefaults`.
 static watchKeys(keys: string | array<string>, callback: function): number
 ```
 
-Subscribe to be notified when the value for any of the keys specified by the `keys` array changes in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+Subscribe to be notified when the value for any of the keys specified by the `keys` parameter has been changed in `NSUserDefaults`. Returns a `watchId` number that may be used with `clearWatch()` to unsubscribe.
+
+> **Note:** `watchKeys()` by design ignores internal `set()` calls and fires callback only on changes preformed outside of React Native code.