react-native-video-step-3.js

import { MaterialIcons, Octicons } from '@expo/vector-icons';

export default class App extends React.Component {
	state = {
		mute: false,
		fullScreen: false,
		shouldPlay: false,
	}

  render() {
		const { width } = Dimensions.get('window');
		
    return (
      <View style={styles.container}>
				<View style={styles.videoContainer}>
						<Text> React Native Video </Text>
						<Video
							source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
							paused={this.state.shouldPlay}
							shouldPlay
							resizeMode="cover"
							style={{ width: 300, height: 350 }}
						/>
					<View style={styles.controlBar}>
						<MaterialIcons name="play-arrow" size={30} color="white" />
						<MaterialIcons 
							name={this.state.mute ? 'volume-mute' : 'volume-up'} 
							size={30} 
							color="white" 
							/>
						<MaterialIcons name='fullscreen' size={30} color="white" />
					</View>
				</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
	},
	videoContainer: {
		overflow: 'hidden'
	},
	controlBar: {
    position: "absolute",
		zIndex: 99999,
    left: 0,
    bottom: 0,
    right: 0,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
		height: 45,
		backgroundColor: "rgba(0, 0, 0, 0.2)",
	}
});