Updates from Thu Mar 12

Examples/2048/AppDelegate.m

@@ -20,7 +20,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   //
   // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
   // iOS device are on the same Wi-Fi network.
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.includeRequire.runModule.bundle?dev=true"];
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.includeRequire.runModule.bundle"];
 
   // OPTION 2
   // Load from pre-bundled file on disk. To re-generate the static bundle, run

Examples/Movies/AppDelegate.m

@@ -20,7 +20,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   //
   // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
   // iOS device are on the same Wi-Fi network.
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle?dev=true"];
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle"];
 
   // OPTION 2
   // Load from pre-bundled file on disk. To re-generate the static bundle, run

Examples/TicTacToe/AppDelegate.m

@@ -20,7 +20,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   //
   // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
   // iOS device are on the same Wi-Fi network.
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.includeRequire.runModule.bundle?dev=true"];
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.includeRequire.runModule.bundle"];
 
   // OPTION 2
   // Load from pre-bundled file on disk. To re-generate the static bundle, run

Examples/UIExplorer/AppStateExample.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AppState,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+var Button = React.createClass({
+  render: function() {
+    return (
+      <TouchableHighlight
+        underlayColor={'white'}
+        style={styles.button}
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonLabel}>
+          {this.props.label}
+        </Text>
+      </TouchableHighlight>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  button: {
+    padding: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: 'blue',
+  },
+});
+
+exports.title = 'AppState';
+exports.description = 'App background status and badge value';
+exports.examples = [
+{
+  title: 'Set Badge Number',
+  render: function() {
+    return (
+      <View>
+        <Button
+          onPress={() => AppState.setApplicationIconBadgeNumber(42)}
+          label="Set app's icon badge to 42"
+        />
+        <Button
+          onPress={() => AppState.setApplicationIconBadgeNumber(0)}
+          label="Clear app's icon badge"
+        />
+      </View>
+    );
+  },
+}];

Examples/UIExplorer/AppStateIOSExample.js

@@ -0,0 +1,69 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule AppStateIOSExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AppStateIOS,
+  Text,
+  View
+} = React;
+
+var AppStateSubscription = React.createClass({
+  getInitialState() {
+    return {
+      appState: AppStateIOS.currentState,
+      previousAppStates: [],
+    };
+  },
+  componentDidMount: function() {
+    AppStateIOS.addEventListener('change', this._handleAppStateChange);
+  },
+  componentWillUnmount: function() {
+    AppStateIOS.removeEventListener('change', this._handleAppStateChange);
+  },
+  _handleAppStateChange: function(appState) {
+    var previousAppStates = this.state.previousAppStates.slice();
+    previousAppStates.push(this.state.appState);
+    this.setState({
+      appState,
+      previousAppStates,
+    });
+  },
+  render() {
+    if (this.props.showCurrentOnly) {
+      return (
+        <View>
+          <Text>{this.state.appState}</Text>
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'AppStateIOS';
+exports.description = 'iOS app background status';
+exports.examples = [
+  {
+    title: 'AppStateIOS.currentState',
+    description: 'Can be null on app initialization',
+    render() { return <Text>{AppStateIOS.currentState}</Text>; }
+  },
+  {
+    title: 'Subscribed AppStateIOS:',
+    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
+    render() { return <AppStateSubscription showCurrentOnly={true} />; }
+  },
+  {
+    title: 'Previous states:',
+    render() { return <AppStateSubscription showCurrentOnly={false} />; }
+  },
+];

Examples/UIExplorer/AsyncStorageExample.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AsyncStorage,
+  PickerIOS,
+  Text,
+  View
+} = React;
+var PickerItemIOS = PickerIOS.Item;
+
+var STORAGE_KEY = '@AsyncStorageExample:key';
+var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
+
+var BasicStorageExample = React.createClass({
+  componentDidMount() {
+    AsyncStorage.getItem(STORAGE_KEY, (error, value) => {
+      if (error) {
+        this._appendMessage('AsyncStorage error: ' + error.message);
+      } else if (value !== null) {
+        this.setState({selectedValue: value});
+        this._appendMessage('Recovered selection from disk: ' + value);
+      } else {
+        this._appendMessage('Initialized with no selection on disk.');
+      }
+    });
+  },
+  getInitialState() {
+    return {
+      selectedValue: COLORS[0],
+      messages: [],
+    };
+  },
+
+  render() {
+    var color = this.state.selectedValue;
+    return (
+      <View>
+        <PickerIOS
+          selectedValue={color}
+          onValueChange={this._onValueChange}>
+          {COLORS.map((value) => (
+            <PickerItemIOS
+              key={value}
+              value={value}
+              label={value}
+            />
+          ))}
+        </PickerIOS>
+        <Text>
+          {'Selected: '}
+          <Text style={{color}}>
+            {this.state.selectedValue}
+          </Text>
+        </Text>
+        <Text>{' '}</Text>
+        <Text onPress={this._removeStorage}>
+          Press here to remove from storage.
+        </Text>
+        <Text>{' '}</Text>
+        <Text>Messages:</Text>
+        {this.state.messages.map((m) => <Text>{m}</Text>)}
+      </View>
+    );
+  },
+
+  _onValueChange(selectedValue) {
+    this.setState({selectedValue});
+    AsyncStorage.setItem(STORAGE_KEY, selectedValue, (error) => {
+      if (error) {
+        this._appendMessage('AsyncStorage error: ' + error.message);
+      } else {
+        this._appendMessage('Saved selection to disk: ' + selectedValue);
+      }
+    });
+  },
+
+  _removeStorage() {
+    AsyncStorage.removeItem(STORAGE_KEY, (error) => {
+      if (error) {
+        this._appendMessage('AsyncStorage error: ' + error.message);
+      } else {
+        this._appendMessage('Selection removed from disk.');
+      }
+    });
+  },
+
+  _appendMessage(message) {
+    this.setState({messages: this.state.messages.concat(message)});
+  },
+});
+
+exports.title = 'AsyncStorage';
+exports.description = 'Asynchronous local disk storage.';
+exports.examples = [
+  {
+    title: 'Basics - getItem, setItem, removeItem',
+    render() { return <BasicStorageExample />; }
+  },
+];

Examples/UIExplorer/UIExplorerApp.js

@@ -16,6 +16,7 @@ var {
 
 
 var UIExplorerApp = React.createClass({
+
   render: function() {
     return (
       <NavigatorIOS
@@ -25,7 +26,8 @@ var UIExplorerApp = React.createClass({
           component: UIExplorerList,
         }}
         itemWrapperStyle={styles.itemWrapper}
-        tintColor='#008888'/>
+        tintColor='#008888'
+      />
     );
   }
 });

Examples/UIExplorer/UIExplorerList.js

@@ -37,9 +37,12 @@ var EXAMPLES = [
   require('./TabBarExample'),
   require('./SwitchExample'),
   require('./SliderExample'),
+  require('./AsyncStorageExample'),
   require('./CameraRollExample.ios'),
   require('./MapViewExample'),
+  require('./AppStateIOSExample'),
   require('./AdSupportIOSExample'),
+  require('./AppStateExample'),
 ];
 
 var UIExplorerList = React.createClass({

Libraries/AppState/AppState.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule AppState
+ */
+'use strict';
+
+var NativeModules = require('NativeModulesDeprecated');
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+var RKAppState = NativeModules.RKAppState;
+var RKReachability = NativeModules.RKReachability;
+var Subscribable = require('Subscribable');
+
+var keyMirror = require('keyMirror');
+
+var AppState = {
+
+  setApplicationIconBadgeNumber: function(number) {
+    RKAppState.setApplicationIconBadgeNumber(number);
+  },
+
+  getApplicationIconBadgeNumber: function(callback) {
+    RKAppState.getApplicationIconBadgeNumber(callback);
+  },
+
+};
+
+// This check avoids redboxing if native RKReachability library isn't included in app
+// TODO: Move reachability API into separate JS module to prevent need for this
+if (RKReachability) {
+  AppState.networkReachability = new Subscribable(
+    RCTDeviceEventEmitter,
+    'reachabilityDidChange',
+    (resp) => resp.network_reachability,
+    RKReachability.getCurrentReachability
+  );
+}
+
+AppState.NetworkReachability = keyMirror({
+  wifi: true,
+  cell: true,
+  none: true,
+  unknown: true,
+});
+
+module.exports = AppState;

Libraries/AppStateIOS/AppStateIOS.android.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule AppStateIOS
+ */
+'use strict';
+
+var warning = require('warning');
+
+class AppStateIOS {
+
+  static addEventListener(type, handler) {
+    warning('Cannot listen to AppStateIOS events on Android.');
+  }
+
+  static removeEventListener(type, handler) {
+    warning('Cannot remove AppStateIOS listener on Android.');
+  }
+
+}
+
+AppStateIOS.currentState = null;
+
+module.exports = AppStateIOS;