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

RK03 - ResearchKit "Hello World" with Instruction Step

"Hello World" with Instruction Step

No software can go forward without a simple "Hello World" application.
If we break this rule, the Gods of "Programming for Dummies" will crush us !
So without any further due lets do some coding !!!

https://gist.github.com/bishalg/c5268460b81344451e44


// 1

   @IBOutlet weak var gettingStartedButton: UIButton!   

// 2

    @IBAction func gettingStartedAction(sender: UIButton) {        self.sayHellowToTheWorld()    }        func sayHellowToTheWorld() {        // Make Steps         let step1 = ORKInstructionStep(identifier: "step1")        step1.title = "Hello World!"                let step2 = ORKInstructionStep(identifier: "step2")        step2.title = "That is it ! :] Thanks"        

                 // Make a Ordered Task of steps

        let task = ORKOrderedTask(identifier: "ourFirstTask", steps: [step1, step2])

                  // Present the ViewController of hence made Task !

        let taskVC = ORKTaskViewController(task: task, taskRunUUID: nil)        taskVC.delegate = self        presentViewController(taskVC, animated: true, completion: nil)    }

// 3

extension HomeVC: ORKTaskViewControllerDelegate {

   func taskViewController(taskViewController: ORKTaskViewController, didFinishWithReason reason: ORKTaskViewControllerFinishReason, error: NSError?) {        self.dismissViewControllerAnimated(true, completion: nil)        let buttonTitle: String?        switch reason {        case .Completed:            buttonTitle = "Completed"        case .Discarded:            buttonTitle = "Discarded"        case .Failed:            buttonTitle = "Failed"        case .Saved:            buttonTitle = "Saved"        }
        gettingStartedButton.setTitle(buttonTitle, forState: .Normal)    }

} 

// 1 - Getting Started -
In our VC we have a button which will start a ResearchKit survey and will change based on our action

// 2 - Action on button will start the survey

If we do "Next" and "Done" after  we started from "Getting Started" button it would present us a Task-ViewController which will make a delegate at the end of it step.

// 3
// Extend out View Controller so that it handles the Delegate of TaskVC
// Once the task is completed we will update our button to reflect the result !
// And finally its our responsibility to dismiss the VC we presented.

Here is one of the expected flow -

1. Home Screen


2. Research Kit - TaskVC presented with "Hello World" Instruction Step ( ORKInstructionStep )



3. Second Instruction Step with "DONE" button - 2/ 2



Finally if we will get any one of the following result ( ORKTaskViewControllerFinishReason ) -
In this case we will have either Completed or Discarded result.