Make the example run on Exponent

Author: brentvatne

README.md

@@ -25,7 +25,7 @@ React Native component for creating circular slider.
 Import Circular Slider
 
 ```js
-import { CircularSlider } from 'react-native-circular-slider';
+import CircularSlider from 'react-native-circular-slider';
 ```
 
 Use as follows:
@@ -69,16 +69,22 @@ You can configure the passing by following props:
 
 ## Working example app
 
-You can find working example in the `example` directory of this repository. You can run it by:
+You can find working example in the `example` directory of this
+repository.
 
-```sh
-git clone https://github.com/bgryszko/react-native-circular-slider.git
-cd  react-native-circular-slider/example/Bedtime
-npm install
-open ios/Bedtime.xcodeproj
-```
-XCode will open. Click Run button and that's it.
+The easiest way to run it is with Exponent: https://getexponent.com/@community/bedtime
+
+If you'd rather build it locally, follow these steps:
+
+1. [Download XDE](https://docs.getexponent.com/versions/latest/introduction/installation.html)
+2. Clone the repo and install dependencies
 
+  ```sh
+  git clone https://github.com/bgryszko/react-native-circular-slider.git
+  cd  react-native-circular-slider/example/Bedtime
+  npm install
+  ```
+3. Open the project with XDE
 
 ## License
 

example/Bedtime/.babelrc

@@ -1,3 +1,5 @@
 {
-"presets": ["react-native"]
-}
+  "presets": [
+    "babel-preset-exponent"
+  ]
+}

example/Bedtime/.gitignore

@@ -40,3 +40,5 @@ buck-out/
 \.buckd/
 android/app/libs
 *.keystore
+
+.exponent

example/Bedtime/__tests__/index.android.js

@@ -0,0 +1,19 @@
+{
+  "name": "Bedtime",
+  "description": "react-native-circular-slider is a component for creating circular sliders, this example uses it to re-create Apple Bedtime.",
+  "slug": "bedtime",
+  "sdkVersion": "12.0.0",
+  "version": "1.0.0",
+  "orientation": "portrait",
+  "primaryColor": "#cccccc",
+  "iconUrl": "http://url.brentvatne.ca/YBqq.png",
+  "loading": {
+    "iconUrl": "http://url.brentvatne.ca/YBqq.png",
+    "hideExponentText": false
+  },
+  "packagerOpts": {
+    "assetExts": [
+      "ttf"
+    ]
+  }
+}

example/Bedtime/__tests__/index.ios.js

@@ -1,5 +1,6 @@
+import Exponent from 'exponent';
 import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Svg, { G, Path } from 'react-native-svg';
 
 import CircularSlider from 'react-native-circular-slider';
@@ -168,4 +169,4 @@ const styles = StyleSheet.create({
   }
 });
 
-AppRegistry.registerComponent('Bedtime', () => Bedtime);
+Exponent.registerRootComponent(Bedtime);

example/Bedtime/exp.json

@@ -7,18 +7,14 @@
     "test": "jest"
   },
   "dependencies": {
-    "react-native-circular-slider": "^1.0.0",
-    "react": "15.4.1",
-    "react-native": "0.39.2",
-    "react-native-svg": "^4.4.1"
-  },
-  "devDependencies": {
-    "babel-jest": "18.0.0",
-    "babel-preset-react-native": "1.9.1",
-    "jest": "18.0.0",
-    "react-test-renderer": "15.4.1"
+    "react-native-circular-slider": "file:../..",
+    "react": "~15.3.2",
+    "react-native": "github:exponentjs/react-native#sdk-12.0.0",
+    "@exponent/vector-icons": "~2.0.3",
+    "exponent": "~12.0.3"
   },
   "jest": {
     "preset": "react-native"
-  }
+  },
+  "main": "main.js"
 }

example/Bedtime/index.android.js

@@ -2,7 +2,7 @@
   "name": "react-native-circular-slider",
   "version": "1.0.0",
   "description": "React Native component for creating circular slider",
-  "main": "index.js",
+  "main": "src/CircularSlider.js",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bgryszko/react-native-circular-slider.git"
@@ -25,6 +25,10 @@
     "name": "Bart Gryszko",
     "email": "b@gryszko.com"
   },
+  "files": [
+    "src",
+    "README.md"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/bgryszko/react-native-circular-slider/issues"
@@ -33,6 +37,6 @@
   "dependencies": {
     "d3-interpolate": "^1.1.2",
     "lodash.range": "^3.2.0",
-    "react-native-svg": "^4.4.1"
+    "react-native-svg": ">=4.3.3"
   }
 }