Setup example app

.flowconfig

@@ -28,6 +28,7 @@
 .*/example/node_modules/fbjs
 .*/example/node_modules/react
 .*/example/node_modules/react-native
+.*/example/node_modules/exponent
 .*/example/\.buckd/
 
 [include]
@@ -50,6 +51,7 @@ experimental.strict_type_args=true
 
 munge_underscores=true
 
+module.name_mapper='^exponent$' -> 'emptyObject'
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 

example/main.js

@@ -1,27 +1,24 @@
-import Exponent from 'exponent';
-import React from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+/* @flow */
 
-class App extends React.Component {
+import Exponent from 'exponent';
+import React, { Component } from 'react';
+import {
+  NavigationProvider,
+  StackNavigation,
+} from '@exponent/ex-navigation';
+import { ThemeProvider } from 'react-native-paper';
+import Router from './src/Router';
+
+class App extends Component {
   render() {
     return (
-      <View style={styles.container}>
-        <Text>React Native Paper will rock :D</Text>
-      </View>
+      <ThemeProvider>
+        <NavigationProvider router={Router}>
+          <StackNavigation initialRoute={Router.getRoute('home')} />
+        </NavigationProvider>
+      </ThemeProvider>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 24,
-    alignItems: 'center',
-  },
-});
-
 Exponent.registerRootComponent(App);

example/package.json

@@ -6,6 +6,8 @@
   "private": true,
   "main": "main.js",
   "dependencies": {
+    "@exponent/ex-navigation": "^1.7.0",
+    "@exponent/vector-icons": "^1.0.4",
     "exponent": "^10.0.4",
     "react": "~15.3.2",
     "react-native": "github:exponentjs/react-native#sdk-10.1.2",

example/src/ExampleList.js

@@ -0,0 +1,52 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+} from 'react-native';
+import { Colors, TouchableRipple } from 'react-native-paper';
+import RipplesExample from './RipplesExample';
+
+export const examples = {
+  ripples: RipplesExample,
+};
+
+export default class ExampleList extends Component {
+
+  static route = {
+    navigationBar: {
+      title: 'Examples',
+    },
+  };
+
+  render() {
+    return (
+      <View style={styles.list}>
+        {Object.keys(examples).map(id => (
+          <TouchableRipple
+            key={id}
+            style={styles.item}
+            onPress={() => this.props.navigator.push(id)}
+          >
+            <Text style={styles.text}>{examples[id].title}</Text>
+          </TouchableRipple>
+        ))}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 16,
+    borderBottomColor: Colors.grey300,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+
+  text: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});

example/src/RipplesExample.js

@@ -0,0 +1,12 @@
+/* @flow */
+
+import { Component } from 'react';
+
+export default class RipplesExample extends Component {
+
+  static title = 'Ripples';
+
+  render() {
+    return null;
+  }
+}

example/src/Router.js

@@ -0,0 +1,32 @@
+/* @flow */
+
+import React from 'react';
+import {
+  createRouter,
+} from '@exponent/ex-navigation';
+import ExampleList, { examples } from './ExampleList';
+
+const routes = Object.keys(examples)
+  .map(id => ({ id, item: examples[id] }))
+  .reduce((acc, { id, item }) => {
+    const Comp = item;
+    const Screen = props => <Comp {...props} />;
+
+    Screen.route = {
+      navigationBar: {
+        title: Comp.title,
+      }
+    };
+
+    return {
+      ...acc,
+      [id]: () => Screen,
+    };
+  }, {});
+
+const Router = createRouter(() => ({
+  home: () => ExampleList,
+  ...routes,
+}));
+
+export default Router;

index.js

@@ -1,3 +1,7 @@
-// @flow
-export { default as ThemeProvider } from './src/styles/ThemeProvider';
-export { default as TouchableRipple } from './src/TouchableRipple';
+/* @flow */
+
+export { default as ThemeProvider } from './src/core/ThemeProvider';
+
+export * as Colors from './src/styles/colors.js';
+
+export { default as TouchableRipple } from './src/components/TouchableRipple';

src/TouchableRipple/TouchableRipple.android.js

@@ -1,46 +0,0 @@
-// @flow
-import React, {
-  Component,
-  PropTypes,
-  Platform,
-} from 'react';
-import {
-  TouchableNativeFeedback,
-  View,
-} from 'react-native';
-
-export default class TouchableRipple extends Component {
-
-  static propTypes = {
-    children: PropTypes.element.isRequired,
-    borderless: PropTypes.bool,
-    onPress: PropTypes.func,
-    rippleColor: PropTypes.string,
-    style: View.propTypes.style,
-  };
-  static defaultProps = {
-    borderless: false,
-  }
-
-  render() {
-    const {
-      children,
-      onPress,
-      rippleColor,
-      borderless,
-      style,
-     } = this.props;
-    return (
-        <TouchableNativeFeedback
-          onPress={onPress}
-          background={Platform.Version >= 21 ?
-            TouchableNativeFeedback.Ripple(rippleColor, borderless) :
-            TouchableNativeFeedback.SelectableBackground()}
-        >
-          <View style={style}>
-            {children}
-          </View>
-        </TouchableNativeFeedback>
-    );
-  }
-}

src/TouchableRipple/index.js

@@ -1 +0,0 @@
-export default from './TouchableRipple';

src/components/TouchableRipple/TouchableRipple.android.js

@@ -0,0 +1,61 @@
+/* @flow */
+
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+import {
+  TouchableNativeFeedback,
+  View,
+  Platform,
+} from 'react-native';
+
+type Props = {
+  borderless: boolean;
+  onPress?: ?Function;
+  rippleColor?: string;
+  children?: any;
+  style?: any;
+}
+
+type DefaultProps = {
+  borderless: boolean;
+}
+
+export default class TouchableRipple extends Component<DefaultProps, Props, void> {
+
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    borderless: PropTypes.bool,
+    onPress: PropTypes.func,
+    rippleColor: PropTypes.string,
+    style: View.propTypes.style,
+  };
+
+  static defaultProps = {
+    borderless: false,
+  }
+
+  render() {
+    const {
+      children,
+      onPress,
+      rippleColor,
+      borderless,
+      style,
+     } = this.props;
+
+    return (
+      <TouchableNativeFeedback
+        onPress={onPress}
+        background={Platform.Version >= 21 ?
+          TouchableNativeFeedback.Ripple(rippleColor, borderless) :
+          TouchableNativeFeedback.SelectableBackground()}
+      >
+        <View style={style}>
+          {children}
+        </View>
+      </TouchableNativeFeedback>
+    );
+  }
+}

src/components/TouchableRipple/TouchableRipple.js

@@ -1,4 +1,5 @@
-// @flow
+/* @flow */
+
 import React, {
   Component,
   PropTypes,
@@ -8,15 +9,28 @@ import {
   View,
 } from 'react-native';
 
-export default class TouchableRipple extends Component {
+type Props = {
+  borderless: boolean;
+  onPress?: ?Function;
+  rippleColor?: string;
+  children?: any;
+  style?: any;
+}
+
+type DefaultProps = {
+  borderless: boolean;
+}
+
+export default class TouchableRipple extends Component<DefaultProps, Props, void> {
 
   static propTypes = {
-    children: PropTypes.element.isRequired,
     borderless: PropTypes.bool,
     onPress: PropTypes.func,
     rippleColor: PropTypes.string,
+    children: PropTypes.element.isRequired,
     style: View.propTypes.style,
   };
+
   static defaultProps = {
     borderless: false,
   }
@@ -28,14 +42,15 @@ export default class TouchableRipple extends Component {
       rippleColor,
       style,
      } = this.props;
+
     return (
-        <TouchableHighlight
-          style={style}
-          underlayColor={rippleColor}
-          onPress={onPress}
-        >
-          {children}
-        </TouchableHighlight>
+      <TouchableHighlight
+        style={style}
+        underlayColor={rippleColor}
+        onPress={onPress}
+      >
+        {children}
+      </TouchableHighlight>
     );
   }
 }

src/components/TouchableRipple/index.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+export { default as default } from './TouchableRipple';

src/core/ThemeProvider.js

@@ -0,0 +1,31 @@
+/* @flow */
+
+import {
+  Component,
+  PropTypes,
+  Children,
+} from 'react';
+import DefaultTheme from '../styles/DefaultTheme';
+
+export default class ThemeProvider extends Component {
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    theme: PropTypes.object,
+  };
+
+  static childContextTypes = {
+    theme: PropTypes.object,
+  };
+
+  getChildContext() {
+    return {
+      theme: this.props.theme || DefaultTheme,
+    };
+  }
+
+  render() {
+    return Children.only(this.props.children);
+  }
+}
+

src/styles/DefaultTheme.js

@@ -6,12 +6,8 @@ import {
   pinkA200,
 } from './colors';
 
-const DefaultTheme = () => {
-  return {
-    primaryColor: indigo500,
-    primaryDarkColor: indigo700,
-    accentColor: pinkA200,
-  };
+export default {
+  primaryColor: indigo500,
+  primaryDarkColor: indigo700,
+  accentColor: pinkA200,
 };
-
-export default DefaultTheme;

src/styles/ThemeProvider.js

@@ -1,32 +0,0 @@
-// @flow
-
-import {
-  Component,
-  PropTypes,
-} from 'react';
-import DefaultTheme from './DefaultTheme';
-
-
-class ThemeProvider extends Component {
-
-  static propTypes = {
-    children: PropTypes.element,
-    theme: PropTypes.object,
-  };
-
-  static childContextTypes = {
-    theme: PropTypes.object,
-  };
-
-  getChildContext() {
-    return {
-      theme: this.props.theme || DefaultTheme(),
-    };
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
-
-export default ThemeProvider;

src/styles/colors.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 export const red50 = '#ffebee';
 export const red100 = '#ffcdd2';
 export const red200 = '#ef9a9a';