fix: position of dots indicator (#95)

* fix: add patch to react package

* fix: position of page control

* update example

* rename state property

Author: troZee

example/ViewPagerExample.js

@@ -35,6 +35,7 @@ type State = {
   },
   pages: Array<CreatePage>,
   scrollState: PageScrollState,
+  dotsVisible: boolean,
 };
 
 export default class ViewPagerExample extends React.Component<*, State> {
@@ -58,6 +59,7 @@ export default class ViewPagerExample extends React.Component<*, State> {
       },
       pages: pages,
       scrollState: 'idle',
+      dotsVisible: false,
     };
     this.viewPager = React.createRef();
   }
@@ -110,8 +112,12 @@ export default class ViewPagerExample extends React.Component<*, State> {
     );
   }
 
+  toggleDotsVisibility = () => {
+    this.setState(prevState => ({dotsVisible: !prevState.dotsVisible}));
+  };
+
   render() {
-    const {page, pages, animationsAreEnabled} = this.state;
+    const {page, pages, animationsAreEnabled, dotsVisible} = this.state;
     return (
       <SafeAreaView style={styles.container}>
         <ViewPager
@@ -126,7 +132,7 @@ export default class ViewPagerExample extends React.Component<*, State> {
           orientation="horizontal"
           // Lib does not support dynamically transitionStyle change
           transitionStyle="scroll"
-          showPageIndicator
+          showPageIndicator={dotsVisible}
           ref={this.viewPager}>
           {pages.map(p => this.renderPage(p))}
         </ViewPager>
@@ -140,6 +146,11 @@ export default class ViewPagerExample extends React.Component<*, State> {
               this.setState({scrollEnabled: !this.state.scrollEnabled})
             }
           />
+          <Button
+            enabled={true}
+            text={dotsVisible ? 'Hide dots' : 'Show dots'}
+            onPress={this.toggleDotsVisibility}
+          />
           <Button enabled={true} text="Add new page" onPress={this.addPage} />
         </View>
         <View style={styles.buttons}>

ios/ReactNativePageView.m

@@ -292,9 +292,8 @@ - (void)embed {
         [self renderChildrenViewControllers];
         _reactPageIndicatorView = [self createPageIndicator:self];
         _reactPageIndicatorView.hidden = !_showPageIndicator;
-        
+    
         [[self reactViewController] addChildViewController:_reactPageViewController];
-        
         [reactPageViewController.view addSubview:_reactPageIndicatorView];
         [self addSubview:reactPageViewController.view];
         _reactPageViewController.view.frame = [self bounds];
@@ -303,6 +302,12 @@ - (void)embed {
 
         // Add the page view controller's gesture recognizers to the view controller's view so that the gestures are started more easily.
         self.gestureRecognizers = _reactPageViewController.gestureRecognizers;
+        _reactPageIndicatorView.translatesAutoresizingMaskIntoConstraints = NO;
+        NSLayoutConstraint *bottomConstraint = [_reactPageIndicatorView.bottomAnchor constraintEqualToAnchor: self.reactPageViewController.view.bottomAnchor constant:0];
+        NSLayoutConstraint *leadingConstraint = [_reactPageIndicatorView.leadingAnchor constraintEqualToAnchor: self.reactPageViewController.view.leadingAnchor constant:0];
+        NSLayoutConstraint *trailingConstraint = [_reactPageIndicatorView.trailingAnchor constraintEqualToAnchor: self.reactPageViewController.view.trailingAnchor constant:0];
+        [self.reactPageViewController.view addConstraints:@[bottomConstraint,leadingConstraint,trailingConstraint]];
+        [self.reactPageViewController.view layoutIfNeeded];
     } else {
         RCTLog(@"getParentViewController returns nil");
     }
@@ -473,11 +478,7 @@ - (void)shouldShowPageIndicator:(BOOL)showPageIndicator {
 - (UIPageControl *)createPageIndicator:(UIView *)parentView {
     CGPoint parentOrigin = parentView.frame.origin;
     CGSize parentSize = parentView.frame.size;
-    UIPageControl *pageControl = [[UIPageControl alloc]
-                                  initWithFrame:(CGRectMake(parentOrigin.x,
-                                                            parentSize.height - 70,
-                                                            parentSize.width,
-                                                            70))];
+    UIPageControl *pageControl = [[UIPageControl alloc] init];
     pageControl.numberOfPages = _childrenViewControllers.count;
     pageControl.currentPage = _initialPage;
     pageControl.tintColor = UIColor.blackColor;