hayanisaid

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
 
/*==========  Mobile First Method  ==========*/
 
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

hayanisaid

'use strict';

var trip1 = {
    destination: "Chennai",
    id: 1
};

var trip2 = {
    destination: "Ooty",
    id: 2

hayanisaid

1. Install Node.js

• Follow the steps given here to install Node.js and NPM.
• Verify whether NPM is installed by typing npm -v in a terminal window.

2. Install React Native CLI

• npm install -g react-native-cli

3. Setup Android Development Environment

• Download and install Android Studio as explained here.
• Run Android Studio and open the SDK Manager. Under the SDK Platforms tab, check Show Package Details, expand Android 6.0 (Marshmallow) and check the following:

hayanisaid

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"center"}}>
<View style={{width:200,height:150,backgroundColor:"red",padding:10}}>
<Text style={{fontSize:20, color:"#666"}}>Styled with style props</Text>
</View>
</View>

hayanisaid

import React, {Component} from 'react';
import { Text, View} from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"stretch"}}>
<View style={{flex:1,backgroundColor:"red"}}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={{flex:1,backgroundColor:"blue"}}>

hayanisaid

const styles = StyleSheet.create({
container: {
flex:1,
justifyContent:"center",
backgroundColor:"#fff",
alignItems:"stretch"
},
title: {
fontSize:20,
color:"#fff"

hayanisaid

<View style={styles.container}>
<View style={styles.item1}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item2}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item3}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>

hayanisaid

import React, {Component} from 'react';
import { StyleSheet,Text, View} from 'react-native';
import styled from 'styled-components'
const Container=styled.View`
    flex:1;
    padding:50px 0;
    justify-content:center;
    background-color:#f4f4f4;
    align-items:center
`

hayanisaid

import React, {Component} from 'react';
import { StyleSheet,Text, View} from 'react-native';
import styled from 'styled-components'
const Container=styled.View`
    flex:1;
    padding:50px 0;
    justify-content:center;
    background-color:#f4f4f4;
    align-items:center
`

hayanisaid

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, { Component } from "react";