18 October 2018React NativeTutorial

Dumbest Apps Ever - and How to Build Them in React Native

Charles Lee
Co-Founder & CEO


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.

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, you'll learn React in our Full Stack Web Development course.

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