Initial commit

Author: auser

android/app/build.gradle

@@ -126,6 +126,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-firestack')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/firestackapp/MainApplication.java

@@ -4,6 +4,7 @@
 import android.util.Log;
 
 import com.facebook.react.ReactApplication;
+import io.fullstack.firestack.FirestackPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -23,7 +24,8 @@ protected boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+            new FirestackPackage(getApplicationContext())
       );
     }
   };

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
+
     <string name="app_name">FirestackApp</string>
 </resources>

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'FirestackApp'
 
 include ':app'
+include ':react-native-firestack'
+project(':react-native-firestack').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firestack/android')

app/app.js

@@ -1,63 +1,20 @@
-import React, { Component } from 'react';
-import {
-  Text,
-  View,
-  NavigationExperimental
-} from 'react-native';
+'use strict';
 
-const {
-  CardStack: NavigationCardStack,
-  Header: NavigationHeader,
-} = NavigationExperimental;
+import React from 'react'
+import { AppRegistry, Text, View } from 'react-native';
+import App from './containers/App';
 
+import {Provider} from 'react-redux';
+import {configureStore} from './redux/configureStore';
 
-import ExampleList from './views/ExampleList'
+const {firestack, store, actions} = configureStore();
 
-import styles from './styles/app';
-
-export class FirestackApp extends Component {
-  render() {
-    return (
-      <NavigationCardStack
-        navigationState={this.state.stack}
-        style={styles.container}
-        renderHeader={this._renderHeader}
-        renderScene={this._renderScene}
-        onNavigateBack={this._handleBack}
-      />
-    );
-  }
-
-  _renderHeader(props: NavigationSceneRendererProps): ReactElement<any> {
-    return (
-      <NavigationHeader
-        {...props}
-        onNavigateBack={this._handleBack}
-        renderTitleComponent={this._renderTitleComponent}
-      />
-    );
-  }
-
-  _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement<any> {
-    return (
-      <NavigationHeader.Title>
-        Firestack Example App
-      </NavigationHeader.Title>
-    );
-  }
-
-  _renderScene(props: NavigationSceneRendererProps): ?ReactElement<any> {
-    const state = props.scene.route;
-    if (state.key === 'AppList') {
-      return (
-        <ExampleList
-          onNavigate={this._handleAction}
-          list={UIExplorerList}
-          style={styles.exampleContainer}
-          {...state}
-        />
-      );
-    }
+const wrapper = (props) => {
+  return (
+    <Provider store={store}>
+      <App actions={actions} firestack={firestack} />
+    </Provider>
+  )
 }
 
-export default FirestackApp
+export default wrapper;

app/components/Navigation/Header.js

@@ -0,0 +1,37 @@
+import React, { PropTypes as T } from 'react'
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  NavigationExperimental
+} from 'react-native'
+
+const {
+  Header: NavigationHeader
+} = NavigationExperimental;
+
+import colors from '../../styles/colors'
+
+export class Header extends React.Component {
+  render() {
+    return (
+      <NavigationHeader
+        {...this.props}
+        style={styles.header}
+        onNavigateBack={this._onBack.bind(this)} />
+      )
+  }
+
+  _onBack() {
+    // on back
+  }
+}
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: colors.white
+  }
+})
+
+export default Header;

app/components/Navigation/Navigator.js

