Merge pull request #2 from fram-x/Feature/AddSupportForRenderFunctions

Add support for configurable render container and screen functions

Author: ericvicenti

src/Transitioner.js

@@ -37,6 +37,31 @@ const defaultCreateTransition = transition => {
 
 const defaultRunTransition = () => {};
 
+const defaultRenderScreen = (
+  ScreenComponent, transition, transitions, transitioningFromState,
+  transitioningToState, transitionRouteKey, navigation, ref, behindScreenStyles,
+) => (
+  <Animated.View
+    style={[{ ...StyleSheet.absoluteFillObject }, behindScreenStyles]}
+    pointerEvents={'auto'}    
+  >
+    <ScreenComponent
+      transition={transition}
+      transitions={transitions}
+      transitioningFromState={transitioningFromState}
+      transitioningToState={transitioningToState}
+      transitionRouteKey={transitionRouteKey}
+      navigation={navigation}
+      transitionRef={ref}
+    />
+  </Animated.View>
+);
+
+const defaultRenderContainer = (transitionRouteKey, transitions, navigation,
+  transitioningFromState, transitioningToState, transitionRefs, children) => (
+  <React.Fragment>{children}</React.Fragment>
+);
+
 const getStateForNavChange = (props, state) => {
   // by this point we know the nav state has changed and it is safe to provide a new state. static
   // getDerivedStateFromProps will never interrupt a transition (when there is state.transitionRouteKey),
@@ -208,6 +233,7 @@ export class Transitioner extends React.Component {
       navState,
       descriptors,
     } = this.state;
+    const { navigation } = this.props;
     const mainRouteKeys = navState.routes.map(r => r.key);
     let routeKeys = mainRouteKeys;
 
@@ -219,9 +245,15 @@ export class Transitioner extends React.Component {
       }
     }
 
+    // Use render container function from last route descriptor
+    const renderContainerFunc = descriptors[transitionRouteKey].options.renderContainer
+      || defaultRenderContainer;
+
     return (
       <TransitionContext.Provider value={this._transitionContext}>
-        {routeKeys.map((key, index) => {
+        {renderContainerFunc(transitionRouteKey, transitions, navigation,
+          transitioningFromState, transitionRouteKey ? navigation.state : null,
+          routeKeys.map((key, index) => {
           const ref =
             this._transitionRefs[key] ||
             (this._transitionRefs[key] = React.createRef());
@@ -246,34 +278,25 @@ export class Transitioner extends React.Component {
               return options.getBehindTransitionAnimatedStyle(aboveTransition);
             }
           );
+
           let transition = transitions[key];
           if (behindScreenStyles.length === 0) {
             // bizarre react-native bug that refuses to clear Animated.View styles unless you do something like this..
             // to reproduce the problem, set a getBehindTransitionAnimatedStyle that puts opacity at 0.5
             behindScreenStyles = [{ opacity: 1 }];
           }
+
+          const renderFunc = descriptor.options.renderScreen || defaultRenderScreen;
+          
           return (
-            <Animated.View
-              style={[{ ...StyleSheet.absoluteFillObject }, behindScreenStyles]}
-              pointerEvents={'auto'}
-              key={key}
-            >
-              <NavigationProvider value={descriptor.navigation}>
-                <C
-                  transition={transition}
-                  transitions={transitions}
-                  transitioningFromState={transitioningFromState}
-                  transitioningToState={
-                    transitionRouteKey ? this.props.navigation.state : null
-                  }
-                  transitionRouteKey={transitionRouteKey}
-                  navigation={descriptor.navigation}
-                  transitionRef={ref}
-                />
-              </NavigationProvider>
-            </Animated.View>
+            <NavigationProvider key={key} value={descriptor.navigation}>              
+              {renderFunc(C, transition, transitions, transitioningFromState,
+                transitionRouteKey ? navigation.state : null,
+                transitionRouteKey, descriptor.navigation, ref, 
+                behindScreenStyles, key)}
+            </NavigationProvider>            
           );
-        })}
+        }))}
       </TransitionContext.Provider>
     );
   }

src/createStackTransitionNavigator.js

@@ -4,5 +4,5 @@ import Transitioner from './Transitioner';
 export default function createStackTransitionNavigator(routeConfigs, options) {
   const router = StackRouter(routeConfigs, options);
 
-  return createNavigator(Transitioner, router);
+  return createNavigator(Transitioner, router, options);
 }