[Minor] Update Stacks examples for better clarity (#1341)

* Update Stacks{In,Over}Tabs example for better clarity

* Remove redundant navigationOptions in stack examples

* Update text in ReduxExample to clarify which route is being used

examples/NavigationPlayground/js/StacksInTabs.js

@@ -20,15 +20,15 @@ const MyNavScreen = ({ navigation, banner }) => (
     <SampleText>{banner}</SampleText>
     <Button
       onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
-      title="Go to a profile screen"
+      title="Open profile screen"
     />
     <Button
       onPress={() => navigation.navigate('NotifSettings')}
-      title="Go to notification settings"
+      title="Open notifications screen"
     />
     <Button
       onPress={() => navigation.navigate('SettingsTab')}
-      title="Go to settings"
+      title="Go to settings tab"
     />
     <Button
       onPress={() => navigation.goBack(null)}
@@ -50,20 +50,17 @@ const MyProfileScreen = ({ navigation }) => (
     navigation={navigation}
   />
 );
-MyProfileScreen.navigationOptions = ({ navigation }) => ({
-  title: `${navigation.state.params.name}'s Profile!`,
-});
 
 const MyNotificationsSettingsScreen = ({ navigation }) => (
   <MyNavScreen
-    banner="Notification Settings"
+    banner="Notifications Screen"
     navigation={navigation}
   />
 );
 
 const MySettingsScreen = ({ navigation }) => (
   <MyNavScreen
-    banner="Settings"
+    banner="Settings Screen"
     navigation={navigation}
   />
 );
@@ -96,7 +93,7 @@ const SettingsTab = StackNavigator({
   NotifSettings: {
     screen: MyNotificationsSettingsScreen,
     navigationOptions: {
-      title: 'Notification Settings',
+      title: 'Notifications',
     },
   },
 });

examples/NavigationPlayground/js/StacksOverTabs.js

@@ -20,15 +20,15 @@ const MyNavScreen = ({ navigation, banner }) => (
     <SampleText>{banner}</SampleText>
     <Button
       onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
-      title="Go to a profile screen"
+      title="Open profile screen"
     />
     <Button
       onPress={() => navigation.navigate('NotifSettings')}
-      title="Go to notification settings"
+      title="Open notifications screen"
     />
     <Button
       onPress={() => navigation.navigate('SettingsTab')}
-      title="Go to settings"
+      title="Go to settings tab"
     />
     <Button
       onPress={() => navigation.goBack(null)}
@@ -50,20 +50,17 @@ const MyProfileScreen = ({ navigation }) => (
     navigation={navigation}
   />
 );
-MyProfileScreen.navigationOptions = ({ navigation }) => {
-  title: `${navigation.state.params.name}'s Profile!`
-};
 
 const MyNotificationsSettingsScreen = ({ navigation }) => (
   <MyNavScreen
-    banner="Notification Settings"
+    banner="Notifications Screen"
     navigation={navigation}
   />
 );
 
 const MySettingsScreen = ({ navigation }) => (
   <MyNavScreen
-    banner="Settings"
+    banner="Settings Screen"
     navigation={navigation}
   />
 );
@@ -73,6 +70,7 @@ const TabNav = TabNavigator({
     screen: MyHomeScreen,
     path: '/',
     navigationOptions: {
+      title: 'Welcome',
       tabBarLabel: 'Home',
       tabBarIcon: ({ tintColor, focused }) => (
         <Ionicons
@@ -87,7 +85,7 @@ const TabNav = TabNavigator({
     screen: MySettingsScreen,
     path: '/settings',
     navigationOptions: {
-      tabBarLabel: 'Settings',
+      title: 'Settings',
       tabBarIcon: ({ tintColor, focused }) => (
         <Ionicons
           name={focused ? 'ios-settings' : 'ios-settings-outline'}
@@ -110,7 +108,7 @@ const StacksOverTabs = StackNavigator({
   NotifSettings: {
     screen: MyNotificationsSettingsScreen,
     navigationOptions: {
-      title: 'Notification Settings',
+      title: 'Notifications',
     },
   },
   Profile: {
@@ -120,8 +118,6 @@ const StacksOverTabs = StackNavigator({
       title: `${navigation.state.params.name}'s Profile!`
     },
   },
-}, {
-  headerMode: 'none',
 });
 
 export default StacksOverTabs;

examples/ReduxExample/src/components/AuthButton.js

@@ -3,17 +3,17 @@ import { connect } from 'react-redux';
 import { Button } from 'react-native';
 import { NavigationActions } from 'react-navigation';
 
-const AuthButton = ({ logout, login, isLoggedIn }) => (
+const AuthButton = ({ logout, loginScreen, isLoggedIn }) => (
   <Button
-    title={isLoggedIn ? 'Log Out' : 'Log In'}
-    onPress={isLoggedIn ? logout : login}
+    title={isLoggedIn ? 'Log Out' : 'Open Login Screen'}
+    onPress={isLoggedIn ? logout : loginScreen}
   />
 );
 
 AuthButton.propTypes = {
   isLoggedIn: PropTypes.bool.isRequired,
   logout: PropTypes.func.isRequired,
-  login: PropTypes.func.isRequired,
+  loginScreen: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => ({
@@ -22,7 +22,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   logout: () => dispatch({ type: 'Logout' }),
-  login: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
+  loginScreen: () => dispatch(NavigationActions.navigate({ routeName: 'Login' })),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);