@@ -0,0 +1,143 @@
+import React, { PropTypes as T } from 'react'
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  NavigationExperimental,
+  Easing,
+  Dimensions
+} from 'react-native'
+
+const {
+  Header: NavigationHeader,
+  Transitioner: NavigationTransitioner,
+  CardStack: NavigationCardStack
+} = NavigationExperimental;
+
+const { width, height } = Dimensions.get('window');
+
+import routes from '../../routes';
+import appStyles from '../../styles/app'
+import Header from './Header'
+
+export class FirestackNavigator extends React.Component {
+  static propTypes: {
+    navigationState: NavigationPropTypes.navigationState.isRequired,
+    navigate: PropTypes.func.isRequired,
+  };
+
+  _render(props) {
+    const {scene} = props;
+    return (
+      <View style={appStyles.container} key={scene.key}>
+        {this._renderHeader(props)}
+        {props.scenes
+              .map(scene => this._renderScene({ ...props, scene }))}
+      </View>
+    );
+  }
+
+  _renderScene(sceneProps) {
+    const {scene} = sceneProps;
+    const {route} = scene;
+    const definedRoute = this._lookupRoute(route);
+
+    let Component = definedRoute.Component;
+    if (!Component) {
+      Component = (
+        <View style={styles.scene} key={sceneProps.scene.key}>
+          <Text>Render scene</Text>
+        </View>
+      )
+    }
+
+    return React.createElement(Component, {
+      ...this.props,
+      ...sceneProps,
+      key: scene.key,
+      route: definedRoute
+    });
+  }
+
+  _renderHeader(sceneProps) {
+    const {actions, navigationState} = this.props;
+    const {scene} = sceneProps;
+    let route = this._lookupRoute(scene.route);
+
+    if (!route.noHeader) {
+      // Route not implemented yet, use a default header
+      if (!route.Component && navigationState.index > 0) {
+        const title = route.key
+        route = Object.assign({}, routes.default, {title, actions});
+      }
+
+      route.actions = actions
+      const {headerStyle} = route;
+      let headerProps = Object.assign({}, sceneProps, {
+        route,
+        style: headerStyle || {}
+      });
+
+      const {title, titleComponent} = route;
+      if (title || titleComponent) {
+        headerProps.renderTitleComponent = (props) => {
+          return titleComponent ?
+                  titleComponent({...props, actions}) : (<NavigationHeader.Title>{title}</NavigationHeader.Title>);
+        }
+      }
+
+      const {leftComponent, rightComponent} = route;
+      headerProps.renderLeftComponent = leftComponent ?
+          leftComponent.bind(null, actions) : () => (<View />)
+      headerProps.renderRightComponent = rightComponent ?
+          rightComponent.bind(null, actions) : () => (<View />)
+
+      return (<Header {...headerProps} />)
+    }
+  }
+
+  _lookupRoute(routeObject) {
+    const key = routeObject.key || 'default';
+    return routes[key];
+  }
+
+  _configureTransition() {
+    const easing = Easing.inOut(Easing.ease);
+    return {easing, duration: 200}
+  }
+
+  render() {
+    const {navigationState} = this.props;
+    return (
+      <NavigationTransitioner
+        navigationState={navigationState}
+        render={(transitionProps) => this._render(transitionProps)}
+        configureTransition={this._configureTransition}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+  },
+  scene: {
+    backgroundColor: '#E9E9EF',
+    bottom: 0,
+    flex: 1,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    shadowColor: 'black',
+    shadowOffset: {width: 0, height: 0},
+    shadowOpacity: 0.4,
+    shadowRadius: 10,
+    top: 0,
+  },
+  scrollView: {
+    flex: 1,
+  },
+})
+
+export default FirestackNavigator

app/containers/App.js

@@ -0,0 +1,40 @@
+import React, { PropTypes as T } from 'react';
+import {connect} from 'react-redux';
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  NavigationExperimental
+} from 'react-native'
+
+import FirestackNavigator from '../components/Navigation/Navigator'
+
+export class App extends React.Component {
+
+  _navigate({type}) {
+    console.log('_navigate called with type', type);
+  }
+
+  render() {
+    const {navigationState} = this.props;
+    return (
+      <FirestackNavigator
+        {...this.props}
+        navigationState={navigationState}
+        navigate={this._navigate.bind(this)} />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
+export default connect(state => {
+  return {
+    navigationState: state.navigation
+  }
+})(App);

app/redux/configureStore.js

@@ -0,0 +1,37 @@
+import { applyMiddleware, combineReducers, createStore } from 'redux'
+import { bindActionCreators } from 'redux'
+import thunk from 'redux-thunk'
+
+import Firestack from 'react-native-firestack'
+import env from '../../config/environment'
+
+import * as currentUser from './modules/currentUser'
+import * as navigation from './modules/navigation'
+
+export const configureStore = (initialState = {}) => {
+  const middleware = applyMiddleware(thunk);
+
+  const firestack = new Firestack(env.firestack)
+
+  const rootReducer = combineReducers({
+    user: currentUser.reducer,
+    navigation: navigation.reducer,
+    firestack: (state) => firestack
+  });
+
+  const store = createStore(
+    rootReducer,
+    initialState,
+    middleware);
+
+  firestack.setStore(store);
+
+  const dispatch = store.dispatch;
+  const actions = {
+    currentUser: bindActionCreators(currentUser.actions, dispatch)
+  }
+
+  return {store,actions}
+}
+
+export default configureStore

app/redux/modules/currentUser.js

@@ -0,0 +1,9 @@
+export const CONSTANTS = {
+}
+
+export const reducer = (state = {}, action) => {
+  return state;
+}
+
+export const actions = {
+}

app/redux/modules/firestack.js

@@ -0,0 +1,9 @@
+export const CONSTANTS = {
+}
+
+export const reducer = (state = {}, action) => {
+  return state;
+}
+
+export const actions = {
+}