Worried about reducing boilerplate code? Check this cool react native quick starter kit — It won’t disappoint you.
Most professional web developers have created a collection of assets and snippets of code that they reuse on projects to accelerate development. All websites share one common feature — some universally accepted software development patterns. Rather than continuously rebuild these from scratch, most developers start by copying the code they used for a similar project and then start modifying it.
As Joachim Pense clearly states, boilerplate is something that you copy and paste and just add to a document.
Technology companies these days build their own boilerplate code as a basis of their software development methodology which they use in various projects across the company.
In computer programming, boilerplate code or boilerplate refers to sections of code that have to be included in many places with little or no alteration.
For example, in web development, simple boilerplate for HTML would look like this:
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js>
</script></body>
</html>
Our solution is a super cool react native quick starter kit which includes redux, airbnb RN-map, shoutem ui toolkit and few other useful libraries.This is a quick starter for react native with useful libraries. It includes templates for following libraries:
- Airbnb react-native-map
- React navigation (http://reactnavigation.org)
- react-redux (http://redux.js.org/docs/introduction/)
- shoutem-ui toolkit (http://shoutem.github.io/docs/ui-toolkit/introduction)
- vector icons (https://github.com/oblador/react-native-vector-icons)
- node/express api server
- Login with facebook (https://developers.facebook.com/docs/react-native/login)
The starter is mainly tested on Android, but it should work fine on ios also (please raise an issue if you find any problem on ios).
Installation
- The pre requisite to make this template useful is setting up android / ios sdk with corresponding tools. You can use android-studio with sdk-manager to download required build tools.
2. The next thing you require is installing react-native-cli:
npm install -g react-native-cli3. After this we clone the repository and install the dependencies:
> git clone https://github.com/Eyezon/react-native-map-shoutem-boiler-plate.git> yarn install
Usage
I. react-native-maps
In order to use react-native-maps you have to add a valid Google Map API key in your AndroidManifest.xml file (location: [project-root]/android/app/src/). Please refer to the following line in that file.
<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/>We need to replace ‘YOUR_API_KEY’ with a valid google maps API key.
II. Login with Facebook
In order to use login with Facebook you have to add a valid facebook app id in your strings.xml file (location: [project-root]/android/app/src/main/res/values). Please refer to the following line in that file.
`FanLikeYou YOUR_FB_APP_ID`Replace ‘YOUR_FB_APP_ID’ with a valid facebook app ID. Make sure your facebook app is configured correctly, otherwise login with facebook feature will not work.
Open a shell prompt and run the api server by entering the following command.
node server/server.jsFinally, build and run the project either on emulator or on a physical device through USB debugging.
react-native run-androidAfter the build is finished, run the following command to setup development server.
react-native startAny time we write similar-looking code over and over, that’s considered boilerplate.
A key principle of programming that we all learn is Don’t Repeat Yourself (DRY). That’s the entire point of programming: To automate a task that we keep repeating manually. Who wants to manually sort text files each morning when we could have a program do it for us faster and more reliably? Similarly, why should we keep writing some code pattern over and over when we should be able to abstract it away into some terser syntax?
