Blogs

Exercism.io

Recently I rediscovered a coding exercise app. Exercism. It’s a CLI tool that downloads one exercise at a time. It has exercise for over 30 programming languages. Each problem typically contains a README file and a test file like below README.md exercise.spec.js For ES6 or ECMAScript will have the language specific files package.json gulpfile.js Once you’ve completed the coding exercise, you can run the test and makes sure all the tests passed.

Continue reading

Icon and launch image for React Native

I recently had to put icons and launch (splash) screen image into my React Native app and was looking for a good tool do it. After trying out many tools either on the web or scripted apps, I found Ionic to give me to easiest solution. Here is the page that explains how it works. So to do this. You’ll need to install Ionic. npm install -g cordova ionic Then create a dummy ionic project ionic start myApp tabs Add both android and ios platform ionic platform add ios ionic platform add android Then you can put your icon and splashscreen image into the resources folder then run ionic resources and Ionic will generate all the images you need.

Continue reading

otello

Source available on Github

Continue reading

Relay with drawer

Relay is a good technology to use in combination with GraphQL for React Native. However, because of the way it is implemented, it is very difficult to use. One of the main problem with Relay is the use of Babel Relay Plugin. This plugin is necessary for Relay to be able to convert Relay.QL statement into pure JS. I was having the hardest time trying to get Relay working with React Native Drawer because of this plugin.

Continue reading

Replacing Redux with MobX as state management

MobX is a simple yet powerful state management framework. I’ve created a project template on how to use it in React Native. This will allow anyone with an interest of using MobX with React Native a good starting point. The most interesting point with MobX is the ability to define simple model and have the framework observing for changes. For example, a counter with simple increment and decrement. class Counter{ @observable count = 0; id = Math.random() increase(){ this.count++; } decrease(){ this.count--; } } Or one could have an array of counters as below and allow to add or remove counters class CounterArray { @observable counterArray = []; addCounter(){ this.counterArray.push(new Counter()) } deleteCounter(i){ this.counterArray.splice(i, 1) } } Then one can easily put them all in a single master store that can be accessed by the rest of the application let store = { counter: new Counter(), counterArray: new CounterArray() } Accessing it from a React.Component render () { let counter = this.props.store.counter return ( <View style={styles.container}> <Text>Counter Value: {counter.count}</Text> <Button onPress={counter.increase}> +</Button> <Button onPress={counter.decrease}> -</Button> </View> ) } Available here, rn-mobx-template I’ve also build an Reversi game using this template.

Continue reading