mohtada-h / react-native-nested-scrollview Goto Github PK

View Code? Open in Web Editor NEW

21.0 2.0 13.0 147 KB

React native wrapper for android NestedScrollView

License: MIT License

JavaScript 52.97% Java 47.03%

react-native android nestedscrollview

react-native-nested-scrollview's Introduction

react-native-nested-scrollview

React native wrapper for android NestedScrollView. It's extract from react-native-bottom-sheet-behavior

Install

$ npm install react-native-nested-scrollview

Install with RNPM

$ react-native link react-native-nested-scrollview

Install Manually

Edit the current files as follows.

MainApplication.java

+   import com.mohtada.nestedscrollview.NestedScrollViewPackage;

    public class MainApplication extends Application implements ReactApplication {

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

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-nested-scrollview')
    }

android/settings.gradle

include ':app'

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

Usage

You should use NestedScrollView instead of ScrollView.

    import NestedScrollView from 'react-native-nested-scrollview';

    render() {
      return (
          <NestedScrollView>
            <NestedScrollView>
            </NestedScrollView>
          </NestedScrollView>
      );
    }

react-native-nested-scrollview's People

Contributors

Stargazers

Watchers

Forkers

digitalhobo jmfirth vansonleung nyl000 cbartondock terragotech magestein xujinna ovcovc

react-native-nested-scrollview's Issues

You saved my life bro! I love you !

Compilation failed in React Native 0.48.3

Hey, @mohtada-h !

In React Native `0.48.3` I got some errors:

[ReactNestedScrollViewHelper]: ScrollEvent.obtain method signature has changed. Added 2 additional parameters (xVelocity, yVelocity)
[ReactNestedScrollViewManager]: ScrollEventType does not has ANIMATION_END
[ReactNestedScrollViewPackage]: createJSModules - does not override method from its superclass

ScrollEvent

ScrollEvent's obtaib now has the following signature:

public static ScrollEvent obtain(
      int viewTag,
      ScrollEventType scrollEventType,
      int scrollX,
      int scrollY,
      float xVelocity,
      float yVelocity,
      int contentWidth,
      int contentHeight,
      int scrollViewWidth,
      int scrollViewHeight) {

ScrollEventType

ScrollEventType now it looks like this:

public enum ScrollEventType {
  BEGIN_DRAG("topScrollBeginDrag"),
  END_DRAG("topScrollEndDrag"),
  SCROLL("topScroll"),
  MOMENTUM_BEGIN("topMomentumScrollBegin"),
  MOMENTUM_END("topMomentumScrollEnd");
...
}

public static Map createExportedCustomDirectEventTypeConstants() {
    return MapBuilder.builder()
        .put(ScrollEventType.SCROLL.getJSEventName(), MapBuilder.of("registrationName", "onScroll"))
        .put(ScrollEventType.BEGIN_DRAG.getJSEventName(), MapBuilder.of("registrationName", "onScrollBeginDrag"))
        .put(ScrollEventType.END_DRAG.getJSEventName(), MapBuilder.of("registrationName", "onScrollEndDrag"))
        .put(ScrollEventType.MOMENTUM_BEGIN.getJSEventName(), MapBuilder.of("registrationName", "onMomentumScrollBegin"))
        .put(ScrollEventType.MOMENTUM_END.getJSEventName(), MapBuilder.of("registrationName", "onMomentumScrollEnd"))
        .build();
  }

ReactPackage

ReactPackage interface now has only 2 methods:

public interface ReactPackage {

  /**
   * @param reactContext react application context that can be used to create modules
   * @return list of native modules to register with the newly created catalyst instance
   */
  List<NativeModule> createNativeModules(ReactApplicationContext reactContext);

  /**
   * @return a list of view managers that should be registered with {@link UIManagerModule}
   */
  List<ViewManager> createViewManagers(ReactApplicationContext reactContext);
}

I was able to run the project after deleting ScrollEventType.ANIMATION_END, createJSModules and passing random values to velocity parameters.

Please take a look at this problem and do appropriate updates.

Thanks!

use {@link ReactHorizontalScrollView}.

Unable to understand how should i use it for nested horizontal scroll.

Nested scrollview stuck at the bottom

I'm having this issue when I scroll down inside a BottomSheetBehavior, the NestedScrollView stuck at the bottom, and when I try to scroll up it jumps back to bottom..

I also couldn't apply that fix.
https://stackoverflow.com/questions/37691748/nested-scrollview-automatically-scrolls-to-bottom