Manually Link issue Invariant Violation Native Component for BSBottomSheetBehaviourAndroid Does not exist

[tarunkonda123]

implementation project(':react-native-vector-icons') implementation project(':react-native-nested-scroll-view') implementation project(':react-native-bottom-sheet-behavior')

project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') project(':react-native-nested-scroll-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-nested-scroll-view/android') project(':react-native-bottom-sheet-behavior').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bottom-sheet-behavior/android')

if (mReactRootView==null) { mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .addPackage(new RNNestedScrollViewPackage()) .addPackage(new RealmReactPackage()) .addPackage(new BottomSheetBehaviorPackage()) .addPackage(new VectorIconsPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); // The string here (e.g. "MyReactNativeApp") has to match // the string in AppRegistry.registerComponent() in index.js mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null); } setContentView(mReactRootView);

[cesardeazevedo]

Hi, i'm not sure on whats going on there, but could you provide more information? does the project successfully compiled?

Also, the correct reference is actually BSBBottomSheetBehaviorAndroid and not BSBottomSheetBehaviourAndroid, so i don't know where this reference (BSBottomSheetBehaviourAndroid) is coming from.

By the way, which react-native version are you using?

[tarunkonda123]

Thanks for reply :+1:

{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start --reset-cache" }, "dependencies": { "native-base": "^2.4.4", "react": "^16.3.1", "react-native": "^0.55.4", "react-native-bottom-sheet-behavior": "^1.0.0-beta.8", "react-native-collapsing-toolbar": "^1.0.0-beta.8", "react-native-elements": "^0.19.1", "react-native-nested-scroll-view": "^6.0.0", "react-native-router-flux": "^4.0.0-beta.28", "react-native-vector-icons": "^4.6.0", "react-redux": "^5.0.7", "realm": "^2.5.0", "redux": "^4.0.0", "redux-thunk": "^2.2.0" } } And Project Compiled Successfully ya sorry its BSBBottomSheetBehaviorAndroid

[cesardeazevedo]

As i could understand, the library is not installed correctly, and you are using a quite diferrent MainApplication.java API, if you compare with this example file

Can you explain more on what you doing on your MainApplication.java file? or are you using react-native on top of a native android application?

[tarunkonda123]

yes i'm already using same application class

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new RealmReactPackage(),
                    new BottomSheetBehaviorPackage(),
                    new VectorIconsPackage(),
                    new RNNestedScrollViewPackage(),
                    new RNCollapsingToolbarPackage()

            );
        }
    };
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();

        SoLoader.init(this,false);
    }
}

js file::
import React, { Component } from "react";
import {
  View,
  Text,
  Button,
  StatusBar,
  Dimensions,
  StyleSheet
} from "react-native";
import PropTypes from "prop-types";

import {
  CoordinatorLayout,
  BottomSheetBehavior,
  FloatingActionButton
} from "react-native-bottom-sheet-behavior";

const { width } = Dimensions.get("window");

import { connect } from "react-redux";

class ThirdScreen extends Component {
  constructor(props) {
    super(props);
  }

  static contextTypes = {
    openDrawer: PropTypes.func
  };

  handleSlide(e) {
    this.offset = e.nativeEvent.offset;
  }

  handleBottomSheetChange(e) {
    this.lastState = e.nativeEvent.state;
  }

  render() {
    return (
      <CoordinatorLayout style={styles.container}>
        <StatusBar translucent backgroundColor="#205cb2" />

        <BottomSheetBehavior
          peekHeight={80}
          hideable={false}
          onSlide={this.handleSlide}
          onStateChange={this.handleBottomSheetChange}
        >
          <View style={styles.bottomSheet}>
            <View style={styles.bottomSheetHeader}>
              <Text style={styles.label}>BottomSheetBehavior !</Text>
            </View>
            <View style={styles.bottomSheetContent} />
          </View>
        </BottomSheetBehavior>

      </CoordinatorLayout>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  content: {
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff"
  },
  toolbarWrapper: {
    paddingTop: 24,
    marginBottom: 24,
    backgroundColor: "#4389f2"
  },
  toolbar: {
    width,
    height: 56
  },
  bottomSheet: {
    backgroundColor: "#4389f2"
  },
  bottomSheetHeader: {
    padding: 28,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  bottomSheetContent: {
    height: 200,
    padding: 2,
    alignItems: "center",
    backgroundColor: "#fff"
  },
  label: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#fff"
  }
});

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps)(ThirdScreen);

