Android & React-Native Example

Unit Testing In the past year, react-native become a very popular language for cross-platform application development. Unit testing means writing test cases to ensure that the individual component will work as expected. The Jest is the default testing library supported by the react-native. There are a couple of more libraries available for testing are  Detox , Appium , and  react-native-testing-library . Why unit testing is required? When we start thinking about unit testing one question in our mind comes is, Why we need to write the test cases?  So, there are some key benefits to write the unit testing for the application. The unit testing helps us to ensure that the individual component is working as expected. In the process of development, we have to integrate the new modules to the application and unit testing is helpful to ensure that the code is still working as expected after updating the new changes. This helps us to determine the small bugs in the code so it will...

What is useState? In react-native props and state are the data which are used to handle the component. The component will update itself as soon as the state changes its value.  useState is a hook that is used to define the state for the functional component. Using useState you can define the initial value for the state and update it later for the functional component. How to use useState? import React, {  useState } from 'react'; const [loading, setLoading] = useState(true);   The above is the syntax to define and used the hook in the functional component. We have defined the initial value is true for the above state. loading : The name of the state. setLoading : Method definition to update the value of the state later in the code. useState : Define the const to work as the state and pass the initial value to it. How to update the value for the useState? To update the state value you can see the setLoading method defined in the example. setLoading(false)   ...

What is useEffect :   In our application, we required to call network operations, subscription for the events, etc. The useEffect provides you a way to handle that operation using hooks. The useEffect is a combination of lifecycle methods of the react component and provides you a better way to handle those events. The useEffect is a combination of lifecycle methods  componentDidMount , componentDidUpdate , and componentWillUnmount . Now, let's start with how can we define and use the useEffect in react-native. Syntax of useEffect  To use the useEffect you required to import it from the react package. import React, { useState, useEffect } from 'react'; useEffect(()=>{ }) or   React.useEffect(()=>{ }) How useEffect works? The useEffect is called after every render.  After the first render takes the place the useEffect will be call and perform the operations. It will affect the performance of the application but we have some ways using which we can custo...

Component : The component is a very basic element of any react-native application. As we know a large application is divided into small segments and in react we know it as a component . This helps to make development fast and maintain the code very easily. The main advantage of the component is reusability which saved a lot of development time. There are lots of default components provided by the react it-self. You can also create your own component and use it. PureComponents : The pure component is also one time of component but it has some benefits over a component. The major difference between both is pure component does a shallow comparison on state change. Like when we change any value of any state present in the pure component then It first compares their values, but when comparing objects it compares only references. The re-render of the pure component will only call if the value of the state is changed and used in the pure component. Difference :  Component r...

If you are react developer and you are getting confused with above terms and you want to know a bit about it so let's discussed about the role of each one. JS : JS stands for JavaScript . It is a interpreted scripting language and widely used in web. It is used within the HTML tags. It is high level language. React : React is a JavaScript library developed and maintain by Facebook . React widely used to make the user interface for single page application. JSX : JSX is a pre-processor step and adds XML syntax to JavaScript. JSX provides the ability to use the tags within the react component which is easy to use. Like XML, it tags have a tag name, attributes, and children. You can also use react without it but it makes code easy to understand and good looking.