Any update on this…??

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin

Thanks! This fixed it for me. Did add the plugin before but needed to clear the cache too.

I’m getting this too on the web

Edit: Try this: https://github.com/gorhom/react-native-bottom-sheet/issues/11#issuecomment-916025454

Worked for me

import BottomSheet from '@gorhom/bottom-sheet/src'; import like this fixes the issue

Thanks @thespacemanatee but I am not using expo

If you scrolled a little you would have seen the non-expo solution: https://github.com/gorhom/react-native-bottom-sheet/issues/11#issuecomment-1012062676

Got the same error in Jest. Fixed that and a few other errors with the following mock

jest.mock('react-native-reanimated', () => ({
  ...require('react-native-reanimated/mock'),
  makeMutable: jest.fn(),
  useWorkletCallback: jest.fn().mockReturnValue(() => {}),
}))

@vtrrsl yes I made it work for the new apollo version. the problem is the config apollo provided is not working well for RN.

Here is how I fixed it:

// workaround for v3.5.0
// https://github.com/apollographql/apollo-client/releases
const defaultSourceExts =
  require('metro-config/src/defaults/defaults').sourceExts;
module.exports = {
  transformer: {
    getTransformOptions: () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: process.env.RN_SRC_EXT
      ? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'cjs'] // <-- cjs added here
      : [...defaultSourceExts, 'cjs'], // <-- cjs added here
  },
};

Hope it helps you

Still seeing this - none of these solutions worked.

I just installed this package following the instructions here and tried adding the BottomSheet component following the tutorial here and I immediately got this error… Can we please get an official fix for this because I am unable to use this library and it’s great and I’d really like to use it.

Hi @thespacemanatee I tried the non-expo solution but isn’t working either. Is it expected to work for react native mobile as the issue you pointed me to is solving it for RN web?

I couldn’t make it work. I cannot completely remove metro.config.js because I use NX and svg-transformer. Nx is a monorepo and does path resolution base on tsconfigs. no ide how to make it work, tried all possible solutions even excluding svg-transformer with no luck

const { withNxMetro } = require('@nrwl/react-native');
const { getDefaultConfig } = require('metro-config');

const requiredExts = ['svg', 'cjs', 'mjs'];

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  const {
    resolver: { assetExts, resolverMainFields, sourceExts },
  } = defaultConfig;

  const RN_SRC_EXT = process.env.RN_SRC_EXT;
  const result = withNxMetro(
    {
      transformer: {
        getTransformOptions: async () => ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: true,
          },
        }),
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
      },
      resolver: {
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        sourceExts: RN_SRC_EXT
          ? [...RN_SRC_EXT.split(',').concat(sourceExts), ...requiredExts]
          : [...sourceExts, ...requiredExts],
        resolverMainFields: ['sbmodern', 'dev', ...resolverMainFields],
      },
    },
    {
      // Change this to true to see debugging info.
      // Useful if you have issues resolving modules
      debug: false,
      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
      extensions: requiredExts,
    },
  );
  return result;
})();

import BottomSheet from '@gorhom/bottom-sheet/src'; import like this fixes the issue

Yes this fix, but typescript validation is broken

ofc don’t forget to clear the metro cache