|  | @@ -1,10 +1,10 @@
 | 
	
		
			
			| 1 | 1 |  import React, {Component} from 'react';
 | 
	
		
			
			| 2 | 2 |  import {
 | 
	
		
			
			|  | 3 | +  StyleSheet,
 | 
	
		
			
			| 3 | 4 |    Text,
 | 
	
		
			
			| 4 | 5 |    View,
 | 
	
		
			
			| 5 |  | -  ScrollView,
 | 
	
		
			
			| 6 | 6 |    TouchableOpacity,
 | 
	
		
			
			| 7 |  | -  StyleSheet
 | 
	
		
			
			|  | 7 | +  Dimensions
 | 
	
		
			
			| 8 | 8 |  } from 'react-native';
 | 
	
		
			
			| 9 | 9 |  
 | 
	
		
			
			| 10 | 10 |  export default class LightBoxScreen extends Component {
 | 
	
	
		
			
			|  | @@ -13,16 +13,19 @@ export default class LightBoxScreen extends Component {
 | 
	
		
			
			| 13 | 13 |    }
 | 
	
		
			
			| 14 | 14 |    render() {
 | 
	
		
			
			| 15 | 15 |      return (
 | 
	
		
			
			| 16 |  | -      <View style={{width: 300, height: 200, padding: 20}}>
 | 
	
		
			
			| 17 |  | -
 | 
	
		
			
			| 18 |  | -        <Text>
 | 
	
		
			
			| 19 |  | -          This is a LightBox
 | 
	
		
			
			|  | 16 | +      <View style={styles.container}>
 | 
	
		
			
			|  | 17 | +        <Text style={styles.welcome}>
 | 
	
		
			
			|  | 18 | +          This is a LightBox!
 | 
	
		
			
			| 20 | 19 |          </Text>
 | 
	
		
			
			| 21 |  | -
 | 
	
		
			
			| 22 |  | -        <TouchableOpacity onPress={ this.onDismissPress.bind(this) }>
 | 
	
		
			
			|  | 20 | +        {
 | 
	
		
			
			|  | 21 | +          this.props.greeting &&
 | 
	
		
			
			|  | 22 | +            <Text style={[styles.welcome, {fontSize: 16, marginTop: 20}]}>
 | 
	
		
			
			|  | 23 | +              {this.props.greeting}
 | 
	
		
			
			|  | 24 | +            </Text>
 | 
	
		
			
			|  | 25 | +        }
 | 
	
		
			
			|  | 26 | +        <TouchableOpacity onPress={() => this.onDismissPress()}>
 | 
	
		
			
			| 23 | 27 |            <Text style={styles.button}>Dismiss</Text>
 | 
	
		
			
			| 24 | 28 |          </TouchableOpacity>
 | 
	
		
			
			| 25 |  | -
 | 
	
		
			
			| 26 | 29 |        </View>
 | 
	
		
			
			| 27 | 30 |      );
 | 
	
		
			
			| 28 | 31 |    }
 | 
	
	
		
			
			|  | @@ -31,7 +34,25 @@ export default class LightBoxScreen extends Component {
 | 
	
		
			
			| 31 | 34 |    }
 | 
	
		
			
			| 32 | 35 |  }
 | 
	
		
			
			| 33 | 36 |  
 | 
	
		
			
			| 34 |  | -const styles = StyleSheet.create({
 | 
	
		
			
			|  | 37 | +var styles = StyleSheet.create({
 | 
	
		
			
			|  | 38 | +  container: {
 | 
	
		
			
			|  | 39 | +    flex: 1,
 | 
	
		
			
			|  | 40 | +    width: Dimensions.get('window').width * 0.8,
 | 
	
		
			
			|  | 41 | +    justifyContent: 'center',
 | 
	
		
			
			|  | 42 | +    alignItems: 'center',
 | 
	
		
			
			|  | 43 | +    backgroundColor: 'white',
 | 
	
		
			
			|  | 44 | +    borderRadius: 10
 | 
	
		
			
			|  | 45 | +  },
 | 
	
		
			
			|  | 46 | +  welcome: {
 | 
	
		
			
			|  | 47 | +    fontSize: 20,
 | 
	
		
			
			|  | 48 | +    textAlign: 'center',
 | 
	
		
			
			|  | 49 | +    margin: 10,
 | 
	
		
			
			|  | 50 | +  },
 | 
	
		
			
			|  | 51 | +  instructions: {
 | 
	
		
			
			|  | 52 | +    textAlign: 'center',
 | 
	
		
			
			|  | 53 | +    color: '#333333',
 | 
	
		
			
			|  | 54 | +    marginBottom: 5,
 | 
	
		
			
			|  | 55 | +  },
 | 
	
		
			
			| 35 | 56 |    button: {
 | 
	
		
			
			| 36 | 57 |      textAlign: 'center',
 | 
	
		
			
			| 37 | 58 |      fontSize: 18,
 |