This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
To init project as a reactnative | |
-> react-native init firstProject | |
To Run Project | |
Inside of your Project Directory | |
-> react-native run-android |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Upload React Native Project on Git | |
Step:1 Create Repository in Git Account | |
Step:2 Go Into the Folder of your project | |
Step:3 Initialize git | |
-> git init |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Commmand To install git | |
step:1 sudo apt-get update | |
step:2 sudo rm /var/lib/apt/lists/lock | |
step:3 sudo rm /var/cache/apt/archives/lock | |
step:4 sudo rm /var/lib/dpkg/lock | |
step:5 sudo apt-get install git | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
< View style = { | |
{ | |
flex: 1, | |
flexDirection: ‘row’, | |
justifyContent: ‘center’, | |
alignItems: ‘stretch’, | |
} | |
} > |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
< View style = { | |
{ | |
flex: 1, | |
flexDirection: ‘row’, | |
justifyContent: ‘center’, | |
alignItems: ‘center’, //changed value of alignItems | |
} | |
} > |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
<View style = {{ | |
flex: 1, | |
flexDirection: ‘column’, | |
alignItems: ‘stretch’, | |
} | |
} > | |
< View style = {{height: 50,backgroundColor: ‘powderblue’}} /> | |
< View style = {{height: 50,backgroundColor: ‘skyblue’}} /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
<View style = { | |
{ | |
flex: 1, | |
flexDirection: ‘column’, | |
alignItems: ‘center’, | |
} | |
} > | |
< View style = {{width: 50,height: 50,backgroundColor: ‘powderblue’}} /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
<View style = { | |
{ | |
flex: 1, | |
flexDirection: ‘column’, | |
justifyContent: ’center’ | |
} | |
} > | |
//changed justifyContent value to the flex-start,flex-end,space-between,space-around |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {Component} from ‘react’; | |
import {AppRegistry,View}from ‘react - native’; | |
export default class FlexDirectionBasics extends Component { | |
render() { | |
return ( | |
<View style = { | |
{ | |
flex: 1, | |
flexDirection: ‘column’ |
OlderNewer