Urgent: 'Withnavigation' & 'gorhom/bottom-sheet' is causing the app to get stuck at Splash Screen on the production mode & app build

How to / Third Party Tooling
1

Our app is running fine on the development mode but the app build is getting stuck at the splash screen.

To identify the root cause we ran the app on production mode with ‘expo start --no-dev --minify’ & identified that the ‘withnavigation’ & our ‘gorhom/bottom-sheet’ is causing the issue.

For reference sharing our environment details below:
“expo”: “^45.0.0”,
“react”: “17.0.2”,
“react-dom”: “17.0.2”,
“react-icons”: “^4.3.1”,
“react-native”: “0.68.2”,
“react-native-reanimated”: “~2.8.0”,
“react-native-gesture-handler”: “~2.2.1”,
“@gorhom/bottom-sheet”: “^3.0.0”,
“react-navigation”: “^4.4.4”,

  1. Following is our implementation of Bottom sheet modal:
 const bottomSheetModalRef = useRef(null); 
const handlePresentModalPress = useCallback(() => {
   bottomSheetModalRef.current?.present();
 }, []);
 const handleDismissModalPress = useCallback(() => {
   bottomSheetModalRef.current?.dismiss();
 }, []);
 
 const handleSheetChanges = useCallback((index) => {
   console.log("handleSheetChanges", index);
 }, []);
 const snap = Platform.OS == "ios" ? "34%" : "36%";
 const snapPoints = useMemo(() => [snap, snap], []);
 
 
const renderBottomSheet = () => {
   return (
     <BottomSheetModal
       ref={bottomSheetModalRef}
       index={1}
       snapPoints={snapPoints}
       onChange={handleSheetChanges}
     >
       <View style={Styles.sheetWrapper}>
         <TouchableOpacity
           onPress={() => {
             // handleActionButtonNavigation("CollabPage");
             handleActionButtonNavigation("AddParticipants");
           }}
         >
           <View style={[Styles.sheetTab, { marginTop: 0 }]}>
             <View
               style={[
                 Styles.iconContainer,
                 { backgroundColor: COLORS.primaryTeal500 },
               ]}
             >
               <SvgUri
                 svgXmlData={SVGS.CHEVRON_UP_DOWN}
                 width={RFValue(24, 844)}
                 height={RFValue(24, 844)}
               />
             </View>
             <Text style={[Styles.sheetText, { color: COLORS.monoBlack700 }]}>
               Start a Project
             </Text>
           </View>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => {
             handleActionButtonNavigation("OppurtunityPage");
           }}
         >
           <View style={Styles.sheetTab}>
             <View
               style={[
                 Styles.iconContainer,
                 { backgroundColor: COLORS.teritiaryWarning },
               ]}
             >
               <SvgUri
                 svgXmlData={SVGS.WHITE_BRIEFCASE}
                 width={RFValue(24, 844)}
                 height={RFValue(24, 844)}
               />
             </View>
             <Text style={Styles.sheetText}>Create Opportunity</Text>
           </View>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => {
             handleActionButtonNavigation("FolioPage");
           }}
         >
           <View style={Styles.sheetTab}>
             <View
               style={[
                 Styles.iconContainer,
                 { backgroundColor: COLORS.teritiaryPurple },
               ]}
             >
               <SvgUri
                 svgXmlData={SVGS.WHITE_OPEN_FOLDER}
                 width={RFValue(24, 844)}
                 height={RFValue(24, 844)}
               />
             </View>
             <Text style={Styles.sheetText}>Create Folio</Text>
           </View>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => {
             handleActionButtonNavigation("SavedDrafts");
           }}
         >
           <View style={Styles.sheetTab}>
             <View
               style={[
                 Styles.iconContainer,
                 { backgroundColor: COLORS.primaryTeal400 },
               ]}
             >
               <SvgUri
                 svgXmlData={SVGS.WHITE_DRAFT}
                 width={RFValue(24, 844)}
                 height={RFValue(24, 844)}
               />
             </View>
             <Text style={Styles.sheetText}>Saved Drafts</Text>
           </View>
         </TouchableOpacity>
       </View>
     </BottomSheetModal>
   );
 };
  1. Following is our implementation of ‘Withnavigation’:
 
import { withNavigationFocus } from "react-navigation";
 
 
export default connect(
 mapStateToProps,
 mapDispatchToProps
)(withNavigationFocus(Discover));
 

import { withNavigation } from "react-navigation";
export default withNavigation(BottomNavBar);

Need urgent help. If someone can help us identify if this issue is occurring because of the package support or any sort of syntax error.

Thanks :slight_smile:

2

Hi, Keeping this thread alive. Would really appreciate some help :))