[psi9730]

i have same error on this Native component for "BSBBottomeSheetBehaviorAndroid" does not exist I checked all of things about 'link' but not work package com.easi6.easi6driver.android;

import com.burnweb.rnsendintent.RNSendIntentPackage; import com.evollu.react.fcm.FIRMessagingPackage; import com.facebook.react.ReactApplication; import com.bottomsheetbehavior.BottomSheetBehaviorPackage; import com.wix.interactable.Interactable; import com.horcrux.svg.SvgPackage; import com.lwansbrough.RCTCamera.RCTCameraPackage; import com.oblador.vectoricons.VectorIconsPackage; import com.peel.react.TcpSocketsModule; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; import com.i18n.reactnativei18n.ReactNativeI18n; import com.learnium.RNDeviceInfo.RNDeviceInfo; import com.marianhello.react.BackgroundGeolocationPackage; import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage; import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage; import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage; import com.reactnativenavigation.NavigationApplication; import com.airbnb.android.react.maps.MapsPackage;

import java.util.Arrays; import java.util.List;

public class MainApplication extends NavigationApplication implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
        new BottomSheetBehaviorPackage(),
        new Interactable(),
        new SvgPackage(),
    new RCTCameraPackage(),
    new VectorIconsPackage(),
    new TcpSocketsModule(),
    new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appcenterCrashes_whenToSendCrashes)),
    new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appcenterAnalytics_whenToEnableAnalytics)),
    new AppCenterReactNativePackage(MainApplication.this),
    new RNDeviceInfo(),
    new FIRMessagingPackage(),
    new BackgroundGeolocationPackage(),
    new RNSendIntentPackage(),
    new ReactNativeI18n(),
    new MapsPackage()
  );
}

};

@Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }

@Override public boolean isDebug() { // Make sure you are using BuildConfig from your own application return BuildConfig.DEBUG; }

protected List getPackages() { // Add additional packages you require here // No need to add RnnPackage and MainReactPackage

return Arrays.<ReactPackage>asList(
  // eg. new VectorIconsPackage()
  new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appcenterCrashes_whenToSendCrashes)),
  new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appcenterAnalytics_whenToEnableAnalytics)),
  new AppCenterReactNativePackage(MainApplication.this),
  new RNDeviceInfo(),
  new VectorIconsPackage(),
  new TcpSocketsModule(),
  new RCTCameraPackage(),
  new FIRMessagingPackage(),
  new BackgroundGeolocationPackage(),
  new RNSendIntentPackage(),
  new ReactNativeI18n(),
  new MapsPackage()
);

}

@Override public List createAdditionalReactPackages() { return getPackages(); }

@Override public void onCreate() { super.onCreate(); SoLoader.init(this, false); } }

this is my mainAppliction.js

[cesardeazevedo]

Guys, i've tried to reproduce it, but i really didn't had any problems, so i've no idea on what's going on there.

This is the very most minimum integration that i got.

react-native init testbottomsheet npm install react-native-bottom-sheet-behavior@1.0.0-beta.8 --save

package.json

  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-bottom-sheet-behavior": "^1.0.0-beta.8"
  }

android/settings.gradle

rootProject.name = 'testbottomsheet'

+ include ':react-native-bottom-sheet-behavior'
+ project(':react-native-bottom-sheet-behavior').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bottom-sheet-behavior/android')

include ':app'

android/app/build.gradle

...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
+    compile project(':react-native-bottom-sheet-behavior')
}

package com.testbottomsheet;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
+ import com.bottomsheetbehavior.BottomSheetBehaviorPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
+          new BottomSheetBehaviorPackage()
      );
    }

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

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

App.js

import React, { Component } from 'react'
import {
  Text,
  View,
  StyleSheet,
} from 'react-native'

import {
  CoordinatorLayout,
  BottomSheetBehavior,
} from 'react-native-bottom-sheet-behavior'

