Some people get stuck in building the perfect app. They work on an app for years, obsessing over every little detail, planning for every feature. Others...others get sh*t done.

Did someone say... App Store?!

In this series we'll look at a series of dumb apps that you can find on the App Store. Despite the tongue-in-cheek nature of this article, everyone should have a healthy respect for any app that makes it to the App Store. Hopefully this article inspires you to go out and write your own app, no matter how dumb it is. (And to use one of the smartest technologies, React Native!)

Dumb App #3: LookFor

https://itunes.apple.com/us/app/lookfor-find-friends-instantly/id945335809?mt=8

Self-proclaimed "world's dumbest app", this app just helps you find your friends by making your screen a giant flashing light. Let's go ahead and program it. We'll assume you have Expo installed. Expo is a great way to bootstrap React Native applications, and if you haven't tried it yet be sure to check it out.

Step 1: Green Screen of Death

expo init 

Choose the "blank" template to start a plain new project. Open up the file App.js, and scroll down to the bottom and you'll see a line that looks like this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Change the line that says backgroundColor - instead of #fff, change that to rgb(40,197,101). You should now see a beautiful green screen. Congratulations, you've built most of the application!

Step 2: Color Selection

Let's add one more feature: the ability to choose your color, as shown by the screenshots on the iTunes page.

We'll have to add something to store our current state, so add a new constructor:

constructor(props) {
    super(props);
    this.state = {
      color: null
    }
  }

Now, in our render function, we'll just check if this.state.color is set, and render one of two components - either our ColorScreen, or our ColorPicker.

  render() {
    return this.state.color ?
      <ColorScreen color={this.state.color} /> :
      <ColorPicker setColor={(c) => this.setState({ color: c })} />
  }

Now we just need to define these components. We can just throw this in the same file, and they can be simple functional components.  The first, ColorScreen, is just what we had before, with an additional prop for color:

const ColorScreen = ({color}) => (
   <View style={[styles.container, {backgroundColor: color}]}/>
)

Our ColorPicker is a little more complicated, but not very:

const ColorPicker = ({setColor}) => (
  <View style={styles.colorPicker}>
      { [green, blue, purple, yellow, orange, red].map(c => 
        <TouchableOpacity key={c} 
          style={{flex: 1, backgroundColor: c}} 
          onPress={() => setColor(c)}
        />
      )}  
  </View> 
)

The flex: 1 takes care of the elements filling to the available space. Now all that's missing are the colors:

const green = 'rgb(100, 200, 121)';
const blue =  'rgb(80, 151, 213)';
const purple = 'rgb(145, 94, 176)';
const yellow = 'rgb(234, 196, 69)';
const orange = 'rgb(197, 91, 37)';
const red = 'rgb(188, 63, 49)';

And the one stray style, colorPicker. This belongs at the bottom:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  colorPicker: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'stretch'
  }
});

And boom. We have now created a dumb version of the the world's dumbest app.

Congratulations. In just a few lines of code, you've built an app that is good enough to have raised $1,526 on Kickstarter. React Native is truly awesome. Stay tuned to our CoderSchool Blog for walkthroughs of how to build even dumber apps! If you're interested in building apps, either smart or dumb, be sure to check out the courses at our school of Mobile Apps: www.coderschool.vn/en/schools/mobile-apps.

The full source code for this app is available here: https://github.com/coderschool/DumbReactNativeApps.