[BUG] Works in debug, but not in release (Android)

[gusgushz]

Describe the bug
Well, i dont know if its a bug, but currently i have a problema with a release build for android. In debug i have no problem, the package seems to functions perfectly, but in release mode it doesnt. And i dont know why.
Maybe im missing something, ig someone knows what it is please tell me.

Maybe its because in my androidmanifest im using this: android:screenOrientation="portrait". But i would like to know if thats the problem to change my approach

To Reproduce
Steps to reproduce the behavior:
When the phone turn to Landscape right or left, it should change the content inside the modal.

Expected behavior
Do the same that already does in debug, but in release.

Screenshots
If applicable, add screenshots to help explain your problem.
As i said, this is from the debug build, but in release doesnt work (the content from the modal dont turn to horizontal)
Vertical

Horizontal

Smartphone (please complete the following information):

• OS: MyOS11.0.18_A2022L_TEL (Android 11)
• Device: ZTE Axon 30 2022L

Environment
System:
OS: Windows 11 10.0.22631
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 1.99 GB / 7.80 GB
Binaries:
Node:
version: 24.11.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.19
path: C:\Users\engin\AppData\Roaming\npm\yarn.CMD
npm:
version: 11.6.2
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-252.25557.131.2521.14432022
Visual Studio:
- 16.11.32126.315 (Visual Studio Community 2019)
Languages:
Java:
version: 21.0.9
path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.1.1
wanted: 19.1.1
react-native:
installed: 0.82.1
wanted: 0.82.1
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Additional context
The code:
App.tsx
`import { StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { CameraView } from './src/components/CameraView';
import { Modal } from './src/components/Modal';
import { useState } from 'react';
import { useDeviceOrientation, Orientation, useInterfaceOrientation } from 'react-native-orientation-director';

function App() {
const isDarkMode = useColorScheme() === 'dark';
const [isModalVisible, setIsModalVisible] = useState(false);
const [info, setInfo] = useState('');

const deviceOrientation = useDeviceOrientation();

const isLandscapeLeft = deviceOrientation == Orientation.landscapeLeft || deviceOrientation == Orientation.faceDown;
const isLandscapeRight = deviceOrientation == Orientation.landscapeRight || deviceOrientation == Orientation.faceDown;

const modalOrientation: 'left' | 'right' | undefined = isLandscapeLeft ? 'left' : isLandscapeRight ? 'right' : undefined;

return (

<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

<CameraView
style={styles.cam}
onCodeDetected={event => {
const { hasCode, data } = event.nativeEvent;
console.log('Evento recibido:', hasCode, data);

      if (hasCode) {
        if (data.includes('_')) {
          console.log('split4', data.split('_')[4]);
          setInfo(`Placa ${data.split('_')[4]}`); //Para mandar solo la placa
        } else {
          console.log('DATA', data);
          setInfo('Placa falsificada');
        }
        setIsModalVisible(true);
      }
    }}
  />
</SafeAreaProvider>

);
}

const styles = StyleSheet.create({
cam: { flex: 1, transform: [{ scale: 1.15 }] },
});

export default App;
The CameraView.tsx:import { requireNativeComponent, ViewStyle } from 'react-native';
import React from 'react';

interface Props {
style?: ViewStyle;
onCodeDetected?: (event: { nativeEvent: { hasCode: boolean; data: string } }) => void;
}

const NativeCameraView = requireNativeComponent('CameraXView');

export const CameraView = (props: Props) => {
return <NativeCameraView {...props} />;
};`

And the Modal.tsx:
`import React, { useEffect, useRef } from 'react';
import { TouchableWithoutFeedback, View, Text, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

interface ModalProps {
isModalVisible: boolean;
setIsModalVisible: React.Dispatch<React.SetStateAction>;
info?: string;
setInfo?: React.Dispatch<React.SetStateAction>;
isLandscape?: 'right' | 'left' | null;
}

export const Modal: React.FC = ({ setIsModalVisible, isModalVisible, info, isLandscape }) => {
// console.log('isLandscape en Modal:', isLandscape);
const animationRef = useRef(null);

useEffect(() => {
// animationRef.current?.play();

// Or set a specific startFrame and endFrame with:
animationRef.current?.play(0, 50);

}, [isModalVisible]);

return (
isModalVisible && (
<TouchableWithoutFeedback onPress={() => setIsModalVisible(false)}>


<View
style={[
styles.modalView,
{
width: isLandscape === 'right' || isLandscape === 'left' ? '100%' : '80%',
height: isLandscape === 'right' || isLandscape === 'left' ? '40%' : '50%',
transform: isLandscape === 'right' ? [{ rotate: '270deg' }] : isLandscape === 'left' ? [{ rotate: '90deg' }] : [{ rotate: '0deg' }],
},
]}>
<LottieView
ref={animationRef}
source={info == 'Placa falsificada' ? require('../../assets/Warning.json') : require('../../assets/Check.json')}
style={{
marginTop: -50,
backgroundColor: 'transparent',
width: isLandscape === 'right' || isLandscape === 'left' ? '100%' : '100%',
height: isLandscape === 'right' || isLandscape === 'left' ? '90%' : '100%',
}}
loop={false}
/>
<Text style={[styles.text, { marginBottom: isLandscape === 'right' || isLandscape === 'left' ? 15 : 30 }]}>{info}




)
);
};

const styles = StyleSheet.create({
modalContainer: {
position: 'absolute',
zIndex: 10,
top: 0,
left: 0,
right: 0,
bottom: 0,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
},
modalView: { backgroundColor: 'white', borderRadius: 10, justifyContent: 'center', alignItems: 'center' },
text: { fontSize: 16, fontWeight: 'bold', textAlign: 'center', position: 'absolute', bottom: 0 },
});
`

[gladiuscode]

Hi @gusgushz,
this is actually really interesting, since I haven't tried the library with a Modal yet.

I'll reproduce what you gave me here as an example and see what's up.

[gladiuscode]

Hi @gusgushz,
I can't seem to reproduce the issue.
I've tried with screenOrientation set to portraint and without, the modal rotates its content correctly.

Did you try again?

[gusgushz]

well what i notice is that in release i takes the state of the screen orientation as the app is opening, but dont update itself later. For example if i open the release app in portrait mode the modal shows vertical, if then i close the app and reopen it in landscape mode the modal shows its content in landscape. But in both cases, once the app has iniciated it dont update the value of the screen orientation.
And again, this only happens in release, in debug works fine.
Any advice?

[gladiuscode]

Alright,
can you please share your Manifest? Also, did you check that you fully implemented all the steps like the doc says?

Thanks!

[gusgushz]

Hi. I find a solution to the problem.
First of all, i found that the problem in release was something related to the lifecycle, because at the start of the app the package only took the state of the device orientation but never updates afterward. But if you send the app to background then return the app to foreground the problem is solved.
I had asked the IA agent in my IDE to scan my project to find the problem (i was thinking it was my camera implementation) and it said it was this line in this package.
[OrientationDirectorModuleImpl.kt] lines 160 to 180
if (!didComputeInitialDeviceOrientation) { didComputeInitialDeviceOrientation = true mOrientationSensorsEventListener.disable() // ← HERE TO DISABLE }
as a solution it only commented it, and voilà the app works as intended.

I dont know if this change will affect other things in the package or my project, but for now works fine.

[gladiuscode]

Hi @gusgushz
that is kinda weird tho, because that disable is helpful to prevent the sensor being active even when you don't need it.
Perhaps this bug only happens when you use the hooks in the App.tsx rather than components?
Maybe that is the issue here.

I'll investigate this more in the upcoming weekend.

Thanks!

[gladiuscode]

Hi @gusgushz
good news, I've managed to find the underlining issue and I think I've fixed it.
So with the next release you should be able to enjoy the library without the patch that your IDE suggested.

Do let me know if it works please.