I guess thats it...

aksonov · Sep 6, 2018 · a8428d9 · a8428d9
1 parent e57e509
commit a8428d9
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 59 deletions.
diff --git a/Example/Example.js b/Example/Example.js
@@ -130,9 +130,9 @@ const Example = () => (
         </Lightbox>
         <Scene key="error" component={ErrorModal} />
         <Stack key="login" path="login/:data" titleStyle={{ alignSelf: 'center' }}>
-          <Scene key="loginModal" component={Login} title="Login" onExit={() => console.log('onExit')} leftTitle="Cancel" onLeft={Actions.pop} />
-          <Scene key="loginModal2" component={Login2} title="Login2" backTitle="Back" panHandlers={null} duration={1} />
-          <Scene key="loginModal3" hideNavBar component={Login3} title="Login3" panHandlers={null} duration={1} />
+          <Scene key="loginModal" component={Login} title="Login" onExit={() => console.log('Login: onExit')} leftTitle="Cancel" onLeft={Actions.pop} />
+          <Scene key="loginModal2" component={Login2} title="Login2" onEnter={() => console.log('Login2: onEnter') } backTitle="Back" panHandlers={null} duration={1} />
+          <Scene key="loginModal3" hideNavBar component={Login3} title="Login3" onEnter={() => console.log('Login3: onEnter') } onExit={() => console.log('Login3: onExit')} panHandlers={null} duration={1} />
         </Stack>
       </Modal>
 

diff --git a/Example/components/Home.js b/Example/components/Home.js
@@ -27,6 +27,7 @@ class Home extends React.Component {
     return (
       <View style={styles.container}>
         <Text>Replace screen</Text>
+        <Text>Prop from dynamic method: {this.props.homeProp}</Text>
         <Button onPress={Actions.pop}>Back</Button>
       </View>
     );

diff --git a/Example/components/Login2.js b/Example/components/Login2.js
@@ -21,13 +21,6 @@ export default class extends React.Component {
         <Text>Login page 2</Text>
         <Text>Title: {title}</Text>
         <Text>Data: {data}</Text>
-        <Button
-          onPress={() => {
-            Actions.pop({ refresh: { data: 'Data after pop', title: 'title after pop' } });
-          }}
-        >
-          Back and refresh
-        </Button>
         <Button onPress={() => Actions.loginModal3({ data: 'Custom data3', title: 'Custom title3' })}>Login 3</Button>
       </View>
     );

diff --git a/Example/components/Login3.js b/Example/components/Login3.js
@@ -24,6 +24,10 @@ const popToLogin2 = () => {
   Actions.popTo('loginModal2');
 };
 
+const popAndRefresh = () => {
+  Actions.pop({ refresh: { data: 'Data after pop', title: 'title after pop' }, key: null });
+}
+
 export default class extends React.Component {
   render() {
     const title = this.props.title || 'No Title';
@@ -36,6 +40,7 @@ export default class extends React.Component {
         <Button onPress={Actions.pop}>Back</Button>
         <Button onPress={popToLogin1}>To Login</Button>
         <Button onPress={popToLogin2}>To Login2</Button>
+        <Button onPress={popAndRefresh}>Back and refresh</Button>
         <Button onPress={popToRoot}>To Root</Button>
       </View>
     );

diff --git a/Example/components/Register.js b/Example/components/Register.js
@@ -16,7 +16,7 @@ const Register = () => (
   <View style={styles.container}>
     <Text>Register page</Text>
     <Button onPress={() => Actions.register2()}>Register</Button>
-    <Button onPress={Actions.home}>Replace screen</Button>
+    <Button onPress={() => Actions.home({ homeProp: 'Test of prop refresh!' })}>Replace screen</Button>
     <Button onPress={Actions.pop}>Back</Button>
   </View>
 );

diff --git a/Example/components/TabView.js b/Example/components/TabView.js
@@ -27,12 +27,20 @@ const styles = StyleSheet.create({
 });
 
 class TabView extends React.Component {
-  state = { hideNavBar: false };
+  state = { hideNavBar: false, hideTabBar: false };
 
   toggleNavBar = () => {
     this.setState(prevState => ({ hideNavBar: !prevState.hideNavBar }), () => Actions.refresh({ hideNavBar: this.state.hideNavBar }));
   };
 
+  toggleTabBar = () => {
+    this.setState(prevState => ({ hideTabBar: !prevState.hideTabBar }), () => {
+      Actions.refresh({
+        hideTabBar: this.state.hideTabBar,
+      }, 'tab_2');
+    });
+  };
+
   render() {
     return (
       <View style={[styles.container, this.props.sceneStyle]}>
@@ -94,6 +102,9 @@ class TabView extends React.Component {
         >
           Toggle NavBar
         </Button>
+        {this.props.name === 'tab_2_1' && (
+          <Button onPress={this.toggleTabBar}>Toggle TabBar</Button>
+        )}
       </View>
     );
   }

diff --git a/src/navigationStore.js b/src/navigationStore.js
@@ -136,49 +136,49 @@ function createTabBarOptions({
 }
 function createNavigationOptions(params) {
   const {
-    title,
+    back,
     backButtonImage,
-    navTransparent,
+    backButtonTextStyle,
+    backTitle,
     backToInitial,
+    component,
+    drawerIcon,
+    drawerImage,
+    drawerPosition,
+    getTitle,
+    headerStyle,
+    headerTitleStyle,
+    hideDrawerButton,
     hideNavBar,
     hideTabBar,
-    backTitle,
-    right,
-    rightButton,
+    icon,
+    init,
     left,
     leftButton,
-    navigationBarStyle,
-    headerStyle,
+    leftButtonImage,
+    leftButtonTextStyle,
+    leftTitle,
+    navBar,
     navBarButtonColor,
-    tabBarLabel,
-    tabBarIcon,
-    icon,
-    getTitle,
-    renderTitle,
-    panHandlers,
+    navigationBarStyle,
     navigationBarTitleImage,
     navigationBarTitleImageStyle,
-    component,
-    rightTitle,
-    leftTitle,
-    leftButtonTextStyle,
-    rightButtonTextStyle,
-    backButtonTextStyle,
-    headerTitleStyle,
-    titleStyle,
-    navBar,
-    onRight,
+    navTransparent,
     onLeft,
-    rightButtonImage,
-    leftButtonImage,
-    init,
-    back,
+    onRight,
+    panHandlers,
     renderBackButton,
     renderNavigationBar,
-    hideDrawerButton,
-    drawerIcon,
-    drawerImage,
-    drawerPosition,
+    renderTitle,
+    right,
+    rightButton,
+    rightButtonImage,
+    rightButtonTextStyle,
+    rightTitle,
+    tabBarIcon,
+    tabBarLabel,
+    title,
+    titleStyle,
     ...props
   } = params;
   const NavBar = renderNavigationBar || navBar;
@@ -385,7 +385,7 @@ function createWrapper(Component, wrapBy, store: NavigationStore) {
   // detect if the component is not functional stateless
   // not sure if Component can be string-defined ("div") here
   // may be there is a better way to detect stateless function component, but this should work
-  if (isStatelessComponent(Component)) {
+  if (!isStatelessComponent(Component)) {
     class Wrapped extends React.Component {
       static propTypes = {
         navigation: PropTypes.shape().isRequired,
@@ -404,14 +404,6 @@ function createWrapper(Component, wrapBy, store: NavigationStore) {
         if (this.ref && this.ref.onEnter) {
           this.ref.onEnter(navigation && navigation.state);
         }
-        // WIP
-        this.subs = [];
-        if (this.ref && this.ref.onWillFocus) {
-          this.subs.push(navigation.addListener('willFocus', this.ref.onWillFocus));
-        }
-        if (this.ref && this.ref.onDidFocus) {
-          this.subs.push(navigation.addListener('didFocus', this.ref.onDidFocus));
-        }
       }
 
       componentWillUnmount() {
@@ -422,8 +414,6 @@ function createWrapper(Component, wrapBy, store: NavigationStore) {
         if (this.ref && this.ref.onExit) {
           this.ref.onExit(navigation && navigation.state);
         }
-        // WIP
-        this.subs.forEach(sub => sub.remove());
         this.ref = null;
       }
 
@@ -801,6 +791,7 @@ class NavigationStore {
       } else if (tabBarPosition !== 'top') {
         createTabNavigator = createBottomTabNavigator;
       }
+
       return createTabNavigator(res, {
         lazy,
         tabBarComponent,
@@ -896,19 +887,21 @@ class NavigationStore {
     this.dispatch(DrawerActions.toggleDrawer());
   };
 
-  refresh = (data) => {
+  refresh = (data, sceneKey = null) => {
     const params = filterParam(data);
     const { key } = getActiveState(this.state);
-    console.log('KEY', key);
-    this.dispatch(NavigationActions.setParams({ key, params }));
+    this.dispatch(NavigationActions.setParams({
+      key: (sceneKey ? sceneKey : key),
+      params,
+    }));
   };
 
-  pop = ({ timeout, ...params } = {}) => {
+  pop = ({ timeout, key, ...params } = {}) => {
     const res = filterParam(params);
     if (timeout) {
       setTimeout(() => this.pop(params), timeout);
     } else {
-      this.dispatch(NavigationActions.back());
+      this.dispatch(NavigationActions.back({ key }));
       if (res.refresh) {
         this.refresh(res.refresh);
       }