March 2022 - Extend Feature

removeListener Method has been deprecated

EventEmitter.removeListener(‘appStateDidChange’, …): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.
EventEmitter.removeListener(‘appStateDidChange’, …): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.
EventEmitter.removeListener(‘appStateDidChange’, …): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.

React Native Version 0.65+, removeListener is depreciated. You can use remove() isntead of removeListener

Example of React Native useEffect:

React.useEffect(() => {
	const subscription = AppState.addEvenListener('change', ()=> {
		//Your code here...
	});
	
	return () => {
		subscription.remove()
	}
}, [])

Another way to escape this warning

If you are sure that the deprecated use is happening in a dependency you cannot control, it is possible to silence these warnings. In your App.tsx or somewhere else add LogBox on that screen.

import { LogBox } from "react-native";

LogBox.ignoreLogs(["EventEmitter.removeListener"]);

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

React Native Take a Tour – App Tour – Tap Target View library. This library is a React Native bridge around android and ios app tour libraries. Supported RN >= 0.61

In this article I have discuses how to show Tap Target View on React Native project Function based component. Please follow below steps to implement example code for Tap Target View on function based component.

Android: KeepSafe/TapTargetView
An implementation of tap targets from Google’s Material Design guidelines on feature discovery.

iOS: aromajoin/material-showcase-ios
An elegant and beautiful tap showcase view for iOS apps based on Material Design Guidelines.

Run following command to Install

npm install react-native-app-tour --save

After install react-native-app-tour I call event emitter DeviceEventEmitter

import { …, DeviceEventEmitter } from 'react-native';

Now, we need to import react-native-app-tour module with below code.

import { AppTour, AppTourView, AppTourSequence } from 'react-native-app-tour';

Now define appTourSequence

let appTourSequence = new AppTourSequence();

Now we need to configure props for app tour targets.

let tourOneProps = {
order: 1,
title: "What is Lorem Ipsum?",
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
outerCircleColor: '#f24481',
titleTextSize: 22,
titleTextColor: '#ffffff',
descriptionTextSize: 14,
descriptionTextColor: '#ffffff',
}

let tourTwoProps = {
order: 2,
title: "Why do we use it?",
description: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters",
outerCircleColor: '#f24481',
titleTextSize: 22,
titleTextColor: '#ffffff',
descriptionTextSize: 14,
descriptionTextColor: '#ffffff',
}

Now configure and add view targets to appTourSequence. Here is example for view ref props like “ref={ref => this.payoutListMenuRef = ref}“

React.useEffect(() => {
	setTimeout(() => {
		let exampleOneViewRef = this.exampleOneViewRef;
		if(exampleOneViewRef!=null){
			let exampleOneTourTarget = AppTourView.for(this.exampleOneViewRef, {...tourOneProps});
			appTourSequence.add(exampleOneTourTarget);
		}
		
		let exampleTwoViewRef = this.exampleTwoViewRef;
		if(exampleTwoViewRef!=null){
			let exampleTowTourTarget = AppTourView.for(this.exampleTwoViewRef, {...tourTwoProps});
			appTourSequence.add(exampleTowTourTarget);
		}

		AppTour.ShowSequence(appTourSequence);
	}, 1000);
}, []);

When finish app tour sequence, we can execute our own code by using below onFinishSequenceEvent event.

React.useEffect(() => {
	const subscription = DeviceEventEmitter.addListener('onFinishSequenceEvent', (e: Event) => {
		if(e.finish===true){
			appTourSequence.removeAll();
			
			//Add your code here
		}
	});

	return () => subscription.remove();
}, []);

React Native App Tour View full Example code. You can move the code on your own created screen.

removeListener Method has been deprecated

Example of React Native useEffect:

Another way to escape this warning

Run following command to Install

Recent Posts

Categories

Important Links