change TabBar renderScene per RN 0.24 signature change

README.md

@@ -102,8 +102,9 @@ class App extends React.Component {
 | type | string | 'push' or 'jump' | Defines how the new screen is added to the navigator stack. One of `push`, `jump`, `replace`, `reset`. If parent container is tabbar (tabs=true), jump will be automatically set.
 | tabs| bool | false | Defines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If no `component` is defined, built-in `TabBar` is used as renderer. All child scenes are wrapped into own navbar.
 | initial | bool | false | Set to `true` if this is the initial scene |
-| duration | number | 250 | Duration of transition (in ms) |
+| duration | number | | optional. acts as a shortcut to writing an `applyAnimation` function with `Animated.timing` for a given duration (in ms). |
 | direction | string | 'horizontal' | direction of animation horizontal/vertical |
+| applyAnimation | function | | optional if provided overrides the default spring animation |
 | title | string | null | The title to be displayed in the navigation bar |
 | navBar | React.Component | | optional custom NavBar for the scene. Check built-in NavBar of the component for reference |
 | hideNavBar | bool | false | hides the navigation bar for this scene |

src/DefaultRenderer.js

@@ -47,20 +47,31 @@ export default class DefaultRenderer extends Component {
         const selected = navigationState.children[navigationState.index];
         //return <DefaultRenderer key={selected.key} navigationState={selected}/>
 
-        const DEFAULT_DURATION = 250;
-        const stateDuration = navigationState.duration >= 0 ? navigationState.duration : DEFAULT_DURATION;
-        const duration = selected.duration >= 0 ? selected.duration : stateDuration;
+        let applyAnimation = selected.applyAnimation || navigationState.applyAnimation;
+        let style = selected.style || navigationState.style;
+        let direction = selected.direction || navigationState.direction || "horizontal";
+
+        let optionals = {};
+        if (applyAnimation) {
+            optionals.applyAnimation = applyAnimation;
+        } else {
+            let duration = selected.duration;
+            if (duration === null || duration === undefined) duration = navigationState.duration;
+            if (duration !== null && duration !== undefined) {
+                optionals.applyAnimation = function (pos, navState) {
+                    Animated.timing(pos, {toValue: navState.index, duration}).start();
+                };
+            }
+        }
 
         return (
             <NavigationAnimatedView
                 navigationState={navigationState}
-                style={[styles.animatedView, navigationState.style]}
+                style={[styles.animatedView, style]}
                 renderOverlay={this._renderHeader}
-                direction={navigationState.direction || "horizontal"}
-                setTiming={(pos, navState) =>
-                    Animated.timing(pos, {toValue: navState.index, duration}).start()
-                }
+                direction={direction}
                 renderScene={this._renderCard}
+                {...optionals}
             />
         );
     }
@@ -76,6 +87,7 @@ export default class DefaultRenderer extends Component {
         return (
             <NavigationCard
                 {...props}
+                style={props.scene.navigationState.style}
                 key={"card_" + props.scene.navigationState.key}
                 direction={props.scene.navigationState.direction || "horizontal"}
                 panHandlers={props.scene.navigationState.panHandlers }

src/TabBar.js

@@ -22,6 +22,17 @@ export default class extends Component {
         }
         Actions[el.props.name]();
     }
+
+    _renderScene(props) {
+        if (props.layout) {
+            // for 0.24+, props is /*NavigationSceneRendererProps*/ (add flow def above when phasing out < 0.24 support)
+            return <DefaultRenderer key={props.scene.navigationState.key} navigationState={props.scene.navigationState}/>;
+        } else {
+            // for < 0.24
+            return <DefaultRenderer key={props.key} navigationState={props} />;
+        }
+    }
+
     render(){
         const state = this.props.navigationState;
         let selected = state.children[state.index];
@@ -33,12 +44,7 @@ export default class extends Component {
                     <NavigationView
                         navigationState={this.props.navigationState}
                         style={{flex:1}}
-                        renderScene={(tabState, index) => (
-                          <DefaultRenderer
-                            key={tabState.key}
-                            navigationState={tabState}
-                          />
-                        )}
+                        renderScene={this._renderScene}
                     />
             {!hideTabBar && state.children.filter(el=>el.icon).length>0 && <Tabs style={[{backgroundColor:"white"}, state.tabBarStyle]} onSelect={this.onSelect.bind(this)} {...state}
                                                                                  selected={state.children[state.index].sceneKey}>