Merge next branch into master (#289)

Co-authored-by: Piotr Trocki <[email protected]>
Co-authored-by: Alpha <[email protected]>
Co-authored-by: ptrocki <[email protected]>
Co-authored-by: Mateusz Wit <[email protected]>
Co-authored-by: Mateusz Wit <[email protected]>
Co-authored-by: Arkadiusz Kubaczkowski <[email protected]>
Co-authored-by: Arkadiusz Kubaczkowski <[email protected]>

Author: 8 people

README.md

@@ -1,4 +1,4 @@
-# react-native-viewpager
+# react-native-viewpager <img src="docs/viewpager-logo.png" alt="ViewPager" width="24" height="24">
 
 [![CircleCI branch](https://img.shields.io/circleci/build/github/callstack/react-native-viewpager/master.svg)](https://circleci.com/gh/callstack/react-native-viewpager/tree/master)
 [![npm package](https://badge.fury.io/js/%40react-native-community%2Fviewpager.svg)](https://badge.fury.io/js/%40react-native-community%2Fviewpager)
@@ -7,27 +7,25 @@
 
 This component allows the user to swipe left and right through pages of data. Under the hood it is using the native [Android ViewPager](https://developer.android.com/reference/android/support/v4/view/ViewPager) and the [iOS UIPageViewController](https://developer.apple.com/documentation/uikit/uipageviewcontroller) implementations. [See it in action!](https://github.com/react-native-community/react-native-viewpager#preview)
 
-<img src="docs/viewpager-logo.png" alt="ViewPager" width="500" height="500">
-
-## Versions
-
-| 1.x              | 2.x              | 3.x              | 4.0.x, 4.1.x       | >= 4.2.x                                                                                               |
-| ---------------- | -------------    | -------------    | -------------      | -------------                                                                                       |
-|                  | iOS support      | iOS support      | iOS support        | iOS support                                                                                         |
-| Android support  | Android support  | AndroidX support | ViewPager2 support | [Reverted to 3.3.0](https://github.com/callstack/react-native-viewpager/issues/233#issue-711000654) |
+<br/>
+<p align="center">
+  <img src="docs/vp-carousel.gif" alt="ViewPager" width="300">
+</p>
 
+<br/>
 
-## Experimental version
-
-[ViewPager2](https://developer.android.com/jetpack/androidx/releases/viewpager2) for Android uses another implementation than ViewPager1, hence it caused lots of issues. You can try experimental version using below command 
+## Versions
 
-`yarn add @react-native-community/viewpager@next`
+| 3.x                | ~~4.0.x, 4.1.x~~  | >= 4.2.x                                                                                            | 5.x
+| -------------      | -------------     | -------------                                                                                       | -------------       |
+| iOS support        | Deprecated        | iOS support                                                                                         | iOS support         |
+| ViewPager1 support | Deprecated        | [Reverted to 3.3.0](https://github.com/callstack/react-native-viewpager/issues/233#issue-711000654) | ViewPager2 support  |
 
 ## Getting started
 
 `yarn add @react-native-community/viewpager`
 
-## Linking 
+## Linking
 
 ### >= 0.60
 
@@ -50,6 +48,7 @@ Follow the [instructions in the React Native documentation](https://facebook.git
 ```ruby
 pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/viewpager'
 ```
+
 </details>
 
 <details>
@@ -58,12 +57,14 @@ pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/
 Make the following changes:
 
 #### `android/settings.gradle`
+
 ```groovy
 include ':@react-native-community_viewpager'
 project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')
 ```
 
 #### `android/app/build.gradle`
+
 ```groovy
 dependencies {
    ...
@@ -72,6 +73,7 @@ dependencies {
 ```
 
 #### `android/app/src/main/.../MainApplication.java`
+
 On top, where imports are:
 
 ```java
@@ -89,6 +91,7 @@ protected List<ReactPackage> getPackages() {
   );
 }
 ```
+
 </details>
 
 ## Usage
@@ -119,10 +122,11 @@ const styles = StyleSheet.create({
 ```
 
 **Attention:** Note that you can only use `View` components as children of `ViewPager` (cf. folder */example*)
-. For Android if `View` has own children, set prop `collapsable` to false https://reactnative.dev/docs/view#collapsable, otherwise react-native might remove those children views and  and it's children will be rendered as separate pages
+. For Android if `View` has own children, set prop `collapsable` to false <https://reactnative.dev/docs/view#collapsable>, otherwise react-native might remove those children views and  and it's children will be rendered as separate pages
 
 ## Advanced usage
-For advanced usage please take a look into our [example project](https://github.com/callstack/react-native-viewpager/blob/master/example/src/BasicViewPagerExample.tsx) 
+
+For advanced usage please take a look into our [example project](https://github.com/callstack/react-native-viewpager/blob/master/example/src/BasicViewPagerExample.tsx)
 
 ## API
 
@@ -139,6 +143,37 @@ For advanced usage please take a look into our [example project](https://github.
 |`transitionStyle: TransitionStyle`|Use `scroll` or `curl` to change transition style (it does **not** work dynamically)|iOS
 |`showPageIndicator: boolean`|Shows the dots indicator at the bottom of the view|iOS
 |`overScrollMode: OverScollMode`|Used to override default value of overScroll mode. Can be `auto`, `always` or `never`. Defaults to `auto`|Android
+|`offscreenPageLimit: number`|Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0.|Android
+|`overdrag: boolean`|Allows for overscrolling after reaching the end or very beginning or pages|iOS
+
+## Development workflow
+
+To get started with the project, run `yarn bootstrap` in the root directory to install the required dependencies.
+
+```sh
+yarn bootstrap
+```
+
+While developing, you can run the example to check your changes
+
+```sh
+cd example
+yarn android
+yarn ios
+```
+
+Before sending a pull rquest, make sure your code passes TypeScript and ESLint. Run the following to verify:
+
+```sh
+yarn typescript
+yarn lint
+```
+
+To fix formatting errors, run the following:
+
+```sh
+yarn lint --fix
+```
 
 ## Preview
 

android/build.gradle

@@ -38,4 +38,5 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     api 'com.facebook.react:react-native:+'
+    implementation 'androidx.viewpager2:viewpager2:1.0.0'
 }

android/src/main/java/com/reactnativecommunity/viewpager/FragmentAdapter.java

@@ -0,0 +1,72 @@
+package com.reactnativecommunity.viewpager;
+
+import android.view.View;
+import android.view.ViewGroup;
+
+import androidx.annotation.NonNull;
+import androidx.fragment.app.Fragment;
+import androidx.fragment.app.FragmentActivity;
+import androidx.viewpager2.adapter.FragmentStateAdapter;
+
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class FragmentAdapter extends FragmentStateAdapter {
+    private List<View> childrenViews = new ArrayList<>();
+    public FragmentAdapter(@NonNull FragmentActivity fragmentActivity) {
+        super(fragmentActivity);
+    }
+
+
+    @NonNull
+    @Override
+    public Fragment createFragment(int position) {
+        return new ViewPagerFragment(childrenViews.get(position));
+    }
+
+    @Override
+    public int getItemCount() {
+        return childrenViews.size();
+    }
+
+    @Override
+    public long getItemId(int position) {
+        return childrenViews.get(position).getId();
+    }
+
+    @Override
+    public boolean containsItem(long itemId) {
+        for(View child: childrenViews) {
+            if((int) itemId == child.getId()) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    public void addFragment(View child, int index) {
+        childrenViews.add(index, child);
+        notifyItemInserted(index);
+    }
+
+    public void removeFragment(View child) {
+        int index = childrenViews.indexOf(child);
+        removeFragmentAt(index);
+    }
+
+    public void removeFragmentAt(int index) {
+        childrenViews.remove(index);
+        notifyItemRemoved(index);
+    }
+
+    public void removeAll() {
+        childrenViews.clear();
+        notifyDataSetChanged();
+    }
+
+    public View getChildViewAt(int index) {
+        return childrenViews.get(index);
+    }
+}