React-native-reanimated-bottom-sheet: Android - Attemp to invoke virtual method 'double java.lang.Double.doubleValue()' on a null object reference

Created on 7 Oct 2019 · 2Comments · Source: osdnk/react-native-reanimated-bottom-sheet

bug_screenshot

My environment info:

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 127.21 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28
      Build Tools: 25.0.0, 25.0.2, 26.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.2, 28.0.3
      System Images: android-16 | Google APIs Intel x86 Atom, android-19 | Intel x86 Atom, android-22 | Intel x86 Atom, android-22 | Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.1 => 0.61.1

My package.json:

"dependencies": {
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.61.1",
    "react-native-barcode-mask": "^1.1.0",
    "react-native-calendar-picker": "^6.0.1",
    "react-native-camera": "^3.6.0",
    "react-native-flash-message": "^0.1.15",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-modals": "^0.19.8",
    "react-native-reanimated": "^1.3.0",
    "react-native-screens": "^2.0.0-alpha.3",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.9.3",
    "react-redux": "^7.1.1",
    "reanimated-bottom-sheet": "^1.0.0-alpha.14",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },

My render code works fine when the screen first starts:

renderBottomSheetSearchStaff = () => {
    return (
      <BottomSheet
        ref={ref => {
          this.bottomSheetStaffRef = ref;
        }}
        snapPoints={[0, SNAP_TO_INDEX_BOTTOM_SHEET]}
        renderHeader={}
        renderContent={}
      />
    );
  };

But when I click a button and get the this.bottomSheetStaffRef.snapTo(index). It starts showing up the red screen on Android.

  onSelectBoxStaffPress = () => {
    this.bottomSheetStaffRef.snapTo(700);
  };

Source

papercoding

Most helpful comment

@papercoding I probably found at least 2 mistakes in your code. SnapPoints it is a array of numbers (points for snapping) not indexes. So that why you need to put in this array only numbers of height. For example:

renderBottomSheetSearchStaff = () => {
const FULL_SCREEN_HEIGHT = Dimension.get('window').height;
    return (
      <BottomSheet
        ref={ref => {
          this.bottomSheetStaffRef = ref;
        }}
        snapPoints={[0, FULL_SCREEN_HEIGHT / 2, FULL_SCREEN_HEIGHT]}
        renderHeader={() => <View />}
        renderContent={() => <View />}
      />
    );
  };

And second mistake that snapTo() accept index not height number!

blohamen on 7 Oct 2019

❤2

All 2 comments

renderBottomSheetSearchStaff = () => {
const FULL_SCREEN_HEIGHT = Dimension.get('window').height;
    return (
      <BottomSheet
        ref={ref => {
          this.bottomSheetStaffRef = ref;
        }}
        snapPoints={[0, FULL_SCREEN_HEIGHT / 2, FULL_SCREEN_HEIGHT]}
        renderHeader={() => <View />}
        renderContent={() => <View />}
      />
    );
  };

And second mistake that snapTo() accept index not height number!

blohamen on 7 Oct 2019

❤2

This is the problem "And second mistake that snapTo() accept index not height number!"