diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f7494768..202500b2 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -4,9 +4,11 @@ on:
   pull_request:
     branches:
       - master
+      - next
   push:
     branches:
       - master
+      - next
 
 concurrency: 
   group: ${{ github.ref }}-js
diff --git a/README.md b/README.md
index a5e301f2..827cecf9 100644
--- a/README.md
+++ b/README.md
@@ -169,6 +169,8 @@ For advanced usage please take a look into our [example project](https://github.
 
 | Prop                                                                 |                                                                                                                             Description                                                                                                                             | Platform |
 | -------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: |
+| `page: number`                                                        |                                                                                                            Index of page to be displayed                                                                                                         |   both   |
+| `animated: boolean`                                                        |                                                                                                            Should transition between pages be animated                                                                                                            |   both   |
 | `initialPage`                                                        |                                                                                                            Index of initial page that should be selected                                                                                                            |   both   |
 | `scrollEnabled: boolean`                                             |                                                                                                            Should pager view scroll, when scroll enabled                                                                                                            |   both   |
 | `onPageScroll: (e: PageScrollEvent) => void`                         |                                                    Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages)                                                    |   both   |
@@ -184,8 +186,8 @@ For advanced usage please take a look into our [example project](https://github.
 
 | Method                                     |                                                                                                         Description                                                                                                          | Platform |
 | ------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: |
-| `setPage(index: number)`                   |                                                                      Function to scroll to a specific page in the PagerView. Invalid index is ignored.                                                                       |   both   |
-| `setPageWithoutAnimation(index: number)`   |                                                                      Function to scroll to a specific page in the PagerView. Invalid index is ignored.                                                                       |   both   |
+| `setPage(index: number)`                   |                                                                      Function to scroll to a specific page in the PagerView. Invalid index is ignored. The recommended way is using the `page` and `animated` props                                                         |   both   |
+| `setPageWithoutAnimation(index: number)`   |                                                                      Function to scroll to a specific page in the PagerView. Invalid index is ignored. The recommended way is using the `page` and `animated` props                                                                       |   both   |
 | `setScrollEnabled(scrollEnabled: boolean)` | A helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) |   both   |
 
 ## Contributing
diff --git a/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt b/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt
index f6a284bf..1145a5c1 100644
--- a/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt
+++ b/android/src/fabric/java/com/reactnativepagerview/PagerViewViewManager.kt
@@ -105,6 +105,16 @@ class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>(), RNCViewPa
         return PagerViewViewManagerImpl.needsCustomLayoutForChildren()
     }
 
+    @ReactProp(name = "page")
+    override fun setPage(view: NestedScrollableHost?, value: Int) {
+        goTo(view, value, PagerViewViewManagerImpl.animated)
+    }
+
+    @ReactProp(name = "animated", defaultBoolean = true)
+    override fun setAnimated(view: NestedScrollableHost?, value: Boolean) {
+        PagerViewViewManagerImpl.animated = value
+    }
+
     @ReactProp(name = "scrollEnabled", defaultBoolean = true)
     override fun setScrollEnabled(view: NestedScrollableHost?, value: Boolean) {
         if (view != null) {
@@ -181,7 +191,7 @@ class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>(), RNCViewPa
         }
     }
 
