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.

Search keywords in HTML content and highlight

Declare below variables in class

highlightClass = "highlightText";

highlightRe: any;

spaceRe = /\s+/;

spaceRe2 = /\s+$/;

before: any = "";

after: any = "";

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>