Getting Started with React Native

Brew Update

$brew update
$brew install node
$brew install watchman
$brew install yarn

$npm install -g react-native-cli

Init Project

$react-native init MyProject

$cd MyProject

$react-native run-ios

This will open up the Simulator but you can always open up Xcode manually

and show some fancy terminal window saying running on part 8081 blaa blaa 

Native means Xcode

$cd ios

$open MyProject.xcodeproj

Run the project and you might see following all over the debugger window !!!

 __nw_connection_get_connected_socket_block_invoke 50 Connection has no connected handler

1. Xcode menu -> Product -> Edit Scheme...
2. Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
3. Run your again

If every thing goes well you can run the project which shows the following screen.

Hello World!

"Welcome to React Native!" ... Seriously ? 

Some thing is very wrong about this window where is "Hello World!"

If you open the project folder you will see the following folder structure - 

You can open the index.ios.js file on any text editor of your choice, but as we are making a native app lets open it in Xcode itself ! 

Drag and drop the file in Currently open Xcode project but make sure you uncheck both 

 - Copy Items if needed  &

-  Add to target

Now open the file and navigate to line sweet 16 ! 

render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>

            Hello World!

        </Text>

        <Text style={styles.instructions}>

          To get started, edit index.ios.js

        </Text>

        <Text style={styles.instructions}>

          Press Cmd+R to reload,{'\n'}

          Cmd+D or shake for dev menu

        </Text>

      </View>

    );

  }

Just replace the Line 20 with Hello World!

Now you do NOT need to hit "Cmd+R" on Xcode, just open the Simulator and hit "Cmd+R"

and with just small flicker for microsecond what you see is new content ! 

WoW !!! Thats the beauty of React Native - No compiling of code just reloading the view.

Note - don’t close the Terminal window; just keep it running in the background. If you do close it by mistake, simply stop and re-run the project via Xcode.

Links - 

https://github.com/facebook/react-native

https://facebook.github.io/react-native/docs/getting-started.html

https://facebook.github.io/react-native/

https://github.com/facebook/react-native/issues/10027

http://stackoverflow.com/questions/41311039/react-native-build-warning-issue

https://www.raywenderlich.com/126063/react-native-tutorial

Network Router and Request in Swift 3 using Alamofire and SwiftyJSON

Alamofire and SwiftyJSON are the ultimate framework of choice when it comes to Native Swift application development. But there is one small issue we need to manually bridge this two framework manually to get the final output. Hence here is the ultimate guide for how to make Network Request in Swift using Alamofire and get the response as SwiftyJSON using a Router Path.

1. URL Request

We have to first create - enum of a URLRequestConvertible

	enum ActivitieRouter: URLRequestConvertible {
	case activitiesIndex // Activities Index
	case createActivities(param: Parameters) // Create Activities
	case updateActivity(activityID: Int, param: Parameters) // Update Activity
	case destoryActivity(activityID: Int) // Destroy Activity
	}

On each of the request we need to define the http Method 

	var method: HTTPMethod {
	switch self {
	case .activitiesIndex:
	return .get
	case .activityDate:
	return .get
	case .getActivity:
	return .get
	case .createActivities:
	return .post
	case .updateActivity:
	return .put
	case .destoryActivity:
	return .delete
	}
	}

each Request can have a sub path like -

	var path: String {
	let subPath = "activities"
	switch self {
	case .activitiesIndex:
	return subPath
	case .updateActivity(let activityID, _):
	return subPath + "?" + "\(activityID)"
	case .destoryActivity(let activityID):
	return subPath + "?" + "\(activityID)"
	}
	}

Finally the most important for a Protocol is a asURLRequest function which returns the URLRequest

	func asURLRequest() throws -> URLRequest {
	var urlRequest = NetworkManager.getTokenRequest(path)
	urlRequest.httpMethod = method.rawValue
	switch self {
	case .createActivities(let parameters):
	urlRequest = try URLEncoding.default.encode(urlRequest, with: parameters)
	case .updateActivity(_, let parameters):
	urlRequest = try URLEncoding.default.encode(urlRequest, with: parameters)
	default:
	break
	}
	return urlRequest
	}

Refer - Gist - https://gist.github.com/bishalg/4d554cd79a138c43c00c17cebf6eb3d3

2. Response Serializable

Now task is to use extend the DataRequest so that we can response back SwiftyJSON object from our network request.

Refer - Gist -  https://gist.github.com/bishalg/0561c81f921858725731f2c36819e99c

3. Network Request

Finally with our Response Serializer and Network Router ready we can finally make our Network Request. 

	static func mostRecent(
	onSuccess: ObjectsCallBack? = nil,
	onError: ErrorCallback? = nil) {
	let route = ActivitieRouter.activityDate(activitiesDate: ActivitiesDate.recentMonth)
	let _ = Alamofire.request(route)
	.responseSwiftyJSON { request, response, json, error in
	guard error == nil else { return }
	// create - objects array or object
	// return - objects
	onSuccess?(objects)
	}
	}

Thats is it ! Out Networkig code is complete ! 

But you may have noticed that there is one class NetworkManager which is not present ! But that is upto you to manage as per project basic which can be generalized code for say like base url etc.

Refer Gist - https://gist.github.com/bishalg/ffaf0d90bd0e9d05f4db0285b2e5418a

Links - 

https://github.com/SwiftyJSON/SwiftyJSON

https://github.com/Alamofire/Alamofire

https://gist.github.com/bishalg/4d554cd79a138c43c00c17cebf6eb3d3
https://gist.github.com/bishalg/0561c81f921858725731f2c36819e99c
https://gist.github.com/bishalg/ffaf0d90bd0e9d05f4db0285b2e5418a