gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.github.io/react-native-bottom-sheet/
MIT License
6.71k stars 742 forks source link

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? #355

Closed faustoct1 closed 3 years ago

faustoct1 commented 3 years ago

Bug

running yarn ios got Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Environment info

Library Version
@gorhom/bottom-sheet ^3
react-native ~0.63.4
react-native-reanimated ^2.0.0
react-native-gesture-handler ^1.10.3

Steps To Reproduce

  1. yarn
  2. yarn ios
  3. wait for open the app , see the error

Describe what you expected to happen:

  1. Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Reproducible sample code

import React, { useEffect } from 'react'
import {Dimensions, Text, View} from 'react-native'
import BottomSheet, { BottomSheetFlatList } from '@gorhom/bottom-sheet';

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
const height = viewportHeight

const BottomPanel = (props) => {

  const unmount = () => {
  }

  useEffect(() => {
    return () => {unmount()}
  } ,[])

  return (
    <BottomSheet
      style={{flex:1,height:'100%',backgroundColor:'#333'}}
      snapPoints={[10, height*0.725]}>
      <BottomSheetFlatList
        data={[]}
        keyExtractor={i => i}
        renderItem={({item,index})=><View />}
        contentContainerStyle={{backgroundColor:'#333'}} />
    </BottomSheet>
  )
}
faustoct1 commented 3 years ago

The problem is related conflict with react-native-reanimated v2 + react-navigation + react-native-bottom-sheet. To fixed I should to upgrade react-navigation to version 6 not released yet so be aware of bugs. Also use version 3 of react-native-bottom.

  1. yarn add react-native-reanimated (to upgrade to version 2)
  2. yarn add @gorhom/bottom-sheet@^3 (to upgrade to version 3)
  3. yarn add @react-navigation/core@next @react-navigation/stack@next @react-navigation/native (to version 6)
blazk0 commented 3 years ago

@faustoct i did that but the error is still here

gorhom commented 3 years ago

you should follow the react-native-reanimated installation instructions here https://docs.swmansion.com/react-native-reanimated/docs/installation