LunatiqueCoder / luna

Luna - a React Native + Next.js template. Built with TypeScript :heart:
https://luna-gamma.vercel.app/
MIT License
264 stars 17 forks source link

Not work with GestureHandlerRootView on web #53

Closed 1280103995 closed 2 years ago

1280103995 commented 2 years ago

Thanks your template 👏 👏 👏

Describe the bug

  1. i run yarn add react-native-reanimated.
  2. according to the react-native-gesture-handler installation documentation to use GestureHandlerRootView, then the page is blank on the web.

src/index.js

import 'react-native-gesture-handler';
...

App.tsx

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

const TabbedApp = () => {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <GestureHandlerRootView style={{flex: 1}}>    // add
        <NavigationContainer>
          <TopTabNavigator />
        </NavigationContainer>
      </GestureHandlerRootView>                     // add
    </SafeAreaProvider>
  );
};

To Reproduce Use default template

Expected behavior These popular libraries should work fine on the web, no?

LunatiqueCoder commented 2 years ago

Hello @1280103995 . Thank you for trying my template and for raising this issue.

Indeed, these popular libraries should work well in the web. There might also be the case that for the web there would be needed some certain styles to display your view.

Unfortunately, I don't think I will have time until the weekend to have a look at it. If you resolve the issue in the meantime, I would appreciate if you come back here with an answer.

Thank you! 🙏

LunatiqueCoder commented 2 years ago

First fix:

Second fix:

Please confirm new version (1.2.7) works for you.

1280103995 commented 2 years ago

Thanks, the new version works fine.

LunatiqueCoder commented 2 years ago

Please use v1.2.8.

In v1.2.7, I managed to introduce a small bug.