Bezier Linechart in React Native

swapnilwatkar — Thu, 15 Jul 2021 13:31:29 +0000

Charts are easy way to convey data stories on mobile unlink using tables full of data especially while developing business dashboard apps, finance apps, mobile banking apps, analytics apps, e-commerce apps, health apps, and fitness apps etc.

In this tutorial, we will implement Bezier Linechart in React Native. We are going to use the react-native-chart-kit library, which has the ability to add different types of charts like line charts, Pie charts, Bar charts etc to our React native apps. The library provides a Charts API that is easy to use and highly customizable.

Lets Start.

Installing React Native Charts Kit:

Step 1:
Install the react-native-chart-kit npm package into our existing React Native project using NPM or yarn.

npm install react-native-chart-kit
or
yarn add react-native-chart-kit

Step 2:
Importing Charts components into React Native.
[Note: We are using only one type of chart (Linechart) for this tutorial,there are many types like LineChart,BarChart,PieChart, ProgressChart,ContributionGraph,StackedBarChart.]

You can do so by writing the following piece of code:

import {LineChart} from 'react-native-chart-kit'

That’s it. Now you get access to Linechart, which are accessible from your JavaScript code.

Step 3:
Creating a Line Chart in React Native

As we have already imported Linechart components in the previous step, we need to provide the data to the built-in component as follows:

<LineChart
   data={{
           labels: [Jun 21,May 21,Apr 21,Mar 21,Feb 21,Jan 21], //Array of labels [Jun 21,May 21,Apr 21,Mar 21,Feb 21,Jan 21]
             datasets: [{   data: [ 4.3,4.8,5,5,4.9,4.8 ], //Array of values 
                            color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
                            strokeWidth: 2 // optional
                        }]  
          }}
   width={label.length*10+350}
   height={320}                  
   verticalLabelRotation={70}
   withInnerLines={false}
   chartConfig={{
                  backgroundGradientFrom: 0,
                  backgroundGradientFromOpacity:0,
                  backgroundGradientTo: 0,
                  backgroundGradientToOpacity: 0,
                 color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                 labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                 backgroundColor: (opacity = 0) => `rgba(255, 255, 255, ${opacity})`,
                 strokeWidth: 2, // optional, default 3                       

              }}
    bezier // type of line chart              
/>

The code above represents the dataset for our bezier line chart component, that will be displayed in a line chart view, in our project.For the scope of this tutorial, we are using hardcoded static data.Check out the documentation to learn more about all the customizations you can do to a line chart at https://www.npmjs.com/package/react-native-chart-kit

Run your projects and open the screen containing the newly added line chart.

How to Animate pointer on Google Map in React Native

swapnilwatkar — Mon, 12 Jul 2021 16:43:00 +0000

This article is to show animation of pointer movement on Google map.
There are many ways of doing an animation of pointer movement on maps ,this article focus on using the react-native-maps.We use MapView, Marker and AnimatedRegion for this animation.

Here's what we'll create at the end of this article :

For creating this animation we use the location array which has latitude and longitude values ,for example :
{latitude: 20.93289777777778,longitude:77.77506666666666}

We will update the location in state every 4 sec, so we will get the next pointer value and animate it on Map.

Code sample:

const [location  ,setlocation ]=useState(0); 

 useEffect(() => {                
        const interval = setInterval(() => { 
             getLocation()

        },4000);
        return () => clearInterval(interval)       
    })

const getLocation =  () => {   
        console.log("get live location after 4 second")
let i=0; 
var locationArray=[             
{latitude:20.752219999999998,longitude:79.75849777777778},
{latitude:20.75269111111111,longitude:79.75815999999999},
{latitude:20.75293111111111,longitude:79.75798222222222}, 
{latitude:20.754004444444444,longitude:79.75805333333334},
]
const { latitude, longitude } =locationArray[i+1];
animate(latitude, longitude);
}

const animate = (latitude, longitude) => {
        const newCoordinate = {latitude, longitude};
        if(Platform.OS == 'android'){
            if(markerRef.current){
            markerRef.current.animateMarkerToCoordinate(newCoordinate, 7000);
            }
        }else{
            coordinate.timing(newCoordinate).start();
        }
    }

The Complete code is available on https://github.com/swapnilwatkar/GoogleMap-Animation/blob/main/MapScreen.js

DEV Community: swapnilwatkar

Bezier Linechart in React Native

How to Animate pointer on Google Map in React Native