1

So I'm using a few different NativeModules in an App (both Android and iOS specific) for playinmg Videos and such. This means that the screen is taken over by Native code eg. Java or Swift and their respective ViewControllers control the views instead of React-Native.

This is all good and works as should, but I do need to detect whether the NativeModule is running or not, eg. it's views or RN's views are showing. If i use { useIsFocused } from '@react-navigation' it cannot detect when a NativeModule is taking over the views, it always says the view from where I activated the NativeModule is inFocus.

Same with { AppState } from 'react-native' it always shows as active even though the Native views are overlayed.

Anyone found a solution to this problem?

UnknownFrequency
  • 413
  • 3
  • 18

2 Answers2

1
  1. make sure you handle the app state in the right way.
  2. you can use RCTEventEmitter to send events and manage them manually
  3. use the callback or promise and change the state in your app
Or Azoulay
  • 179
  • 2
1

If you are working with your own custom component as a NativeModule, then you can

  1. Declare a boolean property isVisible in your code and set it to true or false when your component is initialized or destroyed respectively. For UIViewController in iOS you can use viewWillAppear and viewWillDisappear for this purpose.
  2. Create a getter for isVisible property and export it to Javascript. You can take help from this link: https://reactnative.dev/docs/native-modules-ios#export-a-native-method-to-javascript
  3. Call the getter from inside your react native code to check if NativeModule is visible on the screen.
Meeran Tariq
  • 1,366
  • 11
  • 23