Creating an IOS app in 100 lines or Less?

My thoughts on using React Native for app development

Do you think it is possible to create a IOS app in 100 lines? Maybe? I decided to write this blog after one of my clients tasked me with creating a IOS app for their startup. They wanted me to consider using React Native because they heard it was a more efficient transition to the android platform.

I had never heard of this language but my initial judgment was if my non — technical clients recommended it then maybe this was some sort of WordPress like tool for apps. And I try to steer myself away from those tools because I believe you lose your in-depth knowledge of certain programming languages when you let tools do majority of the programming for you.

So as I decided to create a sample IOS app using React Native I noticed that I was writing less code.

What is React Native?

React Native is a framework for building native IOS and Android applications. It allows a developer to create apps using JavaScript and React. This framework was publicly released in March 2015 by Facebook. I definitely understand why a startup would be interested in this concept because it will cut down on the cost of having to maintain 2 different code bases. It could potentially require a company to invest in one react native team rather than an IOS (Objective C) team and Android (Java) team.

What will it take to set up the development environment?

Compared downloading and installing the XCode and Android Studio, setting up the React Native environment was quick and easy because a lot of the dependency where already installed onto my machine. All I had to do was download and install the following:

  • Watchmen - a tool that listens for file changes and manages them,
  • Node Version Manager (NVM) — a tool for managing different NodeJS versions,
  • React Native Environment.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

Tip: The install.sh file may not properly update your environment variables so I recommend manually updating your bash profile.

sudo vi /etc/bashrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Once the bash profile has been updated, then from the command line continue with installing watchman and react native.

nvm install node && nvm alias default node
brew install watchman
npm install -g react-native-cli

To better understand development, I used the “AwesomeProject”. The “AwesomeProject” is a basic application that is provided by the React Native getting started instructions. The application displays a few text labels and supports IOS and Android platforms. I used the project to get familiar with making changes and viewing updates in the simulator. Once I was familiar with the environment I began building the SignInProject.

Here is how I renamed a project in react native:

react-native init AwesomeProject
mv AwesomeProject SignInProject
cd SignInProject

I changed the class name found in the index.ios.js file to “SignInProject”.

class SignInProject extends Component {

I changed the AppRegistry component found in the index.ios.js file to “SignInProject”

AppRegistry.registerComponent(‘SignInProject’, () => SignInProject);

Then from the command line I executed the following commands to update the native files with the correct name, then you have to restart the server so it can pick up the new name. Once the server has restarted, then run react native for IOS. This will build the project and run the code for the IOS platform on a iPhone simulator.

vi package.json  << change the app name >>
vi android/app/src/main/res/values/strings.xml <<change app change>>
react-native upgrade
ps aux | grep react
kill <<processes found>>
npm start
react-native run-ios

How long will it take to build a code sample?

While building my sample project called SignInProject, I noticed that React Native requires less code and I only needed to modify one file called index.ios.js. I did not have to create a StoryBoard, header file (.h) and method file (.m). The index.ios.js file has 3 parts: a imports section for importing components, class section for rendering the view and function calls, and finally the css styles section for styling the view. This sample project took less than 100 SLOC.

/**
* SignInProject class renders the IOS View.
*/
class SignInProject extends Component {
   render() {
      return (
         <ScrollView
             keyboardShouldPersistTaps = {false} 
             contentContainerStyle = {styles.container} >
             <Text style={styles.welcome}>
                     Welcome to React IOS Sign In!
             </Text>
             <TextInput
                 style={styles.textFields}
                 placeholder=’Enter Email’
                 keyboardType=’email-address’ />
            <TextInput
                style={styles.textFields}
                placeholder=’Enter Password’
                secureTextEntry={true} />
            <TouchableHighlight style={styles.button} >
                <Text style={styles.buttonText}>Sign In</Text>
            </TouchableHighlight>
          </ScrollView>
       );
   }
}
Basic Sign In Screen using React Native

Conclusion

I like what React Native is trying to accomplish and I am happy that my clients introduced me to it. I will be using it more to offer my clients quicker alternative to app development but I am not sure it can handle complex applications. It seems to process user input slower than a truly native environment. As a hard-core software engineer, I don’t want to rely solely on this environment because I don’t want to lose my understanding of Objective C or Java. All code is available for download from GitHub. This blog is part one of a multi-series, part two of the blog will allow the react-native app communicate with nodeJS/Javascript RESTFul services.

About Tiffany Ricks

I have been a software engineer for 10 years. I am a part-time freelance engineer as well as full time Software Engineering Manager. Over these years I have built enterprise applications for fortune 500 companies. I have worked with many startups to solve their problems with technology. For more information about me visit www.tiffanyricks.com.