Complex navigation with React Native experimental navigation API

navigation-reducer.js

/*
*
* Navigation reducer
* !! Do NOT do this. I am putting this here just for illustraition purposes to demonstrate where i got stuck with
*    this approach
*/

import ReactNative from 'react-native';
import Immutable from 'immutable';

const { NavigationExperimental } = ReactNative;
const {
  Reducer: NavigationReducer
} = NavigationExperimental;

const simpleIcon = {
  uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==',
  scale: 3
};

const tabs = NavigationReducer.TabsReducer({
  key: 'ApplicationTabs',
  initialIndex: 0,
  tabReducers: [
    NavigationReducer.StackReducer({
      getPushedReducerForAction: (action) => {
        if (action.type === 'push' && action.parent === 'notifs') {
          return (state) => (state || action.route);
        }
        return null;
      },
      initialState: {
        key: 'notifs',
        icon: simpleIcon,
        selectedIcon: simpleIcon,
        title: 'Notifications',
        index: 0,
        children: [
          {
            key: 'base',
            type: 'NotifsPage',
            title: 'Feed'
          },
        ],
      },
    }),
    NavigationReducer.StackReducer({
      getPushedReducerForAction: (action) => {
        return null;
      },
      initialState: {
        key: 'settings',
        icon: simpleIcon,
        selectedIcon: simpleIcon,
        title: 'Settings',
        index: 0,
        children: [
          {key: 'base', type: 'SettingsPage'},
        ],
      },
    }),
    NavigationReducer.StackReducer({
      getPushedReducerForAction: (action) => {
        return null;
      },
      initialState: {
        key: 'profile',
        icon: simpleIcon,
        selectedIcon: simpleIcon,
        title: 'Profile',
        index: 0,
        children: [
          {key: 'base', type: 'ProfilePage'},
        ],
      },
    }),
  ]
});

const stackReducerForChildren = (state, action) => {
  console.log('checking on stackReducerForChildren', action);

  const ts = state.children[state.children.length - 1].children;
  const s = Immutable.fromJS(state);
  const parent = action.parent;
  const targetTab = ts.find(t => t.key === parent);
  const targetTabIndex = ts.findIndex(t => t.key === parent);

  console.log('gonna update', targetTab);

  const newTab = NavigationReducer.StackReducer({
    initialState: targetTab
  })(targetTab, action);

  console.log('reduced to', newTab);

  ts[targetTabIndex] = newTab;

  return s.merge(state).toJS();
};

const navigation = NavigationReducer.StackReducer({
  getPushedReducerForAction: (action) => {
    console.log('checking reducer on top');

    if (action.type === 'push' && !action.parent) {
      return (state) => (state || action.route);
    }
    return null;
  },
  getReducerForState: (state) => {
    if (state.key === 'ApplicationTabs') {
      return tabs;
    }
    return null;
  },
  initialState: {
    index: 0,
    key: 'appNavigation',
    children: [
      tabs()
    ],
  },
});

const findReducer = NavigationReducer.FindReducer(
  [navigation, stackReducerForChildren]
);

module.exports = findReducer;