State management in React Native Part-2

Context can only store a single value, not an indefinite set of values each with its own consumers. 

In order to solve this problem, we needed a way to provide a global state that all components, regardless of how deeply nested they are, could access. React Hooks and Redux are ways to manage state in a React app.

In Previous blog we've got mentioned about Context API, now will see in information about the Redux.

Redux:

The Redux describes it as a predictable state container for JavaScript applications that helps us to write programs that behave constantly, run in several depths and widths of elements, and are easy to check.

Redux is a state control library used to store and manage the state of a react software in a centralized position. Redux abstracts all states from the app into one globalized state object in order that any component and any a part of the app can get access to the different properties of the global state. Redux is separate from React and there are libraries to combine Redux into React apps.

State management in React Native Part-1

It is best to use React's built-in state management capabilities rather than external global state for smaller Apps, but default React state has certain limitations: Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render.

Context api with React Hooks

The React Context API is React’s approach of managing state in more than one elements that are not directly connected. You can create your individual custom hooks to avoid repetition and make code cleaner. Context supplies a way to pass data in the course of the component tree without having to pass props down manually at every level. Custom hooks are customary JavaScript functions which is able to use different React hooks.

Without Hooks, the Context API may no longer seem like much when compared to Redux, however mixed with the useReducer Hook, we have now an answer that finally solves the state management drawback.

Custom hooks resolve the problem of fending off repetition and make code cleaner. Context supplies a strategy to move information in the course of the component tree with no need to go props down manually at each and every stage.

Call a function of Controller "One" inside Controller "Two" - IONIC1

app.controller('One', ['$scope', '$rootScope'
    function($scope) {
        $rootScope.$on("CallParentMethod", function(){
           $scope.parentmethod();
        });

        $scope.parentmethod = function() {
            // task
        }
    }
]);
app.controller('two', ['$scope', '$rootScope'
    function($scope) {
        $scope.childmethod = function() {
            $rootScope.$emit("CallParentMethod", {});
        }
    }
]);




While $rootScope.$emit is called, you can send any data as second parameter.

Solution for IONIC2+  will be up soon.

Whatsapp message from hybrid app

There are two different ways to open whatsapp form hybrid application.

<a target="_blank" href="whatsapp://send?text=hello">open whatsapp</a>



<a target="_blank" href="whatsapp://send?text=my message&phone=+XXXXXXXXXXXX&abid=+XXXXXXXXXXXX">Whatsapp me please</a>

Angular/Ionic not updating an image src when ng-src is empty

The Angular ngSrc directive serves to properly set an image src via Angular. As anything in Angular, it updates the image as soon as the contained Angular expression changes. However, when the ng-src attribute is empty, Angular will not empty the src attribute. To overcome this, use the trick below.

<img ng-src="{{ element.image || '//:0' }}" />

Background

The ngSrc directive explicitly returns when the attribute value is false. As a workaround, set a "blank" image src when the image is empty. As somebody on Stackoverflow writes, //:0 serves this purpose: It adopts the current protocol, omits the hostname and sets the port to zero, which is invalid and should be killed by the network layer.

As a result, Angular should now correctly empty the src attribute when ng-src empties.

IONIC - data binding on header title not working

By using the new ion-nav-title directive in Ionic beta 14, the binding seems to work correctly.

Rather than

<ion-view title="{{content.title}}">

Do this

<ion-view> <ion-nav-title>{{content.title}}</ion-nav-title>

Works a treat.

Self Signed SSL Certificates in PhoneGap

Code to allow self signed certs on PhoneGap 

Android:

• If you are doing development: android:debuggable="true" in the manifest, you should allow the browser to request data from servers with a self-signed or bad SSL cert 
• If you are releasing an application, you should remove the android:debuggable="true" (Android Market won't let you release with this on anyway) and you will NOT be able to send data to a server with a bad SSL cert 
• If you don't have this flag set, the default will be what the default is now, which is that you won't be able to send data to servers with a self-signed cert 

iOS: 

Just Add below code at the end of you AppDelegate.m file

@implementation NSURLRequest(DataController)
+ (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host
{
    return YES; 
}
@end

error JSON.stringify()ing argument: RangeError: Invalid Date

There is minor bug in contact plugin in cordova ionic. contact list is loaded with error due to the birthdate field in contact card. Its bad practice to keep minor error in execution of code, It may effect to different OS versions.

error JSON.stringify()ing argument: RangeError: Invalid Date

Cordova Plugin: cordova-plugin-contacts
Verison: 2.1.0 "Contacts"

Open convertUtils.js file  

File Path: plugins/cordova-plugin-contacts/www/convertUtils.js

Find function "toCordovaFormat" and remove below try-catch code.

 try {
         contact.birthday = new Date(parseFloat(value));
} catch (exception){
          console.log("Cordova Contact toCordovaFormat error: exception creating date.");
}

add below code instead of try-catch

if (value !== null) {

        try {

                contact.birthday = new Date(parseFloat(value));

               

                //we might get 'Invalid Date' which does not throw an error

                //and is an instance of Date.

                if (isNaN(contact.birthday.getTime())) {

                       contact.birthday = null;

               }

               

        } catch (exception){

                console.log("Cordova Contact toCordovaFormat error: exception creating date.");

        }

}

Check below screenshot for better understand.

iOS contact card does not have value for "displayName". "displayName" is used for the android devices. So For iOS device, use "name.formatted" instead of "displayName".

Cheers.... Keep Coding... :)

PhoneGap: Detect File Loaded from Phonegap or Not

/** * Determine whether the file loaded from PhoneGap or not */

 function isPhoneGap() { 

     return (cordova || PhoneGap || phonegap) 

     && /^file:\/{3}[^\/]/i.test(window.location.href) 

     && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent); 

}

 if ( isPhoneGap() ) { 

     alert("Running on PhoneGap!"); 

} else { 

     alert("Not running on PhoneGap!"); 

}

Hybrid vs Native mobile apps

This is an interesting question.

Few years ago, now late Steve Jobs proclaimed that HTML5 is the future of web development. Ok this needs to be viewed in a broader context, at that point in time Apple was waging a war against Flash and HTML 5 was a unlucky winner.

Steve Jobs quote:

They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5.

Get File Last Modified Date-Time

<?php

$filename = 'somefile.txt';

if (file_exists($filename)) {

    echo "$filename was last modified: " . date ("F d Y H:i:s.", filemtime($filename));

}

?>

this file modify date is used for the mobile application to get updates are available or not on the server file.

Get County from User Lat Long

In Mobile application how the server knows about the posted device country and response then as per the location.

Get the current location of the device and use google map api to get user location. Get location from the ipaddress is a worth thing now. because all the internet user use proxy network.

PHP:

<?php

$cur_lat =$_REQUEST['lat'];
$cur_lon = $_REQUEST['lon'];

Stop Copy Text from Phonegap Applications

Hello,

Phonegap application is based on the HTML, CSS and JQuery. So if the user double tap on the app content then it will select the text and give option to copy and select text.

So for the application privacy if app admin does not want to copy application text then here is a way to stop selection of text.

Get Distance Between Two Lat Long

Create function to calculate distance. and pass lat long of first place and second place. and one parameter for the distance type.

function calculateDistance($lat1,$lng1,$lat2,$lng2,$miles = true)
{
    $pi80 = M_PI / 180;
    $lat1 *= $pi80;
    $lng1 *= $pi80;
    $lat2 *= $pi80;
    $lng2 *= $pi80;

Access-Control-Allow-Origin. issue on Phonegap JqueryMobile

When i ajax call to get or post some Data from Server, Some times I found error like below.

XMLHttpRequest cannot load file://localhost/Users/bhumika/Documents/phonegap-2.2.0/lib/ios/bin/****/www/js/data.json. Origin null is not allowed by Access-Control-Allow-Origin.

to Solve above error write below syntax in your device ready function.

$.support.cors = true;

$.mobile.allowCrossDomainPages = true;

Or  

Write Below syntax in PHP file to the server.
 

header('Access-Control-Allow-Origin: *');
Cheers....

Load JSON Data Using Ajax

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

<script type="text/javascript" >

$( '#page1' ).live( 'pageshow',function(event, ui){
  getData();
});

Pass all the Form elements to call JSON

If you call any server file on the live server to get json data, then may be you need to transfer some variables with value. for ex. if you need to insert data to your server then you must haveto post all data to server file.

First you need to follow my previous blog(get-data-using-cross-domain-request).

Create one form element and create all the variable into the form tag that you want to post on the server.
Create below function in the .js file.

function createQuery(fname)
{
     var formname= fname;
     var elements = document.getElementById(formname).elements;
     var pairs = new Array();
var next_el = "";
var checkdetail=""
    for (var i = 0; i < elements.length; i++)
   {

Getting Started Phonegap with Android eclipse

Here is the steps that I follow to start a phonegap using android eclipse.
Refer the below link to configure the android eclipse and Sdk setup on your computer.
http://wiki.phonegap.com/w/page/16494774/Getting-started-with-Android-PhoneGap-in-Eclipse


don't Forget to setup the environment variable for the java, android, SDK and ant-home.
My Computer-->properties-->advance parameters