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
      }
    };
  ...

Prerequisite Configurations to use Icon Component

Run: $ yarn add react-native-vector-icons

iOS

Add the icon fonts to your Xcode project. Just follow these steps:

• Edit Info.plist

  UIAppFonts MaterialIcons.ttf

Android

project.ext.vectoricons = [ iconFontNames: [ 'MaterialIcons.ttf' ] ]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"