feat: Add Storybook for iOS

.storybook/config.js

@@ -1,7 +1,7 @@
 import { configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
+const req = require.context('../stories/components', true, /\.stories\.js$/);
 function loadStories() {
  req.keys().forEach(filename => req(filename));
 }

app.json

@@ -1,4 +1,4 @@
 {
  "name": "rneStorybook",
- "displayName": "create react native web app"
+ "displayName": "React Native Elements Storybook"
 }

babel.config.js

@@ -1,14 +1,29 @@
-module.exports = function(api) {
+module.exports = function (api) {
 
+ // https://babeljs.io/docs/en/config-files#apicache
  api.cache(true);
+
+ if (process.env.REALM === 'WEB') {
+ return {
+ plugins: [
+ ["module-resolver", {
+ alias: {
+ "^react-native$": "react-native-web"
+ }
+ }]
+ ],
+ presets: [["react-app"]],
+ };
+ }
+
  return {
- "plugins": [
+  plugins: [
  ["module-resolver", {
- "alias": {
- "^react-native$": "react-native-web"
+ alias: {
+ "@storybook/react": "@storybook/react-native"
  }
  }]
  ],
- presets: [["react-app"]],
+ presets: ['module:metro-react-native-babel-preset']
  };
 };

index.js

@@ -1,4 +1,6 @@
 import { AppRegistry } from 'react-native';
-import App from './src/App';
 
-AppRegistry.registerComponent('rneStorybook', () => App);
+import { name as appName } from './app.json';
+import StorybookUIRoot from './stories/config';
+
+AppRegistry.registerComponent(appName, () => StorybookUIRoot);

ios/rneStorybook/AppDelegate.h

@@ -1,13 +1,14 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 
-@interface AppDelegate : UIResponder <UIApplicationDelegate>
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
 

ios/rneStorybook/AppDelegate.m

@@ -1,27 +1,25 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 #import "AppDelegate.h"
 
+#import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
- NSURL *jsCodeLocation;
+ RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+ moduleName:@"rneStorybook"
+ initialProperties:nil];
 
- jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-
- RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
- moduleName:@"rneStorybook"
- initialProperties:nil
- launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
 
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
@@ -32,4 +30,13 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
  return YES;
 }
 
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+ return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+#else
+ return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
 @end

ios/rneStorybook/Base.lproj/LaunchScreen.xib

@@ -18,7 +18,7 @@
  <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
  <nil key="highlightedColor"/>
  </label>
- <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="rneStorybook" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+ <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="React Native Elements Storybook" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
  <rect key="frame" x="20" y="140" width="441" height="43"/>
  <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
  <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>

ios/rneStorybook/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,38 +1,158 @@
 {
  "images" : [
  {
+ "size" : "20x20",
  "idiom" : "iphone",
- "size" : "29x29",
+ "filename" : "icon-20@2x.png",
  "scale" : "2x"
  },
  {
+ "size" : "20x20",
  "idiom" : "iphone",
- "size" : "29x29",
+ "filename" : "icon-20@3x.png",
  "scale" : "3x"
  },
  {
+ "size" : "29x29",
  "idiom" : "iphone",
- "size" : "40x40",
+ "filename" : "icon-29@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "29x29",
+ "idiom" : "iphone",
+ "filename" : "icon-29@2x.png",
  "scale" : "2x"
  },
  {
+ "size" : "29x29",
  "idiom" : "iphone",
+ "filename" : "icon-29@3x.png",
+ "scale" : "3x"
+ },
+ {
+ "size" : "40x40",
+ "idiom" : "iphone",
+ "filename" : "icon-40@2x.png",
+ "scale" : "2x"
+ },
+ {
  "size" : "40x40",
+ "idiom" : "iphone",
+ "filename" : "icon-40@3x.png",
  "scale" : "3x"
  },
  {
+ "size" : "57x57",
  "idiom" : "iphone",
- "size" : "60x60",
+ "filename" : "icon-57@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "57x57",
+ "idiom" : "iphone",
+ "filename" : "icon-57@2x.png",
  "scale" : "2x"
  },
  {
+ "size" : "60x60",
  "idiom" : "iphone",
+ "filename" : "icon-60@2x.png",
+ "scale" : "2x"
+ },
+ {
  "size" : "60x60",
+ "idiom" : "iphone",
+ "filename" : "icon-60@3x.png",
  "scale" : "3x"
+ },
+ {
+ "size" : "20x20",
+ "idiom" : "ipad",
+ "filename" : "icon-20@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "20x20",
+ "idiom" : "ipad",
+ "filename" : "icon-20@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "29x29",
+ "idiom" : "ipad",
+ "filename" : "icon-29@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "29x29",
+ "idiom" : "ipad",
+ "filename" : "icon-29@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "40x40",
+ "idiom" : "ipad",
+ "filename" : "icon-40@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "40x40",
+ "idiom" : "ipad",
+ "filename" : "icon-40@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "50x50",
+ "idiom" : "ipad",
+ "filename" : "icon-50@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "50x50",
+ "idiom" : "ipad",
+ "filename" : "icon-50@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "72x72",
+ "idiom" : "ipad",
+ "filename" : "icon-72@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "72x72",
+ "idiom" : "ipad",
+ "filename" : "icon-72@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "76x76",
+ "idiom" : "ipad",
+ "filename" : "icon-76@1x.png",
+ "scale" : "1x"
+ },
+ {
+ "size" : "76x76",
+ "idiom" : "ipad",
+ "filename" : "icon-76@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "83.5x83.5",
+ "idiom" : "ipad",
+ "filename" : "icon-83.5@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "size" : "1024x1024",
+ "idiom" : "ios-marketing",
+ "filename" : "icon-1024@1x.png",
+ "scale" : "1x"
  }
  ],
  "info" : {
  "version" : 1,
  "author" : "xcode"
  }
-}
+}

ios/rneStorybook/Info.plist

@@ -5,7 +5,7 @@
 <key>CFBundleDevelopmentRegion</key>
 <string>en</string>
 <key>CFBundleDisplayName</key>
-<string>create react native web app</string>
+<string>React Native Elements Storybook</string>
 <key>CFBundleExecutable</key>
 <string>$(EXECUTABLE_NAME)</string>
 <key>CFBundleIdentifier</key>
@@ -24,23 +24,8 @@
 <string>1</string>
 <key>LSRequiresIPhoneOS</key>
 <true/>
-<key>NSAppTransportSecurity</key>
-<dict>
-<key>NSAllowsArbitraryLoads</key>
-<true/>
-<key>NSExceptionDomains</key>
-<dict>
-<key>localhost</key>
-<dict>
-<key>NSExceptionAllowsInsecureHTTPLoads</key>
-<true/>
-</dict>
-</dict>
-</dict>
 <key>NSLocationWhenInUseUsageDescription</key>
 <string/>
-<key>NSMainNibFile</key>
-<string>LaunchScreen</string>
 <key>UILaunchStoryboardName</key>
 <string>LaunchScreen</string>
 <key>UIRequiredDeviceCapabilities</key>
@@ -55,6 +40,19 @@
 </array>
 <key>UIViewControllerBasedStatusBarAppearance</key>
 <false/>
+<key>NSAppTransportSecurity</key>
+<dict>
+<key>NSAllowsArbitraryLoads</key>
+<true/>
+<key>NSExceptionDomains</key>
+<dict>
+<key>localhost</key>
+<dict>
+<key>NSExceptionAllowsInsecureHTTPLoads</key>
+<true/>
+</dict>
+</dict>
+</dict>
 <key>UIAppFonts</key>
 <array>
 <string>AntDesign.ttf</string>

ios/rneStorybook/main.m

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

ios/rneStorybookTests/rneStorybookTests.m

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.