React Native

How to open phone default calendar in react-native

Posted On
Posted By Neha Dwivedi

React native provide default functionality to open phone calender, so we follow these steps.

Step1: import the linking from react native, because linking is a default functionality of react-native.

import { Linking } from ‘react-native’;

Step2: Now we are going to implement the design part, where we click for open the calender.

<TouchableOpacity style={{
borderWidth: 1, borderColor: ‘rgba(223,102,58,1)’, height: 30, width:
200, borderRadius: 15, alignContent: ‘center’, alignItems: ‘center’,
justifyContent: ‘center’
}} onPress={() => this.addCalendar()}>

<Text style={{ fontSize: 15, color: ‘rgba(227,117,65,1)’ }}>Add to </Text>

<Text style={{ textDecorationLine: ‘underline’}}> Calender </Text></ TouchableOpacity >

Step3: Now we are ready to define the function for opening the calender.

addCalendar(){ if(Platform.OS === ‘ios’) {
Linking.openURL(‘calshow:’);
} else if(Platform.OS === ‘android’) {
Linking.openURL(‘content://com.android.calendar/time/’);}

And if any other query/issue then please comment.

Happy Coding Guyz.

Related Post

leave a Comment

Latest Post

React Native

How to generate keytool for android release and debug build

Read More
Posted On
React Native

How to finding index at the time of scrolling on flatlist in react native

Read More
Posted On
React Native

How to exit from the app with user confirmation in react native

Read More
Posted On
React Native

How to open phone default calendar in react-native

Read More
Posted On
React Native

How to change Android package name in react-native

Read More
Posted On