Ikooko-native-components NPM

Installing react-native-bottom-sheet steps

This library provides two versions that are align with Reanimated v1 & v2

Recommended Version: Version 3

yarn add @gorhom/bottom-sheet@^3

devDependencies to install

yarn add react-native-reanimated react-native-gesture-handler

iOS Setup

Installing pods: cd ios && pod install

Android setup

Step 1: Linking manually react-native-gesture-handler

Updating MainActivity.java:

  import com.facebook.react.ReactActivity;
  import com.facebook.react.ReactActivityDelegate;
  import com.facebook.react.ReactRootView;
  import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "THeStyleguide";
  }

   @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
       @Override
       protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
       }
     };
   }
}

Step 2: Linking manually react-native-reanimated

2.1 Turn on Hermes engine by editing android/app/build.gradle

project.ext.react = enableHermes: true

2.2 Plug Reanimated in MainApplication.java

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...