feat(real-world): add dynamic tabs example

winoteam · Mar 15, 2018 · 8a85c2c · 8a85c2c
1 parent 98a07ad
commit 8a85c2c
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/examples/real-world-app/src/App.js b/examples/real-world-app/src/App.js
@@ -55,7 +55,7 @@ class App extends React.Component<Props> {
           )}
         />
         <Tab
-          path="/profile/(likes|bookmarks)"
+          path="/profile/(likes|bookmarks|settings)"
           component={Profile}
           onIndexChange={() => history.replace('/profile/likes')}
           onReset={() => history.replace('/profile/likes')}

diff --git a/examples/real-world-app/src/Profile.js b/examples/real-world-app/src/Profile.js
@@ -109,6 +109,24 @@ class Profile extends React.Component<Props, State> {
               >
                 <Text style={styles.span}>Go to bookmarks</Text>
               </Link>
+              {tabsLength === 2 && (
+                <TouchableOpacity
+                  style={styles.link}
+                  onPress={this.handleToggleSettingsTab}
+                >
+                  <Text style={styles.span}>Add settings tab</Text>
+                </TouchableOpacity>
+              )}
+              {tabsLength === 3 && (
+                <Link
+                  style={styles.link}
+                  replace
+                  component={TouchableOpacity}
+                  to="/profile/settings"
+                >
+                  <Text style={styles.span}>Go to settings</Text>
+                </Link>
+              )}
             </View>
           )}
         />
@@ -128,9 +146,56 @@ class Profile extends React.Component<Props, State> {
               >
                 <Text style={styles.span}>Go to likes</Text>
               </Link>
+              {tabsLength === 2 && (
+                <TouchableOpacity
+                  style={styles.link}
+                  onPress={this.handleToggleSettingsTab}
+                >
+                  <Text style={styles.span}>Add settings tab</Text>
+                </TouchableOpacity>
+              )}
+              {tabsLength === 3 && (
+                <Link
+                  style={styles.link}
+                  replace
+                  component={TouchableOpacity}
+                  to="/profile/settings"
+                >
+                  <Text style={styles.span}>Go to settings</Text>
+                </Link>
+              )}
             </View>
           )}
         />
+        {tabsLength === 3 && (
+          <Tab
+            path="/profile/settings"
+            label="Settings"
+            render={() => (
+              <View style={styles.scene}>
+                <Text>
+                  Current: <Text style={styles.strong}>settings</Text>
+                </Text>
+                <Link
+                  style={styles.link}
+                  replace
+                  component={TouchableOpacity}
+                  to="/profile/likes"
+                >
+                  <Text style={styles.span}>Go to likes</Text>
+                </Link>
+                <Link
+                  style={styles.link}
+                  replace
+                  component={TouchableOpacity}
+                  to="/profile/bookmarks"
+                >
+                  <Text style={styles.span}>Go to bookmarks</Text>
+                </Link>
+              </View>
+            )}
+          />
+        )}
       </Tabs>
     )
   }