Updates from Wed 25 Mar

- [RFC][ReactNative] Integrate dev menu directly into RootView | Alex Kotliarskyi - flowify Libraries/ReactIOS | Marshall Roch - [WIP] Added support for italics and additional font weights | Nick Lockwood - [ReactNative] Improve View documentation | Christopher Chedeau - [react-packager] Readme | Amjad Masad - Fix for incorrect contentSize reported by RCTScrollView | Nick Lockwood - [ReactNative] Flow and doc formatting for NetInfo | Eric Vicenti - [ReactNative] Document AppStateIOS | Eric Vicenti
mvayngrib · Mar 26, 2015 · c7efc4d · c7efc4d
1 parent bd64b14
commit c7efc4d
Show file tree

Hide file tree

Showing 51 changed files with 801 additions and 374 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -10,7 +10,8 @@
 # Ignore react-tools where there are overlaps, but don't ignore anything that
 # react-native relies on
 .*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js
-.*/node_modules/react-tools/src/browser/.*
+.*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/browser/ui/React.js
 .*/node_modules/react-tools/src/core/ReactInstanceHandles.js
 .*/node_modules/react-tools/src/event/EventPropagators.js
 

diff --git a/Examples/2048/Game2048.js b/Examples/2048/Game2048.js
@@ -233,7 +233,7 @@ var styles = StyleSheet.create({
   tryAgainText: {
     color: '#ffffff',
     fontSize: 20,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   cell: {
     width: CELL_SIZE,
@@ -259,7 +259,7 @@ var styles = StyleSheet.create({
     fontSize: 24,
     color: '#776666',
     fontFamily: 'Verdana',
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   tile2: {
     backgroundColor: '#eeeeee',

diff --git a/Examples/Movies/MovieCell.js b/Examples/Movies/MovieCell.js
@@ -62,7 +62,7 @@ var styles = StyleSheet.create({
   movieTitle: {
     flex: 1,
     fontSize: 16,
-    fontWeight: 'bold',
+    fontWeight: '500',
     marginBottom: 2,
   },
   movieYear: {

diff --git a/Examples/Movies/MovieScreen.js b/Examples/Movies/MovieScreen.js
@@ -109,7 +109,7 @@ var styles = StyleSheet.create({
   movieTitle: {
     flex: 1,
     fontSize: 16,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   rating: {
     marginTop: 10,
@@ -119,7 +119,7 @@ var styles = StyleSheet.create({
   },
   ratingValue: {
     fontSize: 28,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   mpaaWrapper: {
     alignSelf: 'flex-start',
@@ -131,7 +131,7 @@ var styles = StyleSheet.create({
   mpaaText: {
     fontFamily: 'Palatino',
     fontSize: 13,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   mainSection: {
     flexDirection: 'row',
@@ -148,7 +148,7 @@ var styles = StyleSheet.create({
     marginVertical: 10,
   },
   castTitle: {
-    fontWeight: 'bold',
+    fontWeight: '500',
     marginBottom: 3,
   },
   castActor: {

diff --git a/Examples/UIExplorer/ActionSheetIOSExample.js b/Examples/UIExplorer/ActionSheetIOSExample.js
@@ -101,7 +101,7 @@ var ShareActionSheetExample = React.createClass({
 var style = StyleSheet.create({
   button: {
     marginBottom: 10,
-    fontWeight: 'bold',
+    fontWeight: '500',
   }
 });
 

diff --git a/Examples/UIExplorer/AdSupportIOSExample.js b/Examples/UIExplorer/AdSupportIOSExample.js
@@ -94,6 +94,6 @@ var AdSupportIOSExample = React.createClass({
 
 var styles = StyleSheet.create({
   title: {
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
 });
diff --git a/Examples/UIExplorer/DatePickerExample.js b/Examples/UIExplorer/DatePickerExample.js
@@ -149,14 +149,14 @@ var styles = StyleSheet.create({
     paddingVertical: 2,
   },
   label: {
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   headingContainer: {
     padding: 4,
     backgroundColor: '#f6f7f8',
   },
   heading: {
-    fontWeight: 'bold',
+    fontWeight: '500',
     fontSize: 14,
   },
 });
diff --git a/Examples/UIExplorer/GeolocationExample.js b/Examples/UIExplorer/GeolocationExample.js
@@ -74,6 +74,6 @@ var GeolocationExample = React.createClass({
 
 var styles = StyleSheet.create({
   title: {
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
 });
diff --git a/Examples/UIExplorer/NavigatorIOSExample.js b/Examples/UIExplorer/NavigatorIOSExample.js
@@ -214,7 +214,7 @@ var styles = StyleSheet.create({
   },
   rowText: {
     fontSize: 17,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
 });
 

diff --git a/Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js b/Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js
@@ -254,7 +254,7 @@ var styles = StyleSheet.create({
     fontSize: 18,
     color: '#666666',
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '500',
     lineHeight: 32,
   },
   filterText: {

diff --git a/Examples/UIExplorer/ReactNavigator/NavigationBarSample.js b/Examples/UIExplorer/ReactNavigator/NavigationBarSample.js
@@ -107,7 +107,7 @@ var styles = StyleSheet.create({
   },
   navBarTitleText: {
     color: cssVar('fbui-bluegray-60'),
-    fontWeight: 'bold',
+    fontWeight: '500',
     marginVertical: 9,
   },
   navBarButtonText: {

diff --git a/Examples/UIExplorer/ReactNavigator/NestedBreadcrumbNavSample.js b/Examples/UIExplorer/ReactNavigator/NestedBreadcrumbNavSample.js
@@ -176,7 +176,7 @@ var styles = StyleSheet.create({
     fontSize: 18,
     color: '#666666',
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '500',
     lineHeight: 32,
   },
   filterText: {

diff --git a/Examples/UIExplorer/SliderIOSExample.js b/Examples/UIExplorer/SliderIOSExample.js
@@ -47,7 +47,7 @@ var styles = StyleSheet.create({
   text: {
     fontSize: 14,
     textAlign: 'center',
-    fontWeight: 'bold',
+    fontWeight: '500',
     margin: 10,
   },
 });

diff --git a/Examples/UIExplorer/TextExample.ios.js b/Examples/UIExplorer/TextExample.ios.js
@@ -29,7 +29,7 @@ var Entity = React.createClass({
 
 var AttributeToggler = React.createClass({
   getInitialState: function() {
-    return {fontWeight: 'bold', fontSize: 15};
+    return {fontWeight: '500', fontSize: 15};
   },
   increaseSize: function() {
     this.setState({
@@ -129,9 +129,37 @@ exports.examples = [
   title: 'Font Weight',
   render: function() {
     return (
-      <Text style={{fontWeight: 'bold'}}>
-        Move fast and be bold
-      </Text>
+      <View>
+        <Text style={{fontWeight: '100'}}>
+          Move fast and be ultralight
+        </Text>
+        <Text style={{fontWeight: '200'}}>
+          Move fast and be light
+        </Text>
+        <Text style={{fontWeight: 'normal'}}>
+          Move fast and be normal
+        </Text>
+        <Text style={{fontWeight: 'bold'}}>
+          Move fast and be bold
+        </Text>
+        <Text style={{fontWeight: '900'}}>
+          Move fast and be ultrabold
+        </Text>
+      </View>
+    );
+  },
+},  {
+  title: 'Font Style',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontStyle: 'normal'}}>
+          Normal text
+        </Text>
+        <Text style={{fontStyle: 'italic'}}>
+          Italic text
+        </Text>
+      </View>
     );
   },
 }, {
@@ -279,7 +307,7 @@ var styles = StyleSheet.create({
     backgroundColor: 'rgba(100, 100, 100, 0.3)'
   },
   entity: {
-    fontWeight: 'bold',
+    fontWeight: '500',
     color: '#527fe4',
   },
 });
diff --git a/Examples/UIExplorer/TouchableExample.js b/Examples/UIExplorer/TouchableExample.js
@@ -187,7 +187,7 @@ var styles = StyleSheet.create({
     backgroundColor: '#f9f9f9',
   },
   textBlock: {
-    fontWeight: 'bold',
+    fontWeight: '500',
     color: 'blue',
   },
 });
diff --git a/Examples/UIExplorer/UIExplorer/AppDelegate.m b/Examples/UIExplorer/UIExplorer/AppDelegate.m
@@ -9,7 +9,6 @@
 
 #import "AppDelegate.h"
 
-#import "RCTDevelopmentViewController.h"
 #import "RCTRootView.h"
 
 @implementation AppDelegate
@@ -42,7 +41,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   rootView.moduleName = @"UIExplorerApp";
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[RCTDevelopmentViewController alloc] init];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];

diff --git a/Examples/UIExplorer/UIExplorerBlock.js b/Examples/UIExplorer/UIExplorerBlock.js
@@ -76,7 +76,7 @@ var styles = StyleSheet.create({
   },
   titleText: {
     fontSize: 14,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   descriptionText: {
     fontSize: 14,

diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js
@@ -204,7 +204,7 @@ var styles = StyleSheet.create({
     backgroundColor: 'white',
   },
   sectionHeaderTitle: {
-    fontWeight: 'bold',
+    fontWeight: '500',
     fontSize: 11,
   },
   row: {
@@ -220,7 +220,7 @@ var styles = StyleSheet.create({
   },
   rowTitleText: {
     fontSize: 17,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   rowDetailText: {
     fontSize: 15,

diff --git a/Examples/UIExplorer/UIExplorerTitle.js b/Examples/UIExplorer/UIExplorerTitle.js
@@ -42,7 +42,7 @@ var styles = StyleSheet.create({
   },
   text: {
     fontSize: 19,
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
 });
 

diff --git a/Examples/UIExplorer/WebViewExample.js b/Examples/UIExplorer/WebViewExample.js
@@ -239,7 +239,7 @@ var styles = StyleSheet.create({
   },
   errorTextTitle: {
     fontSize: 15,
-    fontWeight: 'bold',
+    fontWeight: '500',
     marginBottom: 10,
   },
   errorText: {

diff --git a/IntegrationTests/IntegrationTestsApp.js b/IntegrationTests/IntegrationTestsApp.js
@@ -81,7 +81,7 @@ var styles = StyleSheet.create({
     padding: 10,
   },
   testName: {
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   separator: {
     height: 1,

diff --git a/Libraries/AppStateIOS/AppStateIOS.ios.js b/Libraries/AppStateIOS/AppStateIOS.ios.js
@@ -21,28 +21,92 @@ var DEVICE_APPSTATE_EVENT = 'appStateDidChange';
 
 var _appStateHandlers = {};
 
-class AppStateIOS {
+/**
+ * `AppStateIOS` can tell you if the app is in the foreground or background,
+ * and notify you when the state changes.
+ *
+ * AppStateIOS is frequently used to determine the intent and proper behavior when
+ * handling push notifications.
+ *
+ * ### iOS App States
+ *
+ *  - `active` - The app is running in the foreground
+ *  - `background` - The app is running in the background. The user is either
+ *     in another app or on the home screen
+ *  - `inactive` - This is a transition state that currently never happens for
+ *     typical React Native apps.
+ *
+ * For more information, see
+ * [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html)
+ *
+ * ### Basic Usage
+ *
+ * To see the current state, you can check `AppStateIOS.currentState`, which
+ * will be kept up-to-date. However, `currentState` will be null at launch
+ * while `AppStateIOS` retrieves it over the bridge.
+ *
+ * ```
+ * getInitialState: function() {
+ *   return {
+ *     currentAppState: AppStateIOS.currentState,
+ *   };
+ * },
+ * componentDidMount: function() {
+ *   AppStateIOS.addEventListener('change', this._handleAppStateChange);
+ * },
+ * componentWillUnmount: function() {
+ *   AppStateIOS.removeEventListener('change', this._handleAppStateChange);
+ * },
+ * _handleAppStateChange: function(currentAppState) {
+ *   this.setState({ currentAppState, });
+ * },
+ * render: function() {
+ *   return (
+ *     <Text>Current state is: {this.state.currentAppState}</Text>
+ *   );
+ * },
+ * ```
+ *
+ * This example will only ever appear to say "Current state is: active" because
+ * the app is only visible to the user when in the `active` state, and the null
+ * state will happen only momentarily.
+ */
 
-  static addEventListener(type, handler) {
+var AppStateIOS = {
+
+  /**
+   * Add a handler to AppState changes by listening to the `change` event type
+   * and providing the handler
+   */
+  addEventListener: function(
+    type: string,
+    handler: Function
+  ) {
     _appStateHandlers[handler] = RCTDeviceEventEmitter.addListener(
       DEVICE_APPSTATE_EVENT,
       (appStateData) => {
         handler(appStateData.app_state);
       }
     );
-  }
+  },
 
-  static removeEventListener(type, handler) {
+  /**
+   * Remove a handler by passing the `change` event type and the handler
+   */
+  removeEventListener: function(
+    type: string,
+    handler: Function
+  ) {
     if (!_appStateHandlers[handler]) {
       return;
     }
     _appStateHandlers[handler].remove();
     _appStateHandlers[handler] = null;
-  }
+  },
 
-}
+  currentState: (null : ?String),
 
-AppStateIOS.currentState = null;
+};
 
 RCTDeviceEventEmitter.addListener(
   DEVICE_APPSTATE_EVENT,
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,7 +42,7 @@ var styles = StyleSheet.create({ @@
       },
       text: {
         fontSize: 19,
-        fontWeight: 'bold',
+        fontWeight: '500',
       },
     });
@@ Expand Down @@