AlaaEddinAlbarghoth · December 27, 2019 10:19
diff --git a/ReactNative1.js b/ReactNative1.js
 // ES6 import statement, we import the entire react library to a variable called react
 import React from 'react';

 // When you use these new tags, instead of html tags, then when they rendered, they
 // will rendered to native components on mobile platforms, and not a browser components like in React..
 // View is the container, Text is like TextView
 // App registry is important to register views in the screen
 import {
  View,
  Text,
  StatusBar,
  StyleSheet,
  ImageBackground,
  Dimensions,
 } from 'react-native';

 import picSana from '../assets/t.jpg';
 // Here we will user react to declare a react component. this is an object called App
 // and it will be an extension of the react component, So it is a component,
 // at minimum react component needs a 'render' method .
 class Sample1 extends React.Component {
  // When we ever use react we need to return UI from this component
  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={false} />
        <Text style={[styles.defaultText, styles.selectedText]}>Alaa</Text>
        <Text style={styles.defaultText}>Eddin</Text>
        <Text style={styles.defaultText}>Albarghoth</Text>
      </View>
    );
  }
 }

 //  <Image source={picSana} style={styles.pic} />
 export default class Sample extends React.Component {
  // When we ever use react we need to return UI from this component
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground source={picSana} style={styles.pic}>
          <Text style={styles.userName}>Sana</Text>
        </ImageBackground>
         <ImageBackground source={picSana} style={styles.pic}>
          <Text style={styles.userName}>Sana</Text>
        </ImageBackground>
      </View>
    );
  }
 }

 // Flexbox allows us to specify where to place elements
 // So the way Flexbox works, is there's a flex container, which in this case is the view, and there are flex children.
 const styles = StyleSheet.create({
  pic: {
    // flex: 1,
    height: Dimensions.get('window').height / 3,
    width: Dimensions.get('window').width / 2,
    //resizeMode: 'repeat',
    // when we contain the image, we keep the dimensions in track, while containing the image height of the container.
    resizeMode: 'contain',
    // Now, covering is also keeping the image dimensions, but it sets the image to the width of the container. So there, we have two images, and they're taking up the full screen
    // resizeMode: 'cover',
    borderRadius: 100,
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    padding: 16,
    margin: 16,
  },
  container: {
    // here mean all the view
    flex: 1,
    // in React Native the flex property works more like the flex-grow property in regular browser CSS.
    flexDirection: 'row',
    // justify the children of the container, So justify-content works along the main axis.
    // In this case, our flex direction is a row, so our main axis the horizontal axis.
    // and when it is column (by default it is), it will be vertical axis
    justifyContent: 'center',
    alignItems: 'center',
    // alignItems: 'flex-start',
    backgroundColor: '#DDD',
  },
  defaultText: {
    // if I gave our default text a flex of one, then each of the text blocks will grow to fill out the remainder of the row.
    // So the justify-content center no longer matters, because all of our elements are growing and expanding the whole row
    // the flex container is a row
    // flex: 1,
    textAlign: 'center',
    fontSize: 22,
    padding: 10,
    margin: 5,
    borderWidth: StyleSheet.hairlineWidth,
    color: 'black',
  },
  selectedText: {
    alignSelf: 'flex-start',
    //flex: 1,
    backgroundColor: 'yellow',
    color: 'blue',
    fontWeight: 'bold',
  },
  userName: {
    backgroundColor: 'rgba(0,0,0,.7)',
    fontSize: 30,
    color: 'white',
    padding: 10,
  },
 });

 // Here we start the sample application, the first component the user will see is this app component
 // AppRegistry.registerComponent('SampleApp', () => App)
	// ES6 import statement, we import the entire react library to a variable called react
	import React from 'react';

	// When you use these new tags, instead of html tags, then when they rendered, they
	// will rendered to native components on mobile platforms, and not a browser components like in React..
	// View is the container, Text is like TextView
	// App registry is important to register views in the screen
	import {
	View,
	Text,
	StatusBar,
	StyleSheet,
	ImageBackground,
	Dimensions,
	} from 'react-native';

	import picSana from '../assets/t.jpg';
	// Here we will user react to declare a react component. this is an object called App
	// and it will be an extension of the react component, So it is a component,
	// at minimum react component needs a 'render' method .
	class Sample1 extends React.Component {
	// When we ever use react we need to return UI from this component
	render() {
	return (
	<View style={styles.container}>
	<StatusBar hidden={false} />
	<Text style={[styles.defaultText, styles.selectedText]}>Alaa</Text>
	<Text style={styles.defaultText}>Eddin</Text>
	<Text style={styles.defaultText}>Albarghoth</Text>
	</View>
	);
	}
	}

	// <Image source={picSana} style={styles.pic} />
	export default class Sample extends React.Component {
	// When we ever use react we need to return UI from this component
	render() {
	return (
	<View style={styles.container}>
	<ImageBackground source={picSana} style={styles.pic}>
	<Text style={styles.userName}>Sana</Text>
	</ImageBackground>
	<ImageBackground source={picSana} style={styles.pic}>
	<Text style={styles.userName}>Sana</Text>
	</ImageBackground>
	</View>
	);
	}
	}

	// Flexbox allows us to specify where to place elements
	// So the way Flexbox works, is there's a flex container, which in this case is the view, and there are flex children.
	const styles = StyleSheet.create({
	pic: {
	// flex: 1,
	height: Dimensions.get('window').height / 3,
	width: Dimensions.get('window').width / 2,
	//resizeMode: 'repeat',
	// when we contain the image, we keep the dimensions in track, while containing the image height of the container.
	resizeMode: 'contain',
	// Now, covering is also keeping the image dimensions, but it sets the image to the width of the container. So there, we have two images, and they're taking up the full screen
	// resizeMode: 'cover',
	borderRadius: 100,
	justifyContent: 'flex-end',
	alignItems: 'flex-end',
	padding: 16,
	margin: 16,
	},
	container: {
	// here mean all the view
	flex: 1,
	// in React Native the flex property works more like the flex-grow property in regular browser CSS.
	flexDirection: 'row',
	// justify the children of the container, So justify-content works along the main axis.
	// In this case, our flex direction is a row, so our main axis the horizontal axis.
	// and when it is column (by default it is), it will be vertical axis
	justifyContent: 'center',
	alignItems: 'center',
	// alignItems: 'flex-start',
	backgroundColor: '#DDD',
	},
	defaultText: {
	// if I gave our default text a flex of one, then each of the text blocks will grow to fill out the remainder of the row.
	// So the justify-content center no longer matters, because all of our elements are growing and expanding the whole row
	// the flex container is a row
	// flex: 1,
	textAlign: 'center',
	fontSize: 22,
	padding: 10,
	margin: 5,
	borderWidth: StyleSheet.hairlineWidth,
	color: 'black',
	},
	selectedText: {
	alignSelf: 'flex-start',
	//flex: 1,
	backgroundColor: 'yellow',
	color: 'blue',
	fontWeight: 'bold',
	},
	userName: {
	backgroundColor: 'rgba(0,0,0,.7)',
	fontSize: 30,
	color: 'white',
	padding: 10,
	},
	});

	// Here we start the sample application, the first component the user will see is this app component
	// AppRegistry.registerComponent('SampleApp', () => App)