-    override fun setPage(view: NestedScrollableHost?, selectedPage: Int) {
+    override fun setPageWithAnimation(view: NestedScrollableHost?, selectedPage: Int) {
         goTo(view, selectedPage, true)
     }
 
diff --git a/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt b/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt
index 0abf6682..ab6d14f4 100644
--- a/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt
+++ b/android/src/main/java/com/reactnativepagerview/PagerViewViewManagerImpl.kt
@@ -7,6 +7,8 @@ import com.facebook.react.uimanager.PixelUtil
 object PagerViewViewManagerImpl {
     const val NAME = "RNCViewPager"
 
+    var animated = true
+
     fun getViewPager(view: NestedScrollableHost): ViewPager2 {
         if (view.getChildAt(0) is ViewPager2) {
             return view.getChildAt(0) as ViewPager2
diff --git a/android/src/paper/java/com/reactnativepagerview/PagerViewViewManager.kt b/android/src/paper/java/com/reactnativepagerview/PagerViewViewManager.kt
index 2a093a63..89f9b2ab 100644
--- a/android/src/paper/java/com/reactnativepagerview/PagerViewViewManager.kt
+++ b/android/src/paper/java/com/reactnativepagerview/PagerViewViewManager.kt
@@ -95,6 +95,25 @@ class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>() {
         return PagerViewViewManagerImpl.needsCustomLayoutForChildren()
     }
 
+    @ReactProp(name = "page")
+    fun setPage(host: NestedScrollableHost, pageIndex: Int) {
+        val view = PagerViewViewManagerImpl.getViewPager(host)
+        Assertions.assertNotNull(view)
+        Assertions.assertNotNull(pageIndex)
+        val childCount = view.adapter?.itemCount
+        val animated = PagerViewViewManagerImpl.animated
+        val canScroll = childCount != null && childCount > 0 && pageIndex >= 0 && pageIndex < childCount
+        if (canScroll) {
+            PagerViewViewManagerImpl.setCurrentItem(view, pageIndex, animated)
+            eventDispatcher.dispatchEvent(PageSelectedEvent(host.id, pageIndex))
+        }
+    }
+
+    @ReactProp(name = "animated", defaultBoolean = true)
+    fun setAnimated(host: NestedScrollableHost, value: Boolean) {
+        PagerViewViewManagerImpl.animated = value
+    }
+
     @ReactProp(name = "scrollEnabled", defaultBoolean = true)
     fun setScrollEnabled(host: NestedScrollableHost, value: Boolean) {
         PagerViewViewManagerImpl.setScrollEnabled(host, value)
@@ -165,7 +184,7 @@ class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>() {
     }
 
     companion object {
-        private const val COMMAND_SET_PAGE = "setPage"
+        private const val COMMAND_SET_PAGE = "setPageWithAnimation"
         private const val COMMAND_SET_PAGE_WITHOUT_ANIMATION = "setPageWithoutAnimation"
         private const val COMMAND_SET_SCROLL_ENABLED = "setScrollEnabledImperatively"
     }
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h
new file mode 100644
index 00000000..b5b1b1df
--- /dev/null
+++ b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h
@@ -0,0 +1,12 @@
+#pragma once
+
+#include "RNCViewPagerShadowNode.h"
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using RNCViewPagerComponentDescriptor = ConcreteComponentDescriptor<RNCViewPagerShadowNode>;
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp
new file mode 100644
index 00000000..a81506ac
--- /dev/null
+++ b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp
@@ -0,0 +1,35 @@
+#include "RNCViewPagerShadowNode.h"
+
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/LayoutMetrics.h>
+
+namespace facebook {
+namespace react {
+
+const char RNCViewPagerComponentName[] = "RNCViewPager";
+
+void RNCViewPagerShadowNode::updateStateIfNeeded() {
+    ensureUnsealed();
+    
+    auto contentBoundingRect = Rect{};
+    for (const auto &childNode : getLayoutableChildNodes()) {
+        contentBoundingRect.unionInPlace(childNode->getLayoutMetrics().frame);
+    }
+    
+    auto state = getStateData();
+    
+    if (state.contentBoundingRect != contentBoundingRect) {
+        state.contentBoundingRect = contentBoundingRect;
+        setStateData(std::move(state));
+    }
+}
+
+#pragma mark - LayoutableShadowNode
+
+void RNCViewPagerShadowNode::layout(LayoutContext layoutContext) {
+    ConcreteViewShadowNode::layout(layoutContext);
+    updateStateIfNeeded();
+}
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h
new file mode 100644
index 00000000..1aaece35
--- /dev/null
+++ b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h
@@ -0,0 +1,31 @@
+#pragma once
+
+#include <react/renderer/components/RNCViewPager/EventEmitters.h>
+#include <react/renderer/components/RNCViewPager/Props.h>
+#include <react/renderer/components/RNCViewPager/RNCViewPagerState.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook {
+namespace react {
+
+extern const char RNCViewPagerComponentName[];
+
+class RNCViewPagerShadowNode final : public ConcreteViewShadowNode<
+                                                RNCViewPagerComponentName,
+                                                RNCViewPagerProps,
+                                                RNCViewPagerEventEmitter,
+                                                RNCViewPagerState> {
+public:
+    using ConcreteViewShadowNode::ConcreteViewShadowNode;
+    
+#pragma mark - LayoutableShadowNode
+    
+    void layout(LayoutContext layoutContext) override;
+    
+private:
+    void updateStateIfNeeded();
+};
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp
new file mode 100644
index 00000000..a99afaff
--- /dev/null
+++ b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp
@@ -0,0 +1,11 @@
+#include "RNCViewPagerState.h"
+
+namespace facebook {
+namespace react {
+
+Size RNCViewPagerState::getContentSize() const {
+    return contentBoundingRect.size;
+}
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h
new file mode 100644
index 00000000..ac43dadf
--- /dev/null
+++ b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h
@@ -0,0 +1,18 @@
+#pragma once
+
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+class RNCViewPagerState final {
+public:
+    Point contentOffset;
+    Rect contentBoundingRect;
+    
+    Size getContentSize() const;
+    
+};
+
+}
+}
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 798085e7..e75983d6 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -302,7 +302,7 @@ PODS:
   - React-jsinspector (0.70.5)
   - React-logger (0.70.5):
     - glog
-  - react-native-pager-view (6.1.1):
+  - react-native-pager-view (6.1.2):
     - React-Core
   - react-native-safe-area-context (3.4.1):
     - React-Core
@@ -617,7 +617,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b
   React-jsinspector: badd81696361249893a80477983e697aab3c1a34
   React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
-  react-native-pager-view: 3c66c4e2f3ab423643d07b2c7041f8ac48395f72
+  react-native-pager-view: 54bed894cecebe28cede54c01038d9d1e122de43
   react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
   React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
   React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247
diff --git a/example/src/BasicPagerViewExample.tsx b/example/src/BasicPagerViewExample.tsx
index 6c20a89e..b54ca421 100644
--- a/example/src/BasicPagerViewExample.tsx
+++ b/example/src/BasicPagerViewExample.tsx
@@ -18,6 +18,8 @@ export function BasicPagerViewExample() {
         //@ts-ignore
         testID="pager-view"
         ref={ref}
+        page={navigationPanel.page}
+        animated={navigationPanel.animated}
         style={styles.PagerView}
         initialPage={0}
         layoutDirection="ltr"
diff --git a/example/src/NestPagerView.tsx b/example/src/NestPagerView.tsx
index f455c06c..5598b1c4 100644
--- a/example/src/NestPagerView.tsx
+++ b/example/src/NestPagerView.tsx
@@ -20,12 +20,12 @@ export function NestPagerView() {
       >
         <View
           key="1"
-          style={{ backgroundColor: BGCOLOR[0] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[0] }]}
           collapsable={false}
         >
           <LikeCount />
         </View>
-        <View key="2" collapsable={false}>
+        <View style={styles.page} key="2" collapsable={false}>
           <Text style={styles.title}>
             There has two Nest PagerView with horizontal and vertical.
           </Text>
@@ -39,7 +39,7 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[1] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[1] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -47,7 +47,7 @@ export function NestPagerView() {
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[2] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[2] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -64,7 +64,7 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[3] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -72,7 +72,7 @@ export function NestPagerView() {
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[4] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[4] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -82,7 +82,7 @@ export function NestPagerView() {
         </View>
         <View
           key="3"
-          style={{ backgroundColor: BGCOLOR[3] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
           collapsable={false}
         >
           <LikeCount />
@@ -105,5 +105,8 @@ const styles = StyleSheet.create({
   PagerView: {
     flex: 1,
   },
+  page: {
+    flex: 1,
+  },
   title: { fontSize: 22, paddingVertical: 10 },
 });
diff --git a/example/src/OnPageScrollExample.tsx b/example/src/OnPageScrollExample.tsx
index cbe22917..18db856b 100644
--- a/example/src/OnPageScrollExample.tsx
+++ b/example/src/OnPageScrollExample.tsx
@@ -10,7 +10,7 @@ const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 export function OnPageScrollExample() {
   const { ref, ...navigationPanel } = useNavigationPanel(5);
-  const { activePage, setPage, progress, pages } = navigationPanel;
+  const { page, setPage, progress, pages } = navigationPanel;
 
   return (
     <SafeAreaView style={styles.flex}>
@@ -22,7 +22,7 @@ export function OnPageScrollExample() {
                 <Text
                   style={[
                     styles.touchableTitle,
-                    activePage === index && styles.touchableTitleActive,
+                    page === index && styles.touchableTitleActive,
                   ]}
                 >
                   Page {index}
diff --git a/example/src/PaginationDotsExample.tsx b/example/src/PaginationDotsExample.tsx
index dd16f6e6..82899286 100644
--- a/example/src/PaginationDotsExample.tsx
+++ b/example/src/PaginationDotsExample.tsx
@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
   },
   progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
   center: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     alignContent: 'center',
diff --git a/example/src/component/NavigationPanel/ControlPanel.tsx b/example/src/component/NavigationPanel/ControlPanel.tsx
index 3d3ca71c..fb526637 100644
--- a/example/src/component/NavigationPanel/ControlPanel.tsx
+++ b/example/src/component/NavigationPanel/ControlPanel.tsx
@@ -5,8 +5,8 @@ import { ProgressBar } from '../ProgressBar';
 import type { NavigationPanelProps } from './types';
 
 export function ControlsPanel({
-  activePage,
-  isAnimated,
+  page,
+  animated,
   pages,
   scrollState,
   scrollEnabled,
@@ -21,14 +21,8 @@ export function ControlsPanel({
   toggleOverdrag,
 }: NavigationPanelProps) {
   const firstPage = useCallback(() => setPage(0), [setPage]);
-  const prevPage = useCallback(() => setPage(activePage - 1), [
-    activePage,
-    setPage,
-  ]);
-  const nextPage = useCallback(() => setPage(activePage + 1), [
-    setPage,
-    activePage,
-  ]);
+  const prevPage = useCallback(() => setPage(page - 1), [page, setPage]);
+  const nextPage = useCallback(() => setPage(page + 1), [setPage, page]);
   const lastPage = useCallback(() => setPage(pages.length - 1), [
     pages.length,
     setPage,
@@ -64,7 +58,7 @@ export function ControlsPanel({
       <View style={styles.buttons}>
         <Button
           testID="add-page-button"
-          text={isAnimated ? 'Turn off animations' : 'Turn animations back on'}
+          text={animated ? 'Turn off animations' : 'Turn animations back on'}
           onPress={toggleAnimation}
         />
         <View style={styles.scrollState}>
@@ -77,31 +71,31 @@ export function ControlsPanel({
         <Button
           testID="start-page-button"
           text="Start"
-          disabled={activePage === 0}
+          disabled={page === 0}
           onPress={firstPage}
         />
         <Button
           testID="prev-page-button"
           text="Prev"
-          disabled={activePage === 0}
+          disabled={page === 0}
           onPress={prevPage}
         />
         <Button
           testID="next-page-button"
           text="Next"
-          disabled={activePage === pages.length - 1}
+          disabled={page === pages.length - 1}
           onPress={nextPage}
         />
         <Button
           testID="last-page-button"
           text="Last"
-          disabled={activePage === pages.length - 1}
+          disabled={page === pages.length - 1}
           onPress={lastPage}
         />
       </View>
       <View style={styles.progress}>
         <Text style={styles.buttonText}>
-          Page {activePage + 1} / {pages.length}{' '}
+          Page {page + 1} / {pages.length}{' '}
         </Text>
         <ProgressBar numberOfPages={pages.length} progress={progress} />
       </View>
diff --git a/example/src/hook/useNavigationPanel.ts b/example/src/hook/useNavigationPanel.ts
index e5b0d0c7..17d779d2 100644
--- a/example/src/hook/useNavigationPanel.ts
+++ b/example/src/hook/useNavigationPanel.ts
@@ -27,8 +27,8 @@ export function useNavigationPanel(
   const [pages, setPages] = useState<CreatePage[]>(
     useMemo(() => getBasePages(pagesAmount), [pagesAmount])
   );
-  const [activePage, setActivePage] = useState(0);
-  const [isAnimated, setIsAnimated] = useState(true);
+  const [page, setPage] = useState(0);
+  const [animated, setAnimated] = useState(true);
   const [overdragEnabled, setOverdragEnabled] = useState(false);
   const [scrollEnabled, setScrollEnabled] = useState(true);
   const [scrollState, setScrollState] = useState('idle');
@@ -38,14 +38,6 @@ export function useNavigationPanel(
   const onPageScrollPosition = useRef(new Animated.Value(0)).current;
   const onPageSelectedPosition = useRef(new Animated.Value(0)).current;
 
-  const setPage = useCallback(
-    (page: number) =>
-      isAnimated
-        ? ref.current?.setPage(page)
-        : ref.current?.setPageWithoutAnimation(page),
-    [isAnimated]
-  );
-
   const addLog = useCallback((log: EventLog) => {
     setLogs((text) => [log, ...text].slice(0, 100));
   }, []);
@@ -59,7 +51,7 @@ export function useNavigationPanel(
     []
   );
   const toggleAnimation = useCallback(
-    () => setIsAnimated((animated) => !animated),
+    () => setAnimated((prevAnimated) => !prevAnimated),
     []
   );
   const toggleScroll = useCallback(
@@ -112,7 +104,7 @@ export function useNavigationPanel(
               text: `Page: ${position}`,
               timestamp: new Date(),
             });
-            setActivePage(position);
+            setPage(position);
             onPageSelectedCallback(position);
           },
           useNativeDriver: true,
@@ -137,8 +129,8 @@ export function useNavigationPanel(
 
   return {
     ref,
-    activePage,
-    isAnimated,
+    page,
+    animated,
     pages,
     scrollState,
     scrollEnabled,
diff --git a/example/src/utils.ts b/example/src/utils.ts
index 8b178504..a3de68b3 100644
--- a/example/src/utils.ts
+++ b/example/src/utils.ts
@@ -23,6 +23,7 @@ export const createPage = (key: number): CreatePage => {
   return {
     key: key,
     style: {
+      flex: 1,
       backgroundColor: BGCOLOR[key % BGCOLOR.length],
       alignItems: 'center',
       padding: 20,
diff --git a/fabricexample/ios/Podfile.lock b/fabricexample/ios/Podfile.lock
index 16fd5b18..8f10d6b7 100644
--- a/fabricexample/ios/Podfile.lock
+++ b/fabricexample/ios/Podfile.lock
@@ -625,7 +625,16 @@ PODS:
   - React-jsinspector (0.70.5)
   - React-logger (0.70.5):
     - glog
-  - react-native-pager-view (6.1.1):
+  - react-native-pager-view (7.0.0-rc.0):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - react-native-pager-view/common (= 7.0.0-rc.0)
+    - React-RCTFabric
+    - ReactCommon/turbomodule/core
+  - react-native-pager-view/common (7.0.0-rc.0):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -1013,7 +1022,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b
   React-jsinspector: badd81696361249893a80477983e697aab3c1a34
   React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
-  react-native-pager-view: 22ef94ca5a46cb18e4573ed3e179f4f84d477490
+  react-native-pager-view: cf8a16a2f84215f444431f2fea40649e9d05504c
   react-native-safe-area-context: 2f75b317784a1a8e224562941e50ecbc932d2097
   React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
   React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247
diff --git a/fabricexample/src/BasicPagerViewExample.tsx b/fabricexample/src/BasicPagerViewExample.tsx
index 6c20a89e..b54ca421 100644
--- a/fabricexample/src/BasicPagerViewExample.tsx
+++ b/fabricexample/src/BasicPagerViewExample.tsx
@@ -18,6 +18,8 @@ export function BasicPagerViewExample() {
         //@ts-ignore
         testID="pager-view"
         ref={ref}
+        page={navigationPanel.page}
+        animated={navigationPanel.animated}
         style={styles.PagerView}
         initialPage={0}
         layoutDirection="ltr"
diff --git a/fabricexample/src/NestPagerView.tsx b/fabricexample/src/NestPagerView.tsx
index f455c06c..5598b1c4 100644
--- a/fabricexample/src/NestPagerView.tsx
+++ b/fabricexample/src/NestPagerView.tsx
@@ -20,12 +20,12 @@ export function NestPagerView() {
       >
         <View
           key="1"
-          style={{ backgroundColor: BGCOLOR[0] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[0] }]}
           collapsable={false}
         >
           <LikeCount />
         </View>
-        <View key="2" collapsable={false}>
+        <View style={styles.page} key="2" collapsable={false}>
           <Text style={styles.title}>
             There has two Nest PagerView with horizontal and vertical.
           </Text>
@@ -39,7 +39,7 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[1] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[1] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -47,7 +47,7 @@ export function NestPagerView() {
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[2] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[2] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -64,7 +64,7 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[3] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -72,7 +72,7 @@ export function NestPagerView() {
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[4] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[4] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -82,7 +82,7 @@ export function NestPagerView() {
         </View>
         <View
           key="3"
-          style={{ backgroundColor: BGCOLOR[3] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
           collapsable={false}
         >
           <LikeCount />
@@ -105,5 +105,8 @@ const styles = StyleSheet.create({
   PagerView: {
     flex: 1,
   },
+  page: {
+    flex: 1,
+  },
   title: { fontSize: 22, paddingVertical: 10 },
 });
diff --git a/fabricexample/src/OnPageScrollExample.tsx b/fabricexample/src/OnPageScrollExample.tsx
index cbe22917..18db856b 100644
--- a/fabricexample/src/OnPageScrollExample.tsx
+++ b/fabricexample/src/OnPageScrollExample.tsx
@@ -10,7 +10,7 @@ const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 export function OnPageScrollExample() {
   const { ref, ...navigationPanel } = useNavigationPanel(5);
-  const { activePage, setPage, progress, pages } = navigationPanel;
+  const { page, setPage, progress, pages } = navigationPanel;
 
   return (
     <SafeAreaView style={styles.flex}>
@@ -22,7 +22,7 @@ export function OnPageScrollExample() {
                 <Text
                   style={[
                     styles.touchableTitle,
-                    activePage === index && styles.touchableTitleActive,
+                    page === index && styles.touchableTitleActive,
                   ]}
                 >
                   Page {index}
diff --git a/fabricexample/src/PaginationDotsExample.tsx b/fabricexample/src/PaginationDotsExample.tsx
index dd16f6e6..82899286 100644
--- a/fabricexample/src/PaginationDotsExample.tsx
+++ b/fabricexample/src/PaginationDotsExample.tsx
@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
   },
   progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
   center: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     alignContent: 'center',
diff --git a/fabricexample/src/component/NavigationPanel/ControlPanel.tsx b/fabricexample/src/component/NavigationPanel/ControlPanel.tsx
index 3d3ca71c..fb526637 100644
--- a/fabricexample/src/component/NavigationPanel/ControlPanel.tsx
+++ b/fabricexample/src/component/NavigationPanel/ControlPanel.tsx
@@ -5,8 +5,8 @@ import { ProgressBar } from '../ProgressBar';
 import type { NavigationPanelProps } from './types';
 
 export function ControlsPanel({
-  activePage,
-  isAnimated,
+  page,
+  animated,
   pages,
   scrollState,
   scrollEnabled,
@@ -21,14 +21,8 @@ export function ControlsPanel({
   toggleOverdrag,
 }: NavigationPanelProps) {
   const firstPage = useCallback(() => setPage(0), [setPage]);
-  const prevPage = useCallback(() => setPage(activePage - 1), [
-    activePage,
-    setPage,
-  ]);
-  const nextPage = useCallback(() => setPage(activePage + 1), [
-    setPage,
-    activePage,
-  ]);
+  const prevPage = useCallback(() => setPage(page - 1), [page, setPage]);
+  const nextPage = useCallback(() => setPage(page + 1), [setPage, page]);
   const lastPage = useCallback(() => setPage(pages.length - 1), [
     pages.length,
     setPage,
@@ -64,7 +58,7 @@ export function ControlsPanel({
       <View style={styles.buttons}>
         <Button
           testID="add-page-button"
-          text={isAnimated ? 'Turn off animations' : 'Turn animations back on'}
+          text={animated ? 'Turn off animations' : 'Turn animations back on'}
           onPress={toggleAnimation}
         />
         <View style={styles.scrollState}>
@@ -77,31 +71,31 @@ export function ControlsPanel({
         <Button
           testID="start-page-button"
           text="Start"
-          disabled={activePage === 0}
+          disabled={page === 0}
           onPress={firstPage}
         />
         <Button
           testID="prev-page-button"
           text="Prev"
-          disabled={activePage === 0}
+          disabled={page === 0}
           onPress={prevPage}
         />
         <Button
           testID="next-page-button"
           text="Next"
-          disabled={activePage === pages.length - 1}
+          disabled={page === pages.length - 1}
           onPress={nextPage}
         />
         <Button
           testID="last-page-button"
           text="Last"
-          disabled={activePage === pages.length - 1}
+          disabled={page === pages.length - 1}
           onPress={lastPage}
         />
       </View>
       <View style={styles.progress}>
         <Text style={styles.buttonText}>
-          Page {activePage + 1} / {pages.length}{' '}
+          Page {page + 1} / {pages.length}{' '}
         </Text>
         <ProgressBar numberOfPages={pages.length} progress={progress} />
       </View>
diff --git a/fabricexample/src/hook/useNavigationPanel.ts b/fabricexample/src/hook/useNavigationPanel.ts
index e5b0d0c7..17d779d2 100644
--- a/fabricexample/src/hook/useNavigationPanel.ts
+++ b/fabricexample/src/hook/useNavigationPanel.ts
@@ -27,8 +27,8 @@ export function useNavigationPanel(
   const [pages, setPages] = useState<CreatePage[]>(
     useMemo(() => getBasePages(pagesAmount), [pagesAmount])
   );
-  const [activePage, setActivePage] = useState(0);
-  const [isAnimated, setIsAnimated] = useState(true);
+  const [page, setPage] = useState(0);
+  const [animated, setAnimated] = useState(true);
   const [overdragEnabled, setOverdragEnabled] = useState(false);
   const [scrollEnabled, setScrollEnabled] = useState(true);
   const [scrollState, setScrollState] = useState('idle');
@@ -38,14 +38,6 @@ export function useNavigationPanel(
   const onPageScrollPosition = useRef(new Animated.Value(0)).current;
   const onPageSelectedPosition = useRef(new Animated.Value(0)).current;
 
-  const setPage = useCallback(
-    (page: number) =>
-      isAnimated
-        ? ref.current?.setPage(page)
-        : ref.current?.setPageWithoutAnimation(page),
-    [isAnimated]
-  );
-
   const addLog = useCallback((log: EventLog) => {
     setLogs((text) => [log, ...text].slice(0, 100));
   }, []);
@@ -59,7 +51,7 @@ export function useNavigationPanel(
     []
   );
   const toggleAnimation = useCallback(
-    () => setIsAnimated((animated) => !animated),
+    () => setAnimated((prevAnimated) => !prevAnimated),
     []
   );
   const toggleScroll = useCallback(
@@ -112,7 +104,7 @@ export function useNavigationPanel(
               text: `Page: ${position}`,
               timestamp: new Date(),
             });
-            setActivePage(position);
+            setPage(position);
             onPageSelectedCallback(position);
           },
           useNativeDriver: true,
@@ -137,8 +129,8 @@ export function useNavigationPanel(
 
   return {
     ref,
-    activePage,
-    isAnimated,
+    page,
+    animated,
     pages,
     scrollState,
     scrollEnabled,
diff --git a/fabricexample/src/utils.ts b/fabricexample/src/utils.ts
index 8b178504..a3de68b3 100644
--- a/fabricexample/src/utils.ts
+++ b/fabricexample/src/utils.ts
@@ -23,6 +23,7 @@ export const createPage = (key: number): CreatePage => {
   return {
     key: key,
     style: {
+      flex: 1,
       backgroundColor: BGCOLOR[key % BGCOLOR.length],
       alignItems: 'center',
       padding: 20,
diff --git a/ios/Fabric/RNCPagerViewComponentView.h b/ios/Fabric/RNCPagerViewComponentView.h
index de276e0a..c8e772f4 100644
--- a/ios/Fabric/RNCPagerViewComponentView.h
+++ b/ios/Fabric/RNCPagerViewComponentView.h
@@ -7,17 +7,11 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RNCPagerViewComponentView : RCTViewComponentView <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
-
-@property(strong, nonatomic, readonly) UIPageViewController *nativePageViewController;
-@property(nonatomic, strong) NSMutableArray<UIViewController *> *nativeChildrenViewControllers;
-@property(nonatomic) NSInteger initialPage;
-@property(nonatomic) NSInteger currentIndex;
-@property(nonatomic) NSInteger destinationIndex;
-@property(nonatomic) NSString* layoutDirection;
+@interface RNCPagerViewComponentView : RCTViewComponentView <UIScrollViewDelegate>
+
 @property(nonatomic) BOOL overdrag;
 
-- (void)setPage:(NSInteger)number;
+- (void)setPageWithAnimation:(NSInteger)number;
 - (void)setPageWithoutAnimation:(NSInteger)number;
 
 @end
diff --git a/ios/Fabric/RNCPagerViewComponentView.mm b/ios/Fabric/RNCPagerViewComponentView.mm
index d4fd7a66..5c76ed32 100644
--- a/ios/Fabric/RNCPagerViewComponentView.mm
+++ b/ios/Fabric/RNCPagerViewComponentView.mm
@@ -2,7 +2,7 @@
 
 #import <Foundation/Foundation.h>
 #import "RNCPagerViewComponentView.h"
-#import <react/renderer/components/RNCViewPager/ComponentDescriptors.h>
+#import <RNCViewPager/RNCViewPagerComponentDescriptor.h>
 #import <react/renderer/components/RNCViewPager/EventEmitters.h>
 #import <react/renderer/components/RNCViewPager/Props.h>
 #import <react/renderer/components/RNCViewPager/RCTComponentViewHelpers.h>
@@ -15,42 +15,20 @@
 
 using namespace facebook::react;
 
-@interface RNCPagerViewComponentView () <RCTRNCViewPagerViewProtocol, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
+@interface RNCPagerViewComponentView () <RCTRNCViewPagerViewProtocol, UIScrollViewDelegate>
 @end
 
 @implementation RNCPagerViewComponentView {
-    LayoutMetrics _layoutMetrics;
-    UIScrollView *scrollView;
-}
+    RNCViewPagerShadowNode::ConcreteState::Shared _state;
+    UIScrollView *_scrollView;
+    UIView *_containerView;
+    
+    CGSize _contentSize;
 
-- (void)initializeNativePageViewController {
-    const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
-    NSDictionary *options = @{ UIPageViewControllerOptionInterPageSpacingKey: @(viewProps.pageMargin) };
-    UIPageViewControllerNavigationOrientation orientation = UIPageViewControllerNavigationOrientationHorizontal;
-    switch (viewProps.orientation) {
-        case RNCViewPagerOrientation::Horizontal:
-            orientation = UIPageViewControllerNavigationOrientationHorizontal;
-            break;
-        case RNCViewPagerOrientation::Vertical:
-            orientation = UIPageViewControllerNavigationOrientationVertical;
-            break;
-    }
-    _nativePageViewController = [[UIPageViewController alloc]
-                                 initWithTransitionStyle: UIPageViewControllerTransitionStyleScroll
-                                 navigationOrientation:orientation
-                                 options:options];
-    _nativePageViewController.dataSource = self;
-    _nativePageViewController.delegate = self;
-    _nativePageViewController.view.frame = self.frame;
-    self.contentView = _nativePageViewController.view;
-    
-    for (UIView *subview in _nativePageViewController.view.subviews) {
-        if([subview isKindOfClass:UIScrollView.class]){
-            ((UIScrollView *)subview).delegate = self;
-            ((UIScrollView *)subview).delaysContentTouches = NO;
-            scrollView = (UIScrollView *)subview;
-        }
-    }
+    NSInteger _page;
+    BOOL _animated;
+    
+    NSInteger _initialPage;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -58,197 +36,131 @@ - (instancetype)initWithFrame:(CGRect)frame
     if (self = [super initWithFrame:frame]) {
         static const auto defaultProps = std::make_shared<const RNCViewPagerProps>();
         _props = defaultProps;
-        _nativeChildrenViewControllers = [[NSMutableArray alloc] init];
-        _currentIndex = -1;
-        _destinationIndex = -1;
-        _layoutDirection = @"ltr";
-        _overdrag = NO;
+        _initialPage = -1;
+        
+        _page = -1;
+        _animated = true;
+        
+        _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
+        
+        _scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+        _scrollView.delaysContentTouches = NO;
+        _scrollView.delegate = self;
+        _scrollView.pagingEnabled = YES;
+        _scrollView.showsHorizontalScrollIndicator = NO;
+        _scrollView.showsVerticalScrollIndicator = NO;
+        
+        [self addSubview:_scrollView];
+        
+        _containerView = [[UIView alloc] initWithFrame:CGRectZero];
+        
+        [_scrollView addSubview:_containerView];
     }
     
     return self;
 }
 
-- (void)willMoveToSuperview:(UIView *)newSuperview {
-    if (newSuperview != nil) {
-        [self initializeNativePageViewController];
-        [self goTo:_currentIndex animated:NO];
-    }
-}
-
 
 #pragma mark - React API
 
-- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
-    UIViewController *wrapper = [[UIViewController alloc] initWithView:childComponentView];
-    [_nativeChildrenViewControllers insertObject:wrapper atIndex:index];
-}
-
-- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
-    [[_nativeChildrenViewControllers objectAtIndex:index].view removeFromSuperview];
-    [_nativeChildrenViewControllers objectAtIndex:index].view = nil;
-    [_nativeChildrenViewControllers removeObjectAtIndex:index];
- 
-    NSInteger maxPage = _nativeChildrenViewControllers.count - 1;
-    
-    if (self.currentIndex >= maxPage) {
-        [self goTo:maxPage animated:NO];
-    }
-}
-
-
--(void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics {
-    [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:_layoutMetrics];
-    self.contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
-    _layoutMetrics = layoutMetrics;
-}
-
-
--(void)prepareForRecycle {
-    [super prepareForRecycle];
-    
-    _nativeChildrenViewControllers = [[NSMutableArray alloc] init];
-    [_nativePageViewController.view removeFromSuperview];
-    _nativePageViewController = nil;
-    
-    _currentIndex = -1;
-}
-
-- (void)shouldDismissKeyboard:(RNCViewPagerKeyboardDismissMode)dismissKeyboard {
-    UIScrollViewKeyboardDismissMode dismissKeyboardMode = UIScrollViewKeyboardDismissModeNone;
-    switch (dismissKeyboard) {
-        case RNCViewPagerKeyboardDismissMode::None:
-            dismissKeyboardMode = UIScrollViewKeyboardDismissModeNone;
-            break;
-        case RNCViewPagerKeyboardDismissMode::OnDrag:
-            dismissKeyboardMode = UIScrollViewKeyboardDismissModeOnDrag;
-            break;
-    }
-    scrollView.keyboardDismissMode = dismissKeyboardMode;
-}
-
-
 - (void)updateProps:(const facebook::react::Props::Shared &)props oldProps:(const facebook::react::Props::Shared &)oldProps{
     const auto &oldScreenProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
     const auto &newScreenProps = *std::static_pointer_cast<const RNCViewPagerProps>(props);
     
-    // change index only once
-    if (_currentIndex == -1) {
-        _currentIndex = newScreenProps.initialPage;
-        [self shouldDismissKeyboard: newScreenProps.keyboardDismissMode];
-    }
-    
-    const auto newLayoutDirectionStr = RCTNSStringFromString(toString(newScreenProps.layoutDirection));
-    
-    
-    if (self.layoutDirection != newLayoutDirectionStr) {
-        self.layoutDirection = newLayoutDirectionStr;
+    if (_scrollView.bounces != newScreenProps.overdrag) {
+        [_scrollView setBounces: newScreenProps.overdrag];
     }
     
-    if (oldScreenProps.keyboardDismissMode != newScreenProps.keyboardDismissMode) {
-        [self shouldDismissKeyboard: newScreenProps.keyboardDismissMode];
+    if (_scrollView.scrollEnabled != newScreenProps.scrollEnabled) {
+        [_scrollView setScrollEnabled:newScreenProps.scrollEnabled];
     }
     
-    if (newScreenProps.scrollEnabled != scrollView.scrollEnabled) {
-        scrollView.scrollEnabled = newScreenProps.scrollEnabled;
+    if (newScreenProps.animated != _animated) {
+        _animated = newScreenProps.animated;
     }
     
-    if (newScreenProps.overdrag != _overdrag) {
-        _overdrag = newScreenProps.overdrag;
+    if (newScreenProps.page != _page && newScreenProps.page >= 0 && newScreenProps.page < _containerView.subviews.count) {
+        _page = newScreenProps.page;
+        [self goTo:_page animated:_animated];
     }
     
     [super updateProps:props oldProps:oldProps];
 }
 
-- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
-    RCTRNCViewPagerHandleCommand(self, commandName, args);
-}
-
-#pragma mark - Internal methods
-
-- (void)setPage:(NSInteger)index {
-    [self goTo:index animated:YES];
-}
-
-- (void)setPageWithoutAnimation:(NSInteger)index {
-    [self goTo:index animated:NO];
-}
-
-- (void)disableSwipe {
-    self.nativePageViewController.view.userInteractionEnabled = NO;
-}
-
-- (void)enableSwipe {
-    self.nativePageViewController.view.userInteractionEnabled = YES;
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+    [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+    if (layoutMetrics.layoutDirection != oldLayoutMetrics.layoutDirection) {
+        CGAffineTransform transform = (layoutMetrics.layoutDirection == LayoutDirection::LeftToRight)
+        ? CGAffineTransformIdentity
+        : CGAffineTransformMakeScale(-1, 1);
+        
+        _containerView.transform = transform;
+        _scrollView.transform = transform;
+    }
 }
 
-- (void)goTo:(NSInteger)index animated:(BOOL)animated {
-    NSInteger numberOfPages = _nativeChildrenViewControllers.count;
+- (void)updateState:(State::Shared const &)state oldState:(State::Shared const &)oldState
+{
+    assert(std::dynamic_pointer_cast<RNCViewPagerShadowNode::ConcreteState const>(state));
+    _state = std::static_pointer_cast<RNCViewPagerShadowNode::ConcreteState const>(state);
+    
+    const auto &props = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
     
-    [self disableSwipe];
+    auto &data = _state->getData();
     
-    _destinationIndex = index;
+    auto contentOffset = RCTCGPointFromPoint(data.contentOffset);
+    if (!oldState && !CGPointEqualToPoint(contentOffset, CGPointZero)) {
+        _scrollView.contentOffset = contentOffset;
+    }
     
+    CGSize contentSize = RCTCGSizeFromSize(data.getContentSize());
     
-    if (numberOfPages == 0 || index < 0 || index > numberOfPages - 1) {
+    if (CGSizeEqualToSize(_contentSize, contentSize)) {
         return;
     }
     
-    BOOL isForward = (index > self.currentIndex && [self isLtrLayout]) || (index < self.currentIndex && ![self isLtrLayout]);
-    UIPageViewControllerNavigationDirection direction = isForward ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
+    _contentSize = contentSize;
+    _containerView.frame = CGRect{RCTCGPointFromPoint(data.contentBoundingRect.origin), contentSize};
     
-    long diff = labs(index - _currentIndex);
+    _scrollView.contentSize = contentSize;
     
-    [self setPagerViewControllers:index
-                        direction:direction
-                         animated:diff == 0 ? NO : animated];
-    
-}
-
-- (void)setPagerViewControllers:(NSInteger)index
-                      direction:(UIPageViewControllerNavigationDirection)direction
-                       animated:(BOOL)animated{
-    if (_nativePageViewController == nil) {
-        [self enableSwipe];
-        return;
+    if (!CGSizeEqualToSize(_scrollView.frame.size, CGSizeZero) && _initialPage == -1) {
+        [self setPageWithoutAnimation: props.initialPage];
+        _initialPage = props.initialPage;
     }
     
-    __weak RNCPagerViewComponentView *weakSelf = self;
-    [_nativePageViewController setViewControllers:@[[_nativeChildrenViewControllers objectAtIndex:index]]
-                                        direction:direction
-                                         animated:animated
-                                       completion:^(BOOL finished) {
-        __strong RNCPagerViewComponentView *strongSelf = weakSelf;
-        [strongSelf enableSwipe];
-        if (strongSelf->_eventEmitter != nullptr ) {
-            const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(strongSelf->_eventEmitter);
-            int position = (int) index;
-            strongEventEmitter.onPageSelected(RNCViewPagerEventEmitter::OnPageSelected{.position =  static_cast<double>(position)});
-            strongSelf->_currentIndex = index;
-        }
-    }];
 }
 
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+    [_containerView insertSubview:childComponentView atIndex:index];
+}
 
-- (UIViewController *)nextControllerForController:(UIViewController *)controller
-                                      inDirection:(UIPageViewControllerNavigationDirection)direction {
-    NSUInteger numberOfPages = _nativeChildrenViewControllers.count;
-    NSInteger index = [_nativeChildrenViewControllers indexOfObject:controller];
-    
-    if (index == NSNotFound) {
-        return nil;
-    }
-    
-    direction == UIPageViewControllerNavigationDirectionForward ? index++ : index--;
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+    [childComponentView removeFromSuperview];
     
-    if (index < 0 || (index > (numberOfPages - 1))) {
-        return nil;
+    NSInteger numberOfPages = _containerView.subviews.count;
+
+    if ([self getCurrentPage] >= numberOfPages - 1) {
+        [self setPageWithoutAnimation: numberOfPages - 1];
     }
-    
-    return [_nativeChildrenViewControllers objectAtIndex:index];
 }
 
-- (UIViewController *)currentlyDisplayed {
-    return _nativePageViewController.viewControllers.firstObject;
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args {
+    RCTRNCViewPagerHandleCommand(self, commandName, args);
+}
+
+- (void)prepareForRecycle
+{
+    _state.reset();
+    [_scrollView setContentOffset:CGPointZero];
+    
+    _initialPage = -1;
+    
+    [super prepareForRecycle];
 }
 
 #pragma mark - UIScrollViewDelegate
@@ -260,130 +172,76 @@ - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
 
 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
     
-    if (!_overdrag) {
-        NSInteger maxIndex = _nativeChildrenViewControllers.count - 1;
-        BOOL isFirstPage = [self isLtrLayout] ? _currentIndex == 0 : _currentIndex == maxIndex;
-        BOOL isLastPage = [self isLtrLayout] ? _currentIndex == maxIndex : _currentIndex == 0;
-        CGFloat contentOffset = [self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
-        CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
-        
-        if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
-            CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
-            *targetContentOffset = croppedOffset;
-        }
-    }
-    
     const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
     strongEventEmitter.onPageScrollStateChanged(RNCViewPagerEventEmitter::OnPageScrollStateChanged{.pageScrollState =  RNCViewPagerEventEmitter::OnPageScrollStateChangedPageScrollState::Settling });
 }
 
 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
+    int position = [self getCurrentPage];
+    
     const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
+    
     strongEventEmitter.onPageScrollStateChanged(RNCViewPagerEventEmitter::OnPageScrollStateChanged{.pageScrollState =  RNCViewPagerEventEmitter::OnPageScrollStateChangedPageScrollState::Idle });
+    
+    strongEventEmitter.onPageSelected(RNCViewPagerEventEmitter::OnPageSelected{.position =  static_cast<double>(position)});
 }
 
-- (BOOL)isHorizontal {
-    return _nativePageViewController.navigationOrientation == UIPageViewControllerNavigationOrientationHorizontal;
-}
-
-- (BOOL)isLtrLayout {
-    return [_layoutDirection isEqualToString: @"ltr"];
-}
-
-- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
-    CGPoint point = scrollView.contentOffset;
-    
-    float offset = 0;
-    
-    if (self.isHorizontal) {
-        if (scrollView.frame.size.width != 0) {
-            offset = (point.x - scrollView.frame.size.width)/scrollView.frame.size.width;
-        }
-    } else {
-        if (scrollView.frame.size.height != 0) {
-            offset = (point.y - scrollView.frame.size.height)/scrollView.frame.size.height;
-        }
-    }
+//Handles sending onPageSelected event on setPageWithAnimation method completion
+-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
+    int position = [self getCurrentPage];
     
-    float absoluteOffset = fabs(offset);
-    
-    NSInteger position = self.currentIndex;
-    
-    BOOL isAnimatingBackwards = offset<0;
+    const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
     
-    if (scrollView.isDragging) {
-        _destinationIndex = isAnimatingBackwards ? _currentIndex - 1 : _currentIndex + 1;
-    }
+    strongEventEmitter.onPageSelected(RNCViewPagerEventEmitter::OnPageSelected{.position =  static_cast<double>(position)});
+}
+
+-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
+    int position = [self getCurrentPage];
     
-    if (isAnimatingBackwards) {
-        position =  _destinationIndex;
-        absoluteOffset =  fmax(0, 1 - absoluteOffset);
-    }
+    double offset = [self isHorizontal] ? (scrollView.contentOffset.x - (scrollView.frame.size.width * position))/scrollView.frame.size.width : (scrollView.contentOffset.y - (scrollView.frame.size.height * position))/scrollView.frame.size.height;
     
-    if (!_overdrag) {
-        NSInteger maxIndex = _nativeChildrenViewControllers.count - 1;
-        NSInteger firstPageIndex = [self isLtrLayout] ?  0 :  maxIndex;
-        NSInteger lastPageIndex = [self isLtrLayout] ?  maxIndex :  0;
-        BOOL isFirstPage = _currentIndex == firstPageIndex;
-        BOOL isLastPage = _currentIndex == lastPageIndex;
-        CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
-        CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
-        
-        if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
-            CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
-            scrollView.contentOffset = croppedOffset;
-            absoluteOffset=0;
-            position = isLastPage ? lastPageIndex : firstPageIndex;
-        }
-    }
+    const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
     
-    float interpolatedOffset = absoluteOffset * labs(_destinationIndex - _currentIndex);
+    strongEventEmitter.onPageScroll(RNCViewPagerEventEmitter::OnPageScroll{.position =  static_cast<double>(position), .offset = offset});
     
-    const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
-    int eventPosition = (int) position;
-    strongEventEmitter.onPageScroll(RNCViewPagerEventEmitter::OnPageScroll{.position =  static_cast<double>(eventPosition), .offset = interpolatedOffset});
-
     //This is temporary workaround to allow animations based on onPageScroll event
     //until Fabric implements proper NativeAnimationDriver
     RCTBridge *bridge = [RCTBridge currentBridge];
     
     if (bridge) {
-        [bridge.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:[NSNumber numberWithInt:self.tag] position:@(position) offset:@(interpolatedOffset)]];
+        [bridge.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:[NSNumber numberWithInt:self.tag] position:@(position) offset:@(offset)]];
     }
-    
 }
 
+#pragma mark - Internal methods
 
-#pragma mark - UIPageViewControllerDelegate
-
-- (void)pageViewController:(UIPageViewController *)pageViewController
-        didFinishAnimating:(BOOL)finished
-   previousViewControllers:(nonnull NSArray<UIViewController *> *)previousViewControllers
-       transitionCompleted:(BOOL)completed {
-    if (completed) {
-        UIViewController* currentVC = [self currentlyDisplayed];
-        NSUInteger currentIndex = [_nativeChildrenViewControllers indexOfObject:currentVC];
-        _currentIndex = currentIndex;
-        int position = (int) currentIndex;
-        const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
-        strongEventEmitter.onPageSelected(RNCViewPagerEventEmitter::OnPageSelected{.position =  static_cast<double>(position)});
-        strongEventEmitter.onPageScroll(RNCViewPagerEventEmitter::OnPageScroll{.position =  static_cast<double>(position), .offset =  0.0});
-    }
+-(bool)isHorizontal {
+    return _scrollView.contentSize.width > _scrollView.contentSize.height;
 }
 
-#pragma mark - UIPageViewControllerDataSource
+-(int)getCurrentPage {
+    return [self isHorizontal] ? _scrollView.contentOffset.x / _scrollView.frame.size.width : _scrollView.contentOffset.y / _scrollView.frame.size.height;
+}
+
+-(CGPoint)getPageOffset:(NSInteger)pageIndex {
+    return [self isHorizontal] ? CGPointMake(_scrollView.frame.size.width * pageIndex, 0) : CGPointMake(0, _scrollView.frame.size.height * pageIndex);
+}
 
-- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
-       viewControllerAfterViewController:(UIViewController *)viewController {
+-(void)goTo:(NSInteger)index animated:(BOOL)animated {
+    CGPoint targetOffset = [self getPageOffset:index];
     
-    UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
-    return [self nextControllerForController:viewController inDirection:direction];
+    [_scrollView setContentOffset:targetOffset animated:animated];
 }
 
-- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
-      viewControllerBeforeViewController:(UIViewController *)viewController {
-    UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionReverse : UIPageViewControllerNavigationDirectionForward;
-    return [self nextControllerForController:viewController inDirection:direction];
+- (void)setPageWithAnimation:(NSInteger)index {
+    [self goTo:index animated:YES];
+}
+
+- (void)setPageWithoutAnimation:(NSInteger)index {
+    [self goTo:index animated:NO];
+    
+    const auto strongEventEmitter = *std::dynamic_pointer_cast<const RNCViewPagerEventEmitter>(_eventEmitter);
+    strongEventEmitter.onPageSelected(RNCViewPagerEventEmitter::OnPageSelected{.position =  static_cast<double>(index)});
 }
 
 #pragma mark - RCTComponentViewProtocol
diff --git a/ios/ReactNativePageView.h b/ios/RNCPagerView.h
similarity index 60%
rename from ios/ReactNativePageView.h
rename to ios/RNCPagerView.h
index 8887fd22..61849c18 100644
--- a/ios/ReactNativePageView.h
+++ b/ios/RNCPagerView.h
@@ -5,23 +5,19 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface ReactNativePageView: UIView
+@interface RNCPagerView: UIView
 
-- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
+- (instancetype)initWithEventDispatcher:(id<RCTEventDispatcherProtocol> )eventDispatcher;
 
+@property(nonatomic) NSInteger page;
+@property(nonatomic) BOOL animated;
 @property(nonatomic) NSInteger initialPage;
-@property(nonatomic) NSInteger lastReportedIndex;
-@property(nonatomic) NSInteger destinationIndex;
-@property(nonatomic) NSInteger currentIndex;
-@property(nonatomic) NSInteger pageMargin;
-@property(nonatomic, readonly) BOOL scrollEnabled;
+@property(nonatomic) NSString* orientation;
 @property(nonatomic, readonly) UIScrollViewKeyboardDismissMode dismissKeyboard;
-@property(nonatomic) UIPageViewControllerNavigationOrientation orientation;
 @property(nonatomic, copy) RCTDirectEventBlock onPageSelected;
 @property(nonatomic, copy) RCTDirectEventBlock onPageScroll;
 @property(nonatomic, copy) RCTDirectEventBlock onPageScrollStateChanged;
 @property(nonatomic) BOOL overdrag;
-@property(nonatomic) NSString* layoutDirection;
 @property(nonatomic, assign) BOOL animating;
 
 - (void)goTo:(NSInteger)index animated:(BOOL)animated;
diff --git a/ios/RNCPagerView.m b/ios/RNCPagerView.m
new file mode 100644
index 00000000..32c2691a
--- /dev/null
+++ b/ios/RNCPagerView.m
@@ -0,0 +1,196 @@
+
+#import "RNCPagerView.h"
+#import "React/RCTLog.h"
+#import <React/RCTViewManager.h>
+
+#import "UIViewController+CreateExtension.h"
+#import "RCTOnPageScrollEvent.h"
+#import "RCTOnPageScrollStateChanged.h"
+#import "React/RCTUIManagerObserverCoordinator.h"
+#import "RCTOnPageSelected.h"
+#import <math.h>
+
+@interface RNCPagerView () <UIScrollViewDelegate>
+
+@property(nonatomic, strong) id<RCTEventDispatcherProtocol> eventDispatcher;
+
+@property(nonatomic, strong) UIScrollView *scrollView;
+@property(nonatomic, strong) UIView *containerView;
+
+- (void)goTo:(NSInteger)index animated:(BOOL)animated;
+- (void)shouldScroll:(BOOL)scrollEnabled;
+- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard;
+
+@end
+
+@implementation RNCPagerView {
+    uint16_t _coalescingKey;
+}
+
+- (instancetype)initWithEventDispatcher:(id<RCTEventDispatcherProtocol>)eventDispatcher {
+    if (self = [super init]) {
+        _initialPage = 0;
+        _page = 0;
+        _animated = YES;
+        _dismissKeyboard = UIScrollViewKeyboardDismissModeNone;
+        _coalescingKey = 0;
+        _eventDispatcher = eventDispatcher;
+        _orientation = @"horizontal";
+        [self embed];
+    }
+    return self;
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    [self calculateContentSize];
+}
+
+- (void)didUpdateReactSubviews {
+    [self calculateContentSize];
+}
+
+-(void) insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex {
+    [super insertReactSubview:subview atIndex:atIndex];
+    [_containerView insertSubview:subview atIndex:atIndex];
+}
+
+- (void)removeReactSubview:(UIView *)subview {
+    [super removeReactSubview:subview];
+    [subview removeFromSuperview];
+    
+    if ([self getCurrentPage] >= self.reactSubviews.count - 1) {
+        [self goTo:self.reactSubviews.count - 1 animated:false];
+    }
+}
+
+- (void)embed {
+    _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
+    _scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    _scrollView.delaysContentTouches = NO;
+    _scrollView.delegate = self;
+    _scrollView.pagingEnabled = YES;
+    _scrollView.showsHorizontalScrollIndicator = NO;
+    _scrollView.showsVerticalScrollIndicator = NO;
+    [self addSubview:_scrollView];
+    
+    _containerView = [[UIView alloc] initWithFrame:self.bounds];
+    [_scrollView addSubview:_containerView];
+}
+
+- (void)didSetProps:(NSArray<NSString *> *)changedProps {
+    if ([changedProps containsObject:@"overdrag"]) {
+        [_scrollView setBounces:_overdrag];
+    }
+    
+    if ([changedProps containsObject:@"page"]) {
+        if (_page >= 0 && _page < self.reactSubviews.count) {
+            [self goTo:_page animated:_animated];
+        }
+    }
+}
+
+- (void)shouldScroll:(BOOL)scrollEnabled {
+    if (self.scrollView) {
+        self.scrollView.scrollEnabled = scrollEnabled;
+    }
+}
+
+- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard {
+    _dismissKeyboard = [dismissKeyboard  isEqual: @"on-drag"] ?
+    UIScrollViewKeyboardDismissModeOnDrag : UIScrollViewKeyboardDismissModeNone;
+    self.scrollView.keyboardDismissMode = _dismissKeyboard;
+}
+
+#pragma mark - Internal methods
+
+- (void) calculateContentSize {
+    UIView *initialView = self.containerView.subviews.firstObject;
+    if (!initialView) {
+        return;
+    }
+    
+    CGFloat totalSubviewsWidth = initialView.frame.size.width * self.containerView.subviews.count;
+    CGFloat totalSubviewsHeight = initialView.frame.size.height * self.containerView.subviews.count;
+    
+    
+    if ([self isHorizontal]) {
+        _scrollView.contentSize = CGSizeMake(totalSubviewsWidth, 0);
+        _containerView.frame = CGRectMake(0, 0, totalSubviewsWidth, initialView.bounds.size.height);
+    } else {
+        _scrollView.contentSize = CGSizeMake(0, totalSubviewsHeight);
+        _containerView.frame = CGRectMake(0, 0, initialView.bounds.size.width, totalSubviewsHeight);
+    }
+    
+    _scrollView.frame = self.bounds;
+    [self.scrollView layoutIfNeeded];
+    
+    if (self.initialPage != 0) {
+        [self goTo:self.initialPage animated:false];
+    }
+}
+
+- (void)disableSwipe {
+    [_scrollView setScrollEnabled:false];
+}
+
+- (void)enableSwipe {
+    [_scrollView setScrollEnabled:true];
+}
+
+- (void)goTo:(NSInteger)index animated:(BOOL)animated {
+    CGPoint targetOffset = [self isHorizontal] ? CGPointMake(_scrollView.frame.size.width * index, 0) : CGPointMake(0, _scrollView.frame.size.height * index);
+        
+    if (animated) {
+        self.animating = true;
+    }
+    
+    [_scrollView setContentOffset:targetOffset animated:animated];
+    
+    if (!animated) {
+        int position = [self getCurrentPage];
+        [self.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:self.reactTag position:[NSNumber numberWithInt:position] coalescingKey:_coalescingKey++]];
+    }
+}
+
+- (BOOL)isHorizontal {
+    return [_orientation isEqualToString:@"horizontal"];
+}
+
+-(int)getCurrentPage {
+    return [self isHorizontal] ? _scrollView.contentOffset.x / _scrollView.frame.size.width : _scrollView.contentOffset.y / _scrollView.frame.size.height;
+}
+
+#pragma mark - UIScrollViewDelegate
+
+
+- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
+    [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"dragging" coalescingKey:_coalescingKey++]];
+}
+
+- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
+    [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"settling" coalescingKey:_coalescingKey++]];
+}
+
+- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
+    int position = [self getCurrentPage];
+    [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"idle" coalescingKey:_coalescingKey++]];
+    
+    [self.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:self.reactTag position:[NSNumber numberWithInt:position] coalescingKey:_coalescingKey++]];
+}
+
+-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
+    int position = [self getCurrentPage];
+    self.animating = false;
+    [self.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:self.reactTag position:[NSNumber numberWithInt:position] coalescingKey:_coalescingKey++]];
+}
+
+- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
+    int position = [self getCurrentPage];
+    
+    double offset = [self isHorizontal] ? (scrollView.contentOffset.x - (scrollView.frame.size.width * position))/scrollView.frame.size.width : (scrollView.contentOffset.y - (scrollView.frame.size.height * position))/scrollView.frame.size.height;
+    
+    [self.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:self.reactTag position:@(position) offset:@(offset)]];
+}
+@end
+
diff --git a/ios/ReactViewPagerManager.h b/ios/RNCPagerViewManager.h
similarity index 67%
rename from ios/ReactViewPagerManager.h
rename to ios/RNCPagerViewManager.h
index cc5de3e0..f3be10b2 100644
--- a/ios/ReactViewPagerManager.h
+++ b/ios/RNCPagerViewManager.h
@@ -3,10 +3,10 @@
 #import <React/RCTViewManager.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTLog.h>
-#import "ReactNativePageView.h"
+#import "RNCPagerView.h"
 NS_ASSUME_NONNULL_BEGIN
 
-@interface ReactViewPagerManager : RCTViewManager
+@interface RNCPagerViewManager : RCTViewManager
 
 @end
 
diff --git a/ios/ReactViewPagerManager.m b/ios/RNCPagerViewManager.m
similarity index 68%
rename from ios/ReactViewPagerManager.m
rename to ios/RNCPagerViewManager.m
index 38656e19..14035e48 100644
--- a/ios/ReactViewPagerManager.m
+++ b/ios/RNCPagerViewManager.m
@@ -1,21 +1,22 @@
 
-#import "ReactViewPagerManager.h"
+#import "RNCPagerViewManager.h"
 
-@implementation ReactViewPagerManager
+@implementation RNCPagerViewManager
 
 #pragma mark - RTC
 
 RCT_EXPORT_MODULE(RNCViewPager)
 
+RCT_EXPORT_VIEW_PROPERTY(page, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(animated, BOOL)
+
 RCT_EXPORT_VIEW_PROPERTY(initialPage, NSInteger)
-RCT_EXPORT_VIEW_PROPERTY(pageMargin, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(orientation, NSString)
 
-RCT_EXPORT_VIEW_PROPERTY(orientation, UIPageViewControllerNavigationOrientation)
 RCT_EXPORT_VIEW_PROPERTY(onPageSelected, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPageScroll, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPageScrollStateChanged, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(overdrag, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(layoutDirection, NSString)
 
 
 - (void) goToPage
@@ -25,14 +26,12 @@ - (void) goToPage
     [self.bridge.uiManager addUIBlock:^(
                                         RCTUIManager *uiManager,
                                         NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-        ReactNativePageView *view = (ReactNativePageView *)viewRegistry[reactTag];
-        if (!view || ![view isKindOfClass:[ReactNativePageView class]]) {
+        RNCPagerView *view = (RNCPagerView *)viewRegistry[reactTag];
+        if (!view || ![view isKindOfClass:[RNCPagerView class]]) {
             RCTLogError(@"Cannot find ReactNativePageView with tag #%@", reactTag);
             return;
         }
-        if (!animated || !view.animating) {
-            [view goTo:index.integerValue animated:animated];
-        }
+        [view goTo:index.integerValue animated:animated];
     }];
 }
 
@@ -42,8 +41,8 @@ - (void) changeScrollEnabled
     [self.bridge.uiManager addUIBlock:^(
                                         RCTUIManager *uiManager,
                                         NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-        ReactNativePageView *view = (ReactNativePageView *)viewRegistry[reactTag];
-        if (!view || ![view isKindOfClass:[ReactNativePageView class]]) {
+        RNCPagerView *view = (RNCPagerView *)viewRegistry[reactTag];
+        if (!view || ![view isKindOfClass:[RNCPagerView class]]) {
             RCTLogError(@"Cannot find ReactNativePageView with tag #%@", reactTag);
             return;
         }
@@ -51,7 +50,7 @@ - (void) changeScrollEnabled
     }];
 }
 
-RCT_EXPORT_METHOD(setPage
+RCT_EXPORT_METHOD(setPageWithAnimation
                   : (nonnull NSNumber *)reactTag index
                   : (nonnull NSNumber *)index) {
     [self goToPage:reactTag index:index animated:true];
@@ -70,17 +69,17 @@ - (void) changeScrollEnabled
     [self changeScrollEnabled:reactTag enabled:isEnabled];
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(scrollEnabled, BOOL, ReactNativePageView) {
+RCT_CUSTOM_VIEW_PROPERTY(scrollEnabled, BOOL, RNCPagerView) {
     [view shouldScroll:[RCTConvert BOOL:json]];
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(keyboardDismissMode, NSString, ReactNativePageView) {
+RCT_CUSTOM_VIEW_PROPERTY(keyboardDismissMode, NSString, RNCPagerView) {
     [view shouldDismissKeyboard:[RCTConvert NSString:json]];
 }
 
 
 - (UIView *)view {
-    return [[ReactNativePageView alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+    return [[RNCPagerView alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
 }
 
 @end
diff --git a/ios/ReactNativePageView.m b/ios/ReactNativePageView.m
deleted file mode 100644
index cf2bd57b..00000000
--- a/ios/ReactNativePageView.m
+++ /dev/null
@@ -1,464 +0,0 @@
-
-#import "ReactNativePageView.h"
-#import "React/RCTLog.h"
-#import <React/RCTViewManager.h>
-
-#import "UIViewController+CreateExtension.h"
-#import "RCTOnPageScrollEvent.h"
-#import "RCTOnPageScrollStateChanged.h"
-#import "RCTOnPageSelected.h"
-#import <math.h>
-
-@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
-
-@property(nonatomic, strong) UIPageViewController *reactPageViewController;
-@property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
-
-@property(nonatomic, weak) UIScrollView *scrollView;
-@property(nonatomic, weak) UIView *currentView;
-
-@property(nonatomic, strong) NSHashTable<UIViewController *> *cachedControllers;
-@property(nonatomic, assign) CGPoint lastContentOffset;
-
-- (void)goTo:(NSInteger)index animated:(BOOL)animated;
-- (void)shouldScroll:(BOOL)scrollEnabled;
-- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard;
-
-
-@end
-
-@implementation ReactNativePageView {
-    uint16_t _coalescingKey;
-}
-
-- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
-    if (self = [super init]) {
-        _scrollEnabled = YES;
-        _pageMargin = 0;
-        _lastReportedIndex = -1;
-        _destinationIndex = -1;
-        _orientation = UIPageViewControllerNavigationOrientationHorizontal;
-        _currentIndex = 0;
-        _dismissKeyboard = UIScrollViewKeyboardDismissModeNone;
-        _coalescingKey = 0;
-        _eventDispatcher = eventDispatcher;
-        _cachedControllers = [NSHashTable hashTableWithOptions:NSHashTableStrongMemory];
-        _overdrag = NO;
-        _layoutDirection = @"ltr";
-    }
-    return self;
-}
-
-- (void)layoutSubviews {
-    [super layoutSubviews];
-    if (self.reactPageViewController) {
-        [self shouldScroll:self.scrollEnabled];
-    }
-}
-
-- (void)didUpdateReactSubviews {
-    if (!self.reactPageViewController && self.reactViewController != nil) {
-        [self embed];
-        [self setupInitialController];
-    } else {
-        [self updateDataSource];
-    }
-}
-
-- (void)didMoveToSuperview {
-    [super didMoveToSuperview];
-    if (!self.reactPageViewController && self.reactViewController != nil) {
-        [self embed];
-        [self setupInitialController];
-    }
-}
-
-- (void)didMoveToWindow {
-    [super didMoveToWindow];
-    if (!self.reactPageViewController && self.reactViewController != nil) {
-        [self embed];
-        [self setupInitialController];
-    }
-
-    if (self.reactViewController.navigationController != nil && self.reactViewController.navigationController.interactivePopGestureRecognizer != nil) {
-        [self.scrollView.panGestureRecognizer requireGestureRecognizerToFail:self.reactViewController.navigationController.interactivePopGestureRecognizer];
-    }
-}
-
-- (void)embed {
-    NSDictionary *options = @{ UIPageViewControllerOptionInterPageSpacingKey: @(self.pageMargin) };
-    UIPageViewController *pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
-                                                                               navigationOrientation:self.orientation
-                                                                                             options:options];
-    pageViewController.delegate = self;
-    pageViewController.dataSource = self;
-    
-    for (UIView *subview in pageViewController.view.subviews) {
-        if([subview isKindOfClass:UIScrollView.class]){
-            ((UIScrollView *)subview).delegate = self;
-            ((UIScrollView *)subview).keyboardDismissMode = _dismissKeyboard;
-            ((UIScrollView *)subview).delaysContentTouches = YES;
-            self.scrollView = (UIScrollView *)subview;
-        }
-    }
-    
-    self.reactPageViewController = pageViewController;
-    
-    [self reactAddControllerToClosestParent:pageViewController];
-    [self addSubview:pageViewController.view];
-    
-    pageViewController.view.frame = self.bounds;
-    
-    [self shouldScroll:self.scrollEnabled];
-    
-    [pageViewController.view layoutIfNeeded];
-}
-
-- (void)shouldScroll:(BOOL)scrollEnabled {
-    _scrollEnabled = scrollEnabled;
-    if (self.reactPageViewController.view) {
-        self.scrollView.scrollEnabled = scrollEnabled;
-    }
-}
-
-- (void)shouldDismissKeyboard:(NSString *)dismissKeyboard {
-    _dismissKeyboard = [dismissKeyboard  isEqual: @"on-drag"] ?
-    UIScrollViewKeyboardDismissModeOnDrag : UIScrollViewKeyboardDismissModeNone;
-    self.scrollView.keyboardDismissMode = _dismissKeyboard;
-}
-
-- (void)setupInitialController {
-    UIView *initialView = self.reactSubviews[self.initialPage];
-    if (initialView) {
-        UIViewController *initialController = nil;
-        if (initialView.reactViewController) {
-            initialController = initialView.reactViewController;
-        } else {
-            initialController = [[UIViewController alloc] initWithView:initialView];
-        }
-        
-        [self.cachedControllers addObject:initialController];
-        
-        [self setReactViewControllers:self.initialPage
-                                 with:initialController
-                            direction:UIPageViewControllerNavigationDirectionForward
-                             animated:YES
-             shouldCallOnPageSelected:YES];
-    }
-}
-
-- (void)setReactViewControllers:(NSInteger)index
-                           with:(UIViewController *)controller
-                      direction:(UIPageViewControllerNavigationDirection)direction
-                       animated:(BOOL)animated
-                       shouldCallOnPageSelected:(BOOL)shouldCallOnPageSelected {
-    if (self.reactPageViewController == nil) {
-        [self enableSwipe];
-        return;
-    }
-
-    NSArray *currentVCs = self.reactPageViewController.viewControllers;
-    if (currentVCs.count == 1 && [currentVCs.firstObject isEqual:controller]) {
-        [self enableSwipe];
-        return;
-    }
-
-    __weak ReactNativePageView *weakSelf = self;
-    uint16_t coalescingKey = _coalescingKey++;
-    
-    if (animated == YES) {
-        self.animating = YES;
-    }
-    
-    [self.reactPageViewController setViewControllers:@[controller]
-                                           direction:direction
-                                            animated:animated
-                                          completion:^(BOOL finished) {
-        __strong typeof(self) strongSelf = weakSelf;
-        strongSelf.currentIndex = index;
-        strongSelf.currentView = controller.view;
-        
-        [strongSelf enableSwipe];
-        
-        if (finished) {
-            strongSelf.animating = NO;
-        }
-        
-        if (strongSelf.eventDispatcher) {
-            if (strongSelf.lastReportedIndex != strongSelf.currentIndex) {
-                if (shouldCallOnPageSelected) {
-                    [strongSelf.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:strongSelf.reactTag position:@(index) coalescingKey:coalescingKey]];
-                }
-                strongSelf.lastReportedIndex = strongSelf.currentIndex;
-            }
-        }
-    }];
-}
-
-- (UIViewController *)currentlyDisplayed {
-    return self.reactPageViewController.viewControllers.firstObject;
-}
-
-- (UIViewController *)findCachedControllerForView:(UIView *)view {
-    for (UIViewController *controller in self.cachedControllers) {
-        if (controller.view.reactTag == view.reactTag) {
-            return controller;
-        }
-    }
-    return nil;
-}
-
-- (void)updateDataSource {
-    if (!self.currentView && self.reactSubviews.count == 0) {
-        return;
-    }
-    
-    NSInteger newIndex = self.currentView ? [self.reactSubviews indexOfObject:self.currentView] : 0;
-    
-    if (newIndex == NSNotFound) {
-        //Current view was removed
-        NSInteger maxPage = self.reactSubviews.count - 1;
-        NSInteger fallbackIndex = self.currentIndex >= maxPage ? maxPage : self.currentIndex;
-        
-        [self goTo:fallbackIndex animated:NO];
-    } else {
-        [self goTo:newIndex animated:NO];
-    }
-}
-
-- (void)disableSwipe {
-    self.reactPageViewController.view.userInteractionEnabled = NO;
-}
-
-- (void)enableSwipe {
-    self.reactPageViewController.view.userInteractionEnabled = YES;
-}
-
-- (void)goTo:(NSInteger)index animated:(BOOL)animated {
-    NSInteger numberOfPages = self.reactSubviews.count;
-    
-    [self disableSwipe];
-    
-    _destinationIndex = index;
-    
-    if (numberOfPages == 0 || index < 0 || index > numberOfPages - 1) {
-        return;
-    }
-    
-    BOOL isRTL = ![self isLtrLayout];
-    
-    BOOL isForward = (index > self.currentIndex && !isRTL) || (index < self.currentIndex && isRTL);
-
-    
-    UIPageViewControllerNavigationDirection direction = isForward ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
-    
-    long diff = labs(index - _currentIndex);
-    
-    [self goToViewController:index direction:direction animated:(!self.animating && animated) shouldCallOnPageSelected: YES];
-    
-    if (diff == 0) {
-        [self goToViewController:index direction:direction animated:NO shouldCallOnPageSelected:YES];
-    }
-}
-
-- (void)goToViewController:(NSInteger)index
-                            direction:(UIPageViewControllerNavigationDirection)direction
-                            animated:(BOOL)animated
-                            shouldCallOnPageSelected:(BOOL)shouldCallOnPageSelected {
-    UIView *viewToDisplay = self.reactSubviews[index];
-    UIViewController *controllerToDisplay = [self findAndCacheControllerForView:viewToDisplay];
-    [self setReactViewControllers:index
-                             with:controllerToDisplay
-                        direction:direction
-                         animated:animated
-                        shouldCallOnPageSelected:shouldCallOnPageSelected];
-}
-    
-- (UIViewController *)findAndCacheControllerForView:(UIView *)viewToDisplay {
-    if (!viewToDisplay) { return nil; }
-    
-    UIViewController *controllerToDisplay = [self findCachedControllerForView:viewToDisplay];
-    UIViewController *current = [self currentlyDisplayed];
-    
-    if (!controllerToDisplay && current.view.reactTag == viewToDisplay.reactTag) {
-        controllerToDisplay = current;
-    }
-    if (!controllerToDisplay) {
-        if (viewToDisplay.reactViewController) {
-            controllerToDisplay = viewToDisplay.reactViewController;
-        } else {
-            controllerToDisplay = [[UIViewController alloc] initWithView:viewToDisplay];
-        }
-    }
-    [self.cachedControllers addObject:controllerToDisplay];
-    
-    return controllerToDisplay;
-}
-
-- (UIViewController *)nextControllerForController:(UIViewController *)controller
-                                      inDirection:(UIPageViewControllerNavigationDirection)direction {
-    NSUInteger numberOfPages = self.reactSubviews.count;
-    NSInteger index = [self.reactSubviews indexOfObject:controller.view];
-    
-    if (index == NSNotFound) {
-        return nil;
-    }
-    
-    direction == UIPageViewControllerNavigationDirectionForward ? index++ : index--;
-    
-    if (index < 0 || (index > (numberOfPages - 1))) {
-        return nil;
-    }
-    
-    UIView *viewToDisplay = self.reactSubviews[index];
-    
-    return [self findAndCacheControllerForView:viewToDisplay];
-}
-
-#pragma mark - UIPageViewControllerDelegate
-
-- (void)pageViewController:(UIPageViewController *)pageViewController
-        didFinishAnimating:(BOOL)finished
-   previousViewControllers:(nonnull NSArray<UIViewController *> *)previousViewControllers
-       transitionCompleted:(BOOL)completed {
-    
-    if (completed) {
-        UIViewController* currentVC = [self currentlyDisplayed];
-        NSUInteger currentIndex = [self.reactSubviews indexOfObject:currentVC.view];
-        
-        self.currentIndex = currentIndex;
-        self.currentView = currentVC.view;
-        [self.eventDispatcher sendEvent:[[RCTOnPageSelected alloc] initWithReactTag:self.reactTag position:@(currentIndex) coalescingKey:_coalescingKey++]];
-        [self.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:self.reactTag position:@(currentIndex) offset:@(0.0)]];
-        self.lastReportedIndex = currentIndex;
-    }
-}
-
-#pragma mark - UIPageViewControllerDataSource
-
-- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
-       viewControllerAfterViewController:(UIViewController *)viewController {
-    UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
-    return [self nextControllerForController:viewController inDirection:direction];
-}
-
-- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController
-      viewControllerBeforeViewController:(UIViewController *)viewController {
-    UIPageViewControllerNavigationDirection direction = [self isLtrLayout] ? UIPageViewControllerNavigationDirectionReverse : UIPageViewControllerNavigationDirectionForward;
-    return [self nextControllerForController:viewController inDirection:direction];
-}
-
-#pragma mark - UIPageControlDelegate
-
-- (void)pageControlValueChanged:(UIPageControl *)sender {
-    if (sender.currentPage != self.currentIndex) {
-        [self goTo:sender.currentPage animated:YES];
-    }
-}
-
-#pragma mark - UIScrollViewDelegate
-
-- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
-    [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"dragging" coalescingKey:_coalescingKey++]];
-}
-
-- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
-    [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"settling" coalescingKey:_coalescingKey++]];
-    
-    if (!_overdrag) {
-        NSInteger maxIndex = self.reactSubviews.count - 1;
-        BOOL isFirstPage = [self isLtrLayout] ? _currentIndex == 0 : _currentIndex == maxIndex;
-        BOOL isLastPage = [self isLtrLayout] ? _currentIndex == maxIndex : _currentIndex == 0;
-        CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
-        CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
-        
-        if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
-            CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
-            *targetContentOffset = croppedOffset;
-        }
-    }
-}
-
-- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
-    [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"idle" coalescingKey:_coalescingKey++]];
-}
-
-- (BOOL)isHorizontal {
-    return self.orientation == UIPageViewControllerNavigationOrientationHorizontal;
-}
-
-- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
-    CGPoint point = scrollView.contentOffset;
-    
-    float offset = 0;
-    
-    if (self.isHorizontal) {
-        if (scrollView.frame.size.width != 0) {
-            offset = (point.x - scrollView.frame.size.width)/scrollView.frame.size.width;
-        }
-    } else {
-        if (scrollView.frame.size.height != 0) {
-            offset = (point.y - scrollView.frame.size.height)/scrollView.frame.size.height;
-        }
-    }
-    
-    float absoluteOffset = fabs(offset);
-    
-    NSInteger position = self.currentIndex;
-    
-    BOOL isAnimatingBackwards = ([self isLtrLayout] && offset<0) || (![self isLtrLayout] && offset > 0.05f);
-    
-    if (scrollView.isDragging) {
-        _destinationIndex = isAnimatingBackwards ? _currentIndex - 1 : _currentIndex + 1;
-    }
-    
-    if(isAnimatingBackwards){
-        position = _destinationIndex;
-        absoluteOffset = fmax(0, 1 - absoluteOffset);
-    }
-    
-    if (!_overdrag) {
-        NSInteger maxIndex = self.reactSubviews.count - 1;
-        NSInteger firstPageIndex = [self isLtrLayout] ?  0 :  maxIndex;
-        NSInteger lastPageIndex = [self isLtrLayout] ?  maxIndex :  0;
-        BOOL isFirstPage = _currentIndex == firstPageIndex;
-        BOOL isLastPage = _currentIndex == lastPageIndex;
-        CGFloat contentOffset =[self isHorizontal] ? scrollView.contentOffset.x : scrollView.contentOffset.y;
-        CGFloat topBound = [self isHorizontal] ? scrollView.bounds.size.width : scrollView.bounds.size.height;
-        
-        if ((isFirstPage && contentOffset <= topBound) || (isLastPage && contentOffset >= topBound)) {
-            CGPoint croppedOffset = [self isHorizontal] ? CGPointMake(topBound, 0) : CGPointMake(0, topBound);
-            scrollView.contentOffset = croppedOffset;
-            absoluteOffset=0;
-            position = isLastPage ? lastPageIndex : firstPageIndex;
-        }
-    }
-
-    float interpolatedOffset = absoluteOffset * labs(_destinationIndex - _currentIndex);
-    
-    self.lastContentOffset = scrollView.contentOffset;
-    [self.eventDispatcher sendEvent:[[RCTOnPageScrollEvent alloc] initWithReactTag:self.reactTag position:@(position) offset:@(interpolatedOffset)]];
-}
-
-- (NSString *)determineScrollDirection:(UIScrollView *)scrollView {
-    NSString *scrollDirection;
-    if (self.isHorizontal) {
-        if (self.lastContentOffset.x > scrollView.contentOffset.x) {
-            scrollDirection = @"left";
-        } else if (self.lastContentOffset.x < scrollView.contentOffset.x) {
-            scrollDirection = @"right";
-        }
-    } else {
-        if (self.lastContentOffset.y > scrollView.contentOffset.y) {
-            scrollDirection = @"up";
-        } else if (self.lastContentOffset.y < scrollView.contentOffset.y) {
-            scrollDirection = @"down";
-        }
-    }
-    return scrollDirection;
-}
-
-- (BOOL)isLtrLayout {
-    return [_layoutDirection isEqualToString:@"ltr"];
-}
-@end
diff --git a/package.json b/package.json
index f9a7ce3a..d6471f15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-pager-view",
-  "version": "6.1.2",
+  "version": "7.0.0-rc.0",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -27,7 +27,7 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
     "release": "release-it",
-    "releaseNext": "release-it --npm.tag=newarch --preRelease=rc",
+    "releaseNext": "release-it --npm.tag=next --preRelease=rc",
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn && yarn example pods",
     "fabricexample": "yarn --cwd fabricexample",
diff --git a/react-native-pager-view.podspec b/react-native-pager-view.podspec
index 57138e9a..e331800f 100644
--- a/react-native-pager-view.podspec
+++ b/react-native-pager-view.podspec
@@ -31,6 +31,13 @@ Pod::Spec.new do |s|
     s.dependency "RCTRequired"
     s.dependency "RCTTypeSafety"
     s.dependency "ReactCommon/turbomodule/core"
+
+    s.subspec "common" do |ss|
+      ss.source_files         = "common/cpp/**/*.{cpp,h}"
+      ss.header_dir           = "RNCViewPager"
+      ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\"" }
+    end
+
     s.dependency "React-RCTFabric"
   end
 end
diff --git a/src/PagerView.tsx b/src/PagerView.tsx
index 9122b992..1f2b0737 100644
--- a/src/PagerView.tsx
+++ b/src/PagerView.tsx
@@ -56,10 +56,21 @@ import PagerViewView, {
  * ```
  */
 
-export class PagerView extends React.Component<PagerViewProps> {
+type PagerViewState = {
+  page: number | undefined;
+};
+
+export class PagerView extends React.Component<PagerViewProps, PagerViewState> {
   private isScrolling = false;
   pagerView: React.ElementRef<typeof PagerViewView> | null = null;
 
+  constructor(props: PagerViewProps) {
+    super(props);
+    this.state = {
+      page: this.props.initialPage,
+    };
+  }
+
   private _onPageScroll = (
     e: ReactNative.NativeSyntheticEvent<OnPageScrollEventData>
   ) => {
@@ -87,6 +98,7 @@ export class PagerView extends React.Component<PagerViewProps> {
   private _onPageSelected = (
     e: ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>
   ) => {
+    this.setState({ page: e.nativeEvent.position });
     if (this.props.onPageSelected) {
       this.props.onPageSelected(e);
     }
@@ -98,7 +110,7 @@ export class PagerView extends React.Component<PagerViewProps> {
    */
   public setPage = (selectedPage: number) => {
     if (this.pagerView) {
-      PagerViewCommands.setPage(this.pagerView, selectedPage);
+      PagerViewCommands.setPageWithAnimation(this.pagerView, selectedPage);
     }
   };
 
@@ -142,6 +154,18 @@ export class PagerView extends React.Component<PagerViewProps> {
     }
   }
 
+  componentDidUpdate(prevProps: Readonly<PagerViewProps>): void {
+    if (this.props.page === undefined) {
+      return;
+    }
+    if (this.props.page !== this.state.page) {
+      this.setState({ page: this.props.page });
+      if (prevProps.page === this.props.page) {
+        this.setPageWithoutAnimation(this.props.page);
+      }
+    }
+  }
+
   render() {
     return (
       <PagerViewView
@@ -149,13 +173,27 @@ export class PagerView extends React.Component<PagerViewProps> {
         ref={(ref) => {
           this.pagerView = ref;
         }}
-        style={this.props.style}
+        style={[
+          this.props.style,
+          this.props.pageMargin
+            ? {
+                marginHorizontal: -this.props.pageMargin / 2,
+              }
+            : null,
+          {
+            flexDirection:
+              this.props.orientation === 'vertical' ? 'column' : 'row',
+          },
+        ]}
         layoutDirection={this.deducedLayoutDirection}
         onPageScroll={this._onPageScroll}
         onPageScrollStateChanged={this._onPageScrollStateChanged}
         onPageSelected={this._onPageSelected}
         onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}
-        children={childrenWithOverriddenStyle(this.props.children)}
+        children={childrenWithOverriddenStyle(
+          this.props.children,
+          this.props.pageMargin
+        )}
       />
     );
   }
diff --git a/src/PagerViewNativeComponent.ts b/src/PagerViewNativeComponent.ts
index af9e655e..13e828a4 100644
--- a/src/PagerViewNativeComponent.ts
+++ b/src/PagerViewNativeComponent.ts
@@ -24,6 +24,8 @@ export type OnPageScrollStateChangedEventData = Readonly<{
 }>;
 
 export interface NativeProps extends ViewProps {
+  page?: Int32;
+  animated?: WithDefault<boolean, true>;
   scrollEnabled?: WithDefault<boolean, true>;
   layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
   initialPage?: Int32;
@@ -41,7 +43,7 @@ export interface NativeProps extends ViewProps {
 type PagerViewViewType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
-  setPage: (
+  setPageWithAnimation: (
     viewRef: React.ElementRef<PagerViewViewType>,
     selectedPage: Int32
   ) => void;
@@ -57,7 +59,7 @@ export interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
-    'setPage',
+    'setPageWithAnimation',
     'setPageWithoutAnimation',
     'setScrollEnabledImperatively',
   ],
diff --git a/src/utils.tsx b/src/utils.tsx
index 6b5fbffe..0167992a 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,18 +1,21 @@
 import React, { Children, ReactNode } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
-export const childrenWithOverriddenStyle = (children?: ReactNode) => {
+export const childrenWithOverriddenStyle = (
+  children?: ReactNode,
+  pageMargin = 0
+) => {
   return Children.map(children, (child) => {
-    const element = child as React.ReactElement;
     return (
-      // Add a wrapper to ensure layout is calculated correctly
-      <View style={StyleSheet.absoluteFill} collapsable={false}>
-        {/* @ts-ignore */}
-        {React.cloneElement(element, {
-          ...element.props,
-          // Override styles so that each page will fill the parent.
-          style: [element.props.style, StyleSheet.absoluteFill],
-        })}
+      <View
+        style={{
+          height: '100%',
+          width: '100%',
+          paddingHorizontal: pageMargin / 2,
+        }}
+        collapsable={false}
+      >
+        {child}
       </View>
     );
   });