Instantly share code, notes, and snippets.
Last active
July 12, 2016 11:06
-
Star
(2)
2
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save callmephilip/8f36e30ede274638ce091749d6e9bc85 to your computer and use it in GitHub Desktop.
Complex navigation with React Native experimental navigation API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * | |
| * 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment