Having an issue with importing a bottom sheet written in typescript into a class component. It works correctly in debugging mode but unfortunately not in release mode. Despite checking the logcat, no readable error code or message is being printed.
Even after wrapping the typescript component inside a try-catch block, the app still crashes. Below is the typescript component:
export default function App(data: any) {
const ref = useRef<BottomSheetRefProps>(null);
const onPressCloseBottomSheet = useCallback(() => {
const isActive = ref?.current?.isActive();
if (isActive) {
ref?.current?.scrollTo(0);
data.data.onCloseBottomSheetParam();
} else {
ref?.current?.scrollTo(-(styles.windowHeight / 1.8));
}
}, []);
var custom_view = data.data.custom_view;
try {
return (
<GestureHandlerRootView style={styles.bottomSheetOuterWrapper}>
<BlurView
style={styles.blurViewStyle}
blurRadius={1}
blurType={'dark'}
/>
<View style={styles.innerContainerBottomSheet}>
<BottomSheet ref={ref}>
{data.data.onCloseBottomSheetParam}
{custom_view}
</BottomSheet>
</View>
</GestureHandlerRootView>
);
} catch (e) {
alert('BottomSheet called failed!');
return null;
};
}
and here is the part of class component where I import and use the bottom sheet:
...
try {
const customview = (<ScrollView
contentContainerStyle={styles.userEmojisScrollableView}>
{Object.keys(all_active_users).map(e =>
all_active_users[e].act &&
<View style={styles.userEmojisScrollableInnerView}>
<View style={styles.usrEmojisNameImgWrapper}>
<FastImage
source={all_active_users[e].profile_pic ? {
uri: all_active_users[e].profile_pic,
priority: FastImage.priority.high,
cache: FastImage.cacheControl.immutable,
} : require('../assets/user.png')}
style={styles.usrEmojiPic}
resizeMode={FastImage.resizeMode.cover}
/>
<Text style={styles.usrEmojiUsernameTxt}>
{all_active_users[e].name}
</Text>
</View>
</View>
)}
</ScrollView>);
return (<BottomSheet data={{ custom_view: customview, onCloseBottomSheetParam: (() => this.onCloseBottomSheet()) }} />);
} catch (e) {
logErrors('openModalActiveUsers()', e);
alert('openModalActiveUsers() failed!');
return;
};
...
Seeking suggestions on what could be causing this issue. Why does it work in debugging mode but not in release mode?
UPDATE Discovered that the app only crashes when a ScrollView is passed to the typescript function. Removing the ScrollView and passing the remaining React child components prevents the crash. The question now is why is the ScrollView causing my app to crash when used in the typescript component?