Added a close button to the modal

pankaj-pp · Jun 28, 2019 · bb7b309 · bb7b309
1 parent 36fe23f
commit bb7b309
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/example/App.js b/example/App.js
@@ -3,7 +3,7 @@ import BrightcoveHeader from './components/video-header';
 import BrightcoveScroll from './components/video-scroll';
 import ArticleScreen from './components/article';
 import VideoScreen from './components/video';
-import { createStackNavigator, createAppContainer } from 'react-navigation';
+import { createStackNavigator, createAppContainer, getActiveChildNavigationOptions } from 'react-navigation';
 
 const ArticleStack = createStackNavigator(
 	{
@@ -14,22 +14,23 @@ const ArticleStack = createStackNavigator(
 			screen: VideoScreen
 		}
 	},
-  {
-    mode: 'modal',
-	 headerMode: 'none'
-  }
+	{
+		mode: 'modal',
+		headerMode: 'none',
+		navigationOptions: ({ navigation, screenProps }) => {
+			return {
+				title: 'Article',
+				...getActiveChildNavigationOptions(navigation, screenProps),
+			}
+		}
+	}
 );
 
 const MainNavigator = createStackNavigator({
 	Home: { screen: Home },
 	BrightcoveHeader: { screen: BrightcoveHeader },
 	BrightcoveScroll: { screen: BrightcoveScroll },
-	ArticleStack: {
-		screen: ArticleStack,
-		navigationOptions: ({ navigation }) => ({
-			title: 'Article',
-		})
-	}
+	ArticleStack: { screen: ArticleStack }
 });
 
 const App = createAppContainer(MainNavigator);

diff --git a/example/components/video.js b/example/components/video.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
 import { Header } from 'react-navigation';
 import BCPlayer from './BCPlayer';
 
@@ -11,6 +11,17 @@ const AppHeader = (headerProps) => <Header {... headerProps} />;
 
 export default class Video extends Component {
 
+	static navigationOptions = ({ navigation }) => {
+		return {
+			headerTitle: 'Video',
+			headerLeft: null,
+			headerRight:
+				<TouchableOpacity onPress={()=>{navigation.navigate('Article')}}>
+					<Text style={styles.close}>X Close</Text>
+				</TouchableOpacity>
+		}
+	};
+
 	render() {
 		return (
 			<View style={styles.container}>
@@ -51,5 +62,8 @@ const styles = StyleSheet.create({
 		width: '100%',
 		aspectRatio: 16/9,
 		backgroundColor: '#000000'
+	},
+	close: {
+		paddingRight: 20
 	}
 });