React Native Application Shows Blank White Screen After Adding GestureHandlerRootView for react-native-bottom-sheet Integration

Question

I have encountered an issue where my React Native application screen goes blank and turns white after adding the import statement for GestureHandlerRootView from 'react-native-gesture-handler', as recommended in the documentation for the 'react-native-bottom-sheet' library - https://gorhom.github.io/react-native-bottom-sheet/. This unexpected behavior has left me puzzled and seeking guidance on how to resolve it.

import "react-native-gesture-handler";
import { GestureHandlerRootView } from 'react-native-gesture-handler'; 

The 'react-native-bottom-sheet' library is a widely-used tool for creating bottom sheets and modals in React Native applications. While integrating it into my project, I followed the documentation's suggestion to wrap the entire application with GestureHandlerRootView. However, upon doing so, I encountered this blank white screen problem.

I am reaching out to the community for insights and possible solutions to this issue. Any guidance or assistance in resolving this problem would be greatly appreciated, as I am eager to utilize the 'react-native-bottom-sheet' library to enhance my application's user experience. Thank you in advance for your assistance.

App.js

import "react-native-gesture-handler";
import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import AppNavigator from './navigation/AppNavigator';
import store from './store';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { GestureHandlerRootView } from 'react-native-gesture-handler'; // Import GestureHandlerRootView

export default function App() {
  useEffect(() => {
    // Check for the presence of a stored authentication token
    const checkToken = async () => {
      try {
        const token = await AsyncStorage.getItem('authToken');

        if (token) {
          // Token exists, user is logged in
          // You can perform any additional checks/validation here
          // For example, you can decode the token to get user data.
          // Dispatch a login action here if needed.
        }
      } catch (error) {
        console.error('Error reading token:', error);
      }
    };

    checkToken();
  }, []);

  return (
    <Provider store={store}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        {/* Wrap your entire app with GestureHandlerRootView */}
        <AppNavigator />
      </GestureHandlerRootView>
    </Provider>
  );
}

package.json

{
  "name": "appname",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@gorhom/bottom-sheet": "^4.4.8",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "expo": "~49.0.8",
    "expo-auth-session": "~5.0.2",
    "expo-constants": "^14.4.2",
    "expo-crypto": "~12.4.1",
    "expo-random": "~13.2.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-web-browser": "~12.3.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-modal-sheet": "^2.0.0",
    "react-native": "0.72.4",
    "react-native-animatable": "^1.3.3",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-international-phone-number": "^0.4.14",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-screens": "^3.25.0",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-tailwindcss": "^1.1.11",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "twrnc": "^3.6.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

Answer 1

I had same problem, i fixed that with added with style={ height: "100%, width: "100%}

<GestureHandlerRootView>
  <View style={{ height: "100%", width: "100%" }}>
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="LoginPage" component={LoginPage} />
        <Stack.Screen name="HomePage" component={HomePage} />
      </Stack.Navigator>
    </NavigationContainer>
  </View>
</GestureHandlerRootView>

Don't forget to add :

plugins: [ "react-native-reanimated/plugin" ],

in your babel.config.js