class SimpleView extends Component {
  render() {
    return (
      <CoordinatorLayout style={styles.container}>
        <BottomSheetBehavior peekHeight={80} hideable={false}>
          <View style={styles.bottomSheet}>
            <View style={styles.bottomSheetHeader}>
              <Text style={styles.label}>BottomSheetBehavior !</Text>
            </View>
            <View style={styles.bottomSheetContent}>
            </View>
          </View>
        </BottomSheetBehavior>
      </CoordinatorLayout>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  bottomSheet: {
    backgroundColor: '#4389f2',
  },
  bottomSheetHeader: {
    padding: 28,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  bottomSheetContent: {
    height: 200,
    padding: 2,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  label: {
    fontSize: 18,
    color: '#fff',
  },
})

export default SimpleView

Did you guys tried to run the example project?

Also, did you guys took a look at on the example integration files?

android/settings.gradle

android/app/build.gradle

android/app/src/main/java/com/example/MainApplication.java

If you still having problems, and could provide something that i could reproduce, i would really appreciate it.

[psi9730]

it give error like this, i think it is not a problem with link. i do example, but i can't use them it give error. /Users/easi6/easi6/react-native-bottom-sheet-behavior/example/node_modules/react-native/local-cli/util/findSymlinkedModules.js:37 ignoredRoots? = []) ^

SyntaxError: Unexpected token ? at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:616:28) at loader (/Users/easi6/easi6/react-native-bottom-sheet-behavior/example/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/easi6/easi6/react-native-bottom-sheet-behavior/example/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18)

and this is error on my project

ExceptionsManager.js:71 Unhandled JS Exception: Invariant Violation: Native component for "BSBBottomSheetBehaviorAndroid" does not exist

This error is located at: in RCTText (at Text.js:202) in Text (created by Styled(Text)) in Styled(Text) (at remoteDetailView.js:311) in RCTView (at View.js:60) in View (created by Styled(View)) in Styled(View) (at remoteDetailView.js:306) in RCTView (at View.js:60) in View (created by Styled(View)) in Styled(View) (at remoteDetailView.js:302) in RCTView (at View.js:60) in View (at KeyboardAvoidingView.js:203) in KeyboardAvoidingView (created by Styled(KeyboardAvoidingView)) in Styled(KeyboardAvoidingView) (at remoteDetailView.js:253) in TouchableWithoutFeedback (at remoteDetailView.js:250) in ThemeProvider (at remoteDetailView.js:249) in RemoteDetailView (created by withHandlers(RemoteDetailView)) in withHandlers(RemoteDetailView) (created by withState(withHandlers(RemoteDetailView))) in withState(withHandlers(RemoteDetailView)) (created by withState(withState(withHandlers(RemoteDetailView)))) in withState(withState(withHandlers(RemoteDetailView))) (created by withState(withState(withState(withHandlers(RemoteDetailView))))) in withState(withState(withState(withHandlers(RemoteDetailView)))) (created by withState(withState(withState(withState(withHandlers(RemoteDetailView)))))) in withState(withState(withState(withState(withHandlers(RemoteDetailView))))) (created by withProps(withState(withState(withState(withState(withHandlers(RemoteDetailView))))))) in withProps(withState(withState(withState(withState(withHandlers(RemoteDetailView)))))) (created by Connect(withProps(withState(withState(withState(withState(withHandlers(RemoteDetailView)))))))) in Connect(withProps(withState(withState(withState(withState(withHandlers(RemoteDetailView))))))) (at remoteDraggableView.js:77) in RCTView (at View.js:60) in View (at remoteDraggableView.js:76) in RCTView (at View.js:60) in View (at remoteDraggableView.js:72) in BSBBottomSheetBehaviorAndroid (at BottomSheetBehavior.js:79) in BottomSheetBehavior (at remoteDraggableView.js:67) in BSBCoordinatorLayoutAndroid (at CoordinatorLayout.js:16) in CoordinatorLayout (at remoteDraggableView.js:62) in TouchableWithoutFeedback (at remoteDraggableView.js:59) in ThemeProvider (at remoteDraggableView.js:58) in RemoteDraggableView (at NavigationWrapper.js:51) in NavigationWrapper(RemoteDraggableView) (at Navigation.js:83) in Provider (at Navigation.js:82) in _class2 (at renderApplication.js:33) in RCTView (at View.js:60) in View (at AppContainer.js:102) in _class (at index.js:64) in RCTView (at View.js:60) in View (at index.js:63) in RootSiblingsWrapper (at AppContainer.js:119) in RCTView (at View.js:60) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:32)

[tarunkonda123]

Thanks @cesardeazevedo My issue is resolved

[cesardeazevedo]

Glad that you solved, can you share what exactly was your issue?

[psi9730]

i solve problem, I'm sorry it is my mistake not add some other information on mainapplication.java

[cesardeazevedo]

Glad that you both solved the issue.