How to showing different time zone in react native:

Here we learn about moment plugin which is “How to show different time zone in react native“, for implement this you first need to install and setup react-moment plugin, if you didn’t installed it then please follow https://www.itechinsiders.com/how-to-use-moment-js-in-react-native/

I’m a big fan of React Native, because it is very easy to implement complicated concepts and designs, in below example i am going to explain you in detail how to showing time.

Example Output –

But now we take a look of the react-moment plugin, so let’s start

Step 1:

First we need to install the plugin

npm install –save moment react-moment

Step 2:

The moment-timezone package is required to use the timezone related functions, so we need to install the time-zone npm plugin.

npm install –save moment-timezone

Step 3:

Import the plugin in which file you want to use it.

import Moment from 'react-moment';
import 'moment-timezone'

Step 4:

Call the function in the render method.

render(){
 
  return({this.convertTimeZone(date)})
 
}

Step 5:

Provide the definition of convertTimeZone() function.

convertTimeZone(date){
var d1 = new Date();
var d2 = new Date(date);
const diffTime = Math.abs(d1.getTime() - d2.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const exactDateDiff = diffDays*24;
if(exactDateDiff <= 24){
return(
<Moment format={'hh:mm a'} style={{ color: "black", marginTop: 10, alignItems: "flex-end"}}
fromNow element={Text}>{date}</Moment>
}else if(exactDateDiff <= 48)
{
const dateyest = {lastDay : '[Yesterday]'};
return(
<Moment calendar={dateyest} style={{ color: "black", marginTop: 10, alignItems: "flex-end"}}
element={Text}>{date}</Moment>
)
}
else{
return(
<Moment format={'DD/MM/YYYY'} style={{ color: "black", marginTop: 10, alignItems: "flex-end"}}
element={Text}>{date}</Moment>
)
}

So the topic is “How to show different time zone in react native“ completed.

You can find my post on medium as well click here please follow me on medium as well.

If have any query/issue, please feel free to ask.

Happy Coding Guys.