React Native ViewPagerAndroid with multiple visible pages

Question

I am trying to use ViewPagerAndroid to show a carousel with “stops” for each item, for example:

The native-carousel reaction appears and the native-swiper reaction does not support these features on Android yet. I have my own ViewPager that does what I need, but I am having problems integrating it into the React Native environment.

The CarouselContainer native component uses layout.xml and expects a ViewPager subcomponent.

     <com.mycompany.ui.CarouselContainer
        android:id="@+id/pager_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="190dp"
            android:layout_height="280dp"
            android:layout_gravity="center_horizontal" />

    </com.mycompany.ui.CarouselContainer >

CarouselContainer is a subclass of FrameLayout that gets a reference to the ViewPager in its method onFinishInflate. It calls setPageMarginon the ViewPager and setClipChildren(false)to simultaneously display multiple pages of the ViewPager on the screen.

ViewPagerAndroid, , ViewPager, ReactViewPagerManager. ReactViewPagerManager ViewPager ViewGroupManager.

, ReactViewPagerManager CarouselViewPagerManager ReactViewPager CarouselViewPager.

- CarouselViewPagerContainer. , , , . xml, , onFinishInflate.

- , . , , CarouselViewPagerContainer, , . LayoutShadowNode? CarouselViewPager , ?

SimpleViewManager.: (

// Copy of ReactViewPagerManager
public class CarouselViewPagerManager extends ViewGroupManager<CarouselViewPagerContainer> {

    @Override
    protected CarouselViewPagerContainer createViewInstance(ThemedReactContext reactContext) {
        return new CarouselViewPagerContainer(reactContext);
    }

    // ...

    @Override
    public void addView(CarouselViewPagerContainer parent, View child, int index) {
        parent.addViewToAdapter(child, index);
    }

    @Override
    public int getChildCount(CarouselViewPagerContainer parent) {
        // Should the CarouselViewPager be also counted?
        return parent.getViewCountInAdapter();
    }

    @Override
    public View getChildAt(CarouselViewPagerContainer parent, int index) {
        return parent.getViewFromAdapter(index);
    }

    @Override
    public void removeViewAt(CarouselViewPagerContainer parent, int index) {
        parent.removeViewFromAdapter(index);
    }

}


public class CarouselViewPagerContainer extends FrameLayout implements ViewPager.OnPageChangeListener {

    private final CarouselViewPager mPager; // Copy of ReactViewPager

    public CarouselViewPagerContainer(ReactContext context) {
        mPager = new CarouselViewPager(context);
    }

    // ...

    // Pass through to the CarouselViewPager
    public void setCurrentItemFromJs(int item, boolean animated) {
        mPager.setCurrentItemFromJs(item, animated);
    }

    /*package*/ void addViewToAdapter(View child, int index) {
        mPager.addViewToAdapter(child, index);
    }

    /*package*/ void removeViewFromAdapter(int index) {
        mPager.removeViewFromAdapter(index);
    }

    /*package*/ int getViewCountInAdapter() {
        return mPager.getViewCountInAdapter();
    }

    /*package*/ View getViewFromAdapter(int index) {
        return mPager.getViewFromAdapter(index);
    }
}

, !

, , FrameLayout, - Viewpager , .:/

: (