react-native-screens 1.0.0-alpha.2 → 1.0.0-alpha.23

package/src/screens.web.js

@@ -0,0 +1,113 @@
+import debounce from 'debounce';
+import React from 'react';
+import { Animated, View } from 'react-native';
+
+let _shouldUseScreens = true;
+
+export function useScreens(shouldUseScreens = true) {
+  if (shouldUseScreens) {
+    console.warn(
+      'react-native-screens is not fully supported on this platform yet.'
+    );
+  }
+  _shouldUseScreens = shouldUseScreens;
+}
+
+export function screensEnabled() {
+  return _shouldUseScreens;
+}
+
+function isAnimatedValue(value) {
+  return value && value.__getValue && value.addListener;
+}
+
+function isPropTruthy(prop) {
+  let activeValue = prop;
+  if (isAnimatedValue(prop)) {
+    activeValue = prop.__getValue();
+  }
+
+  return !!activeValue;
+}
+
+export class Screen extends React.Component {
+  static defaultProps = {
+    active: true,
+  };
+
+  listenerId = null;
+
+  constructor(props) {
+    super(props);
+
+    this._onAnimatedValueUpdated = debounce(this._onAnimatedValueUpdated, 10);
+    this._addListener(props.active);
+  }
+
+  componentWillUnmount() {
+    this._removeListener(this.props.active);
+  }
+
+  _addListener = possibleListener => {
+    if (this.listenerId)
+      throw new Error(
+        'Screen: Attempting to observe an animated value while another value is already observed.'
+      );
+    if (isAnimatedValue(possibleListener)) {
+      this.listenerId = possibleListener.addListener(
+        this._onAnimatedValueUpdated
+      );
+    }
+  };
+
+  _removeListener = possibleListener => {
+    if (isAnimatedValue(possibleListener)) {
+      possibleListener.removeListener(this.listenerId);
+      this.listenerId = null;
+    }
+  };
+
+  shouldComponentUpdate({ active: nextActive }) {
+    const { active } = this.props;
+    if (nextActive !== active) {
+      this._removeListener(active);
+      this._addListener(nextActive);
+      this._updateDisplay(isPropTruthy(nextActive));
+      return false;
+    }
+    return true;
+  }
+
+  _onAnimatedValueUpdated = ({ value }) => {
+    this._updateDisplay(!!value);
+  };
+
+  _updateDisplay = isActive => {
+    if (isActive === undefined) {
+      isActive = isPropTruthy(this.props.active);
+    }
+    const display = isActive ? 'flex' : 'none';
+    this.setNativeProps({ style: { display } });
+  };
+
+  setNativeProps = nativeProps => {
+    if (this._view) {
+      this._view.setNativeProps(nativeProps);
+    }
+  };
+
+  _setRef = view => {
+    this._view = view;
+    this._updateDisplay();
+  };
+
+  render() {
+    return <Animated.View {...this.props} ref={this._setRef} />;
+  }
+}
+
+export const ScreenContainer = View;
+
+export const NativeScreen = View;
+
+export const NativeScreenContainer = View;

package/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java

@@ -1,35 +0,0 @@
-package com.swmansion.rnscreens;
-
-import android.content.Context;
-
-import java.util.List;
-
-public class ScreenStack extends ScreenContainer {
-
-  private float mTransitioning;
-
-  public ScreenStack(Context context) {
-    super(context);
-  }
-
-  public void setTransitioning(float transitioning) {
-    if (transitioning != mTransitioning) {
-      mTransitioning = transitioning;
-      markUpdated();
-    }
-  }
-
-  @Override
-  protected boolean isScreenActive(Screen screen, List<Screen> allScreens) {
-    int size = allScreens.size();
-    if (size < 1) {
-      return false;
-    }
-    Screen lastScreen = allScreens.get(size - 1);
-    if (mTransitioning != 0 && size > 1) {
-      Screen secondToLast = allScreens.get(size - 2);
-      return screen == lastScreen || screen == secondToLast;
-    }
-    return screen == lastScreen;
-  }
-}

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackViewManager.java

@@ -1,24 +0,0 @@
-package com.swmansion.rnscreens;
-
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-
-public class ScreenStackViewManager extends ScreenContainerViewManager {
-
-  protected static final String REACT_CLASS = "RNSScreenStack";
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  @Override
-  protected ScreenContainer createViewInstance(ThemedReactContext reactContext) {
-    return new ScreenStack(reactContext);
-  }
-
-  @ReactProp(name = "transitioning", defaultFloat = 0)
-  public void setTransitioning(ScreenStack view, float transitioning) {
-    view.setTransitioning(transitioning);
-  }
-}

package/ios/RNSScreenStack.h

@@ -1,14 +0,0 @@
-#import <React/RCTViewManager.h>
-#import <React/RCTUIManagerObserverCoordinator.h>
-#import "RNSScreenContainer.h"
-
-@interface RNSScreenStackView : UIView <RNSScreenContainerDelegate>
-
-- (void)markChildUpdated;
-- (void)didUpdateChildren;
-
-@end
-
-@interface RNSScreenStackManager : RCTViewManager
-
-@end

package/ios/RNSScreenStack.m

@@ -1,245 +0,0 @@
-#import "RNSScreenStack.h"
-#import "RNSScreen.h"
-
-#import <React/RCTBridge.h>
-#import <React/RCTUIManager.h>
-#import <React/RCTUIManagerUtils.h>
-
-@interface RNSCustomAnimator : NSObject <UIViewControllerAnimatedTransitioning>
-
-@property (nonatomic) BOOL presenting;
-
-@end
-
-@implementation RNSCustomAnimator
-
-- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
-{
-  UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
-  UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
-
-  UIView *container = transitionContext.containerView;
-  if (_presenting) {
-    [container addSubview:toView];
-    toView.alpha = 0.99;
-  } else {
-    [container insertSubview:toView belowSubview:fromView];
-  }
-
-  // When view is added to UINavController it flattens view's translation into frame and makes it
-  // so that the view with translation applied is centered. We often don't want that as we want the
-  // view to animated from side. In order to achieve this we reset the translation applied to the
-  // view such that the frame is at point 0,0 and translation adds an offset from that position.
-  CATransform3D origTransform = toView.layer.transform;
-  toView.transform = CGAffineTransformIdentity;
-  toView.frame = CGRectMake(0, 0, toView.frame.size.width, toView.frame.size.height);
-  toView.layer.transform = origTransform;
-
-  [UIView
-   animateWithDuration:[self transitionDuration:transitionContext]
-   animations:^{
-     // We need to animate at least one property, otherwise the interactive animation wouldn't
-     // behave as expected. I haven't had enough time to investigate and hence as a workaround
-     // we are animating alpha from 1 to 0.99
-     if (_presenting) {
-       toView.alpha = 1.0;
-     } else {
-       fromView.alpha = 0.99;
-     }
-   } completion:^(BOOL finished) {
-     BOOL success = !transitionContext.transitionWasCancelled;
-     if (!success) {
-       [toView removeFromSuperview];
-     }
-     [transitionContext completeTransition:success];
-   }];
-}
-
-- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
-{
-  // as long as it is non-zero it does not matter what value is here, we turn animation into
-  // "interactive" mode anyways which make it be controlled by "progress" property anyways.
-  return 0.1;
-}
-
-@end
-
-@interface RNSScreenStackView () <UINavigationControllerDelegate>
-
-@property (nonatomic) NSInteger transitioning;
-@property (nonatomic) CGFloat progress;
-
-@end
-
-@implementation RNSScreenStackView {
-  BOOL _needUpdate;
-  BOOL _transitioningStateChanged;
-  UINavigationController *_controller;
-  NSMutableSet<RNSScreenView *> *_activeScreens;
-  NSMutableArray<RNSScreenView *> *_reactSubviews;
-  UIPercentDrivenInteractiveTransition *_interactor;
-  __weak RNSScreenStackManager *_manager;
-}
-
-- (instancetype)initWithManager:(RNSScreenStackManager*)manager
-{
-  if (self = [super init]) {
-    _manager = manager;
-    _reactSubviews = [NSMutableArray new];
-    _controller = [[UINavigationController alloc] init];
-    _controller.navigationBarHidden = YES;
-    _controller.delegate = self;
-    _needUpdate = NO;
-    [self addSubview:_controller.view];
-  }
-  return self;
-}
-
-- (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
-                         interactionControllerForAnimationController:(id<UIViewControllerAnimatedTransitioning>)animationController
-{
-  return _interactor;
-}
-
-- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
-                                  animationControllerForOperation:(UINavigationControllerOperation)operation
-                                               fromViewController:(UIViewController *)fromVC
-                                                 toViewController:(UIViewController *)toVC
-{
-  RNSCustomAnimator *animator = [RNSCustomAnimator new];
-  animator.presenting = _transitioning > 0;
-  return animator;
-}
-
-- (void)markUpdated
-{
-  // We want 'updateContainer' to be executed on main thread after all enqueued operations in
-  // uimanager are complete. In order to achieve that we enqueue call on UIManagerQueue from which
-  // we enqueue call on the main queue. This seems to be working ok in all the cases I've tried but
-  // there is a chance it is not the correct way to do that.
-  if (!_needUpdate) {
-    _needUpdate = YES;
-    RCTExecuteOnUIManagerQueue(^{
-      RCTExecuteOnMainQueue(^{
-        _needUpdate = NO;
-        [self updateContainer];
-      });
-    });
-  }
-}
-
-- (void)markChildUpdated
-{
-  // do nothing
-}
-
-- (void)didUpdateChildren
-{
-  // do nothing
-}
-
-- (void)setProgress:(CGFloat)progress
-{
-  _progress = progress;
-  [_interactor updateInteractiveTransition:progress];
-}
-
-- (void)setTransitioning:(NSInteger)transitioning
-{
-  if (_transitioning == transitioning) {
-    return;
-  }
-  _transitioningStateChanged = YES;
-  _transitioning = transitioning;
-  [self markUpdated];
-}
-
-- (void)insertReactSubview:(RNSScreenView *)subview atIndex:(NSInteger)atIndex
-{
-  subview.hidden = NO;
-  subview.reactSuperview = self;
-  [_reactSubviews insertObject:subview atIndex:atIndex];
-  [self markUpdated];
-}
-
-- (void)removeReactSubview:(RNSScreenView *)subview
-{
-  // Right after the view gets removed properties such as transform will get reset. In addition to
-  // that UINavigationController takes a snapshot of the view before it gets completely unmounted.
-  // This causes an effect in which even so the view are detached from the hierarchy they could still
-  // be visible for a frame. This is often undesirable e.g. in a case when we want to slide view
-  // outside of the visible bounds, because as a result it will jump back to position 0,0 right before
-  // the transition is over. To prevent that we hide the view right before removing it from the subviews
-  // array.
-  subview.hidden = YES;
-  subview.reactSuperview = nil;
-  [_reactSubviews removeObject:subview];
-  [self markUpdated];
-}
-
-- (NSArray<UIView *> *)reactSubviews
-{
-  return _reactSubviews;
-}
-
-- (void)didUpdateReactSubviews
-{
-  // do nothing
-}
-
-- (void)updateContainer
-{
-  NSMutableArray<UIViewController *> *controllers = [NSMutableArray new];
-  for (RNSScreenView *screen in _reactSubviews) {
-    [controllers addObject:screen.controller];
-  }
-  if (_transitioningStateChanged) {
-    if (_transitioning == 0) {
-      // finish or cancel transitioning
-      if ([_controller.viewControllers indexOfObject:controllers.lastObject] != NSNotFound) {
-        [_interactor finishInteractiveTransition];
-      } else {
-        [_interactor cancelInteractiveTransition];
-      }
-      _interactor = nil;
-    } else {
-      _interactor = [UIPercentDrivenInteractiveTransition new];
-      if (_transitioning < 0) {
-        [_controller setViewControllers:controllers animated:NO];
-        [_controller popViewControllerAnimated:YES];
-      } else {
-        UIViewController *lastController = [controllers lastObject];
-        [controllers removeLastObject];
-        [_controller setViewControllers:controllers animated:NO];
-        [_controller pushViewController:lastController animated:YES];
-      }
-    }
-    _transitioningStateChanged = NO;
-  } else {
-    [_controller setViewControllers:controllers animated:NO];
-  }
-}
-
-- (void)layoutSubviews
-{
-  [super layoutSubviews];
-  [self reactAddControllerToClosestParent:_controller];
-  _controller.view.frame = self.bounds;
-}
-
-@end
-
-
-@implementation RNSScreenStackManager
-
-RCT_EXPORT_MODULE()
-
-RCT_EXPORT_VIEW_PROPERTY(transitioning, NSInteger)
-RCT_EXPORT_VIEW_PROPERTY(progress, CGFloat)
-
-- (UIView *)view
-{
-  return [[RNSScreenStackView alloc] initWithManager:self];
-}
-
-@end

package/ios/RNScreens.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "self:">
-   </FileRef>
-</Workspace>

package/ios/RNScreens.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

package/ios/RNScreens.xcodeproj/xcuserdata/mdk.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>RNReanimated.xcscheme</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-		<key>RNSScreen.xcscheme</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-		<key>RNScreens.xcscheme</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>37</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>

package/src/screens.js

@@ -1,14 +0,0 @@
-import { Animated, requireNativeComponent } from 'react-native';
-
-export const Screen = Animated.createAnimatedComponent(
-  requireNativeComponent('RNSScreen', null)
-);
-
-export const ScreenContainer = requireNativeComponent(
-  'RNSScreenContainer',
-  null
-);
-
-export const ScreenStack = Animated.createAnimatedComponent(
-  requireNativeComponent('RNSScreenStack', null)
-);