jaredramirez / college-pantry Goto Github PK

./index.ios.js and ./index.android.js are exactly the same.
Move that code exactly how it is into ./js/index.js(and export the component instead of doing AppRegistry...) then have each index.<platform>.js file look like such.

import React from 'react';
import CollegePantryReact from './js';

AppRegistry.registerComponent('collegePantryReact', () => CollegePantryReact);

Js naming conventions is PascalCase for classes
collegePantryReact should be CollegePantryReact

For the navigator renderScene prop(this is just a trick i've learned, not a standard), instead of having to do

if (route.name === ...) {
  return <... />
}
if (route.name === ...) {
  return <... />
}
...

you could give each component a route field that knows the component and anything else you need.

For example:

export default class Recipie extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={styles.container}>
        <WebView
          source={{uri: this.props.recipie.source_url}}
          startInLoadingState={true}
          renderLoading={() => {return (<ActivityIndicator style={styles.loading} size="small" />)}}
        />
      </View>
    );
  }
}

could instead be

class Recipe extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <WebView
          source={{uri: this.props.recipie.source_url}}
          startInLoadingState={true}
          renderLoading={() => {return (<ActivityIndicator style={styles.loading} size="small" />)}}
        />
      </View>
    );
  }
}

Recipe.route = {
  component: Recipe,
  type: 'page',
  someOther: 'example data that might be useful'
};

export default Recipe;

You could do that for all top level components(components that are routes)

then on your navigator do initialRoute={SearchRecipe.route} instead of initialRoute={{ name: 'SearchRecipe', type: 'page' }}

and when you navigate do something like navigator.push(Recipe.route) instead of navigator.push({name: 'Recipe', ...})

and where you save big is in the renderScene method. All you'd need to do now is...

renderScene(route, navigator) {
  const RouteComponent = route.component;

  return <RouteComponent navigator={navigator} {...route.props} {...route.passProps}/>;
}

That's the way the current project I'm working on was set up before I came on. On the Laughly project I made I set up the routing in a way thats sort of a mixture of that way and yours. I had a routeMap that the navigator has access to and then I pull the component from the map instead of having to import the route for each scene in every file you want to navigate in. That looks a little like

const routeMap = {
  recipe: { component: Recipe, type: 'page', ...blah blah some useful data  },
  anotherRoute: {...},
  ...
};

then to navigate there this.props.navigator.push({name: 'recipe', otherStuffYouMayNeed: ...})
and then....

renderScene(route, navigator) {
  const RouteComponent = routeMap[route.name];

  return <RouteComponent navigator={navigator} {...route.props} {...route.passProps}/>;
}

Other than that it's just stuff like abstracting data fetching logic out of the actual view components and having that in its own area like ./js/api or ./js/services that you then import into the view files. Thats just organization stuff. Generally_(somewhat of an opinion here)_ the smaller the files the better it is.