Tuesday, March 13, 2018

React native Animations

Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface

React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

import React from 'react';
import { Animated, Text, View } from 'react-native';

class FadeInView extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}

componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 10000, // Make it take a while
}
).start(); // Starts the animation
}

render() {
let { fadeAnim } = this.state;

return (
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
);
}
}

// You can then use your `FadeInView` in place of a `View` in your components:
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeInView>
</View>
)
}

}

Tuesday, March 6, 2018

JavaScript tutorials

JavaScript Tutorial for beginners and professionals is a solution of client side dynamic pages.

JavaScript is an object-based scripting language that is lightweight and cross-platform.

JavaScript is not compiled but translated. The JavaScript Translator (embedded in browser) is responsible to translate the JavaScript code.

Where JavaScript is used

JavaScript is used to create interactive websites. It is mainly used for:

Client-side validation
Dynamic drop-down menus
Displaying data and time
Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box and prompt dialog box)
Displaying clocks etc.

JavaScript Example

<html>

<body>

<h2>Welcome to JavaScript</h2>

document.write("Hello JavaScript by JavaScript");

</script>

</body>

</html>

Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag and external JavaScript file.

3 Places to put JavaScript code

Between the body tag of html
Between the head tag of html
In .js file (external javaScript)

Between the body tag of html

<html>

<body>

<script type="text/javascript">

alert("Hello Javatpoint");

</script>

</body>

</html>

2.Between the head tag of html

<html>

<head>

<script type="text/javascript">

function msg(){

alert("Hello Javatpoint");

}

</script>

</head>

<body>

<p>Welcome to Javascript</p>

<form>

<input type="button" value="click" onclick="msg()"/>

</form>

</body>

</html>

Types of JavaScript Comments

There are two types of comments in JavaScript.

Single-line Comment
Multi-line Comment

JavaScript Variable

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
After first letter we can use digits (0 to 9), for example value1.
JavaScript variables are case sensitive, for example x and X are different variables.

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within the function or block only

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared outside the function or declared with window object is known as global variable

Javascript Data Types

JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.

Primitive data type
Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the variable because it is dynamically used by JavaScript engine. You need to use var here to specify the data type. It can hold any type of values such as numbers, strings etc

var a=40;//holding number
var b="Rahul";//holding string

1). Primitive Data type

There are five types of primitive data types in JavaScript. They are as follows:

1) String, represents sequence of characters e.g. "hello"

2) Number, represents numeric values e.g. 100

3) Boolean, represents boolean value either false or true

2) Non- Primitive

The non-primitive data types are as follows:

1) Object,

2) Array,

3) RegExp

JavaScript Operators

JavaScript operators are symbols that are used to perform operations on operands. For example:

There are following types of operators in JavaScript.

Arithmetic Operators
Comparison (Relational) Operators
Bitwise Operators
Logical Operators
Assignment Operators
Special Operators

JavaScript Functions

avaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

Code reusability: We can call a function several times so it save coding.
Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common task.

syntax:

function functionName([arg1, arg2, ...argN]){
//code to be executed
}

Javascript Function :

<html>

<body>

function msg(){

alert("hello! this is message");

}

</script>

</body>

</html>

Javascript Function Argument :

<html>

<body>

function getcube(number){

alert(number*number*number);

}

</script>

<form>

</form>

</body>

</html>

Javascript Function with return value

<html>

<body>

function getInfo(){

return "hello javatpoint! How r u?";

}

</script>

document.write(getInfo());

</script>

</body>

</html>

JavaScript Objects

A javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript.

JavaScript is template based not class based. Here, we don't create class to get the object. But, we direct create objects.

object by object literal:

object={property1:value1,property2:value2.....propertyN:valueN}

<html>

<body>

emp={id:102,name:"Shyam Kumar",salary:40000}

document.write(emp.id+" "+emp.name+" "+emp.salary);

</script>

</body>

</html>

Creating instance Object

var emp=new Object();

<html>

<body>

var emp=new Object();

emp.id=101;

emp.name="Ravi Malik";

emp.salary=50000;

document.write(emp.id+" "+emp.name+" "+emp.salary);

</script>

</body>

</html>

Object Constructor

Here, you need to create function with arguments. Each argument value can be assigned in the current object by using this keyword.

The this keyword refers to the current object.

<html>

<body>

function emp(id,name,salary){

this.id=id;

this.name=name;

this.salary=salary;

}

e=new emp(103,"Vimal Jaiswal",30000);

document.write(e.id+" "+e.name+" "+e.salary);

</script>

</body>

</html>

JavaScript Array

JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

By array literal
By creating instance of Array directly (using new keyword)
By using an Array constructor (using new keyword)

Array litral

The syntax of creating array using array literal is given below:

var arrayname=[value1,value2.....valueN];
example:

<html>

<body>

var emp=["Sonoo","Vimal","Ratan"];

for (i=0;i<emp.length;i++){

document.write(emp[i] + "<br/>");

}

</script>

</body>

</html>

Instance Array

The syntax of creating array directly is given below:

var arrayname=new Array();
example:

<html>

<body>

var i;

var emp = new Array();

emp[0] = "Arun";

emp[1] = "Varun";

emp[2] = "John";

for (i=0;i<emp.length;i++){

document.write(emp[i] + "<br>");

}

</script>

</body>

</html>

Constructor Array

Here, you need to create instance of array by passing arguments in constructor so that we don't have to provide value explicitly.

The example of creating object by array constructor is given below.

syntax : var emp=new Array(value1,value2,value3);

<html>

<body>

var emp=new Array("Jai","Vijay","Smith");

for (i=0;i<emp.length;i++){

document.write(emp[i] + "<br>");

}

</script>

</body>

</html>

JavaScript String

The JavaScript string is an object that represents a sequence of characters.

There are 2 ways to create string in JavaScript

By string literal
By string object (using new keyword)

String Literal

The string literal is created using double quotes. The syntax of creating string using string literal is given below:

var stringname="string value";

String Object

The syntax of creating string object using new keyword is given below:

Here, new keyword is used to create instance of string.

var stringname=new String("string literal");

String Method

Let's see the list of JavaScript string methods with examples.

charAt(index)

concat(str)

indexOf(str)

lastIndexOf(str)

toLowerCase()

toUpperCase()

slice(beginIndex, endIndex)

trim(

Thursday, February 1, 2018

React Native - ListView

In this chapter, we will show you how to create a list in React Native. We will import List in our Home component and show it on screen.

import React, { Component } from 'react'

import { Text, View, ListView, StyleSheet } from 'react-native'

class List extends Component {

constructor (props) { 

super (props); 

const ds = new ListView.DataSource({ 

rowHasChanged: (r1, r2) => r1 !== r2 }); 

this.state = { 

dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2']) 

}; 

} 

render() {

return (

<ListView 

dataSource = { this.state.dataSource } 

renderRow = { (rowData) => <Text>  

{ rowData } </Text> } 

/> 

)

}

}

export default List

const styles = StyleSheet.create ({

container: {

padding: 10,

marginTop: 3,

backgroundColor: '#d9f9b1',

alignItems: 'center',

},

text: {

color: '#4f603c'

}

})

react native Hello World

Hello World

React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences

import React, { Component } from 'react';

import { AppRegistry, Text } from 'react-native';

export default class HelloWorldApp extends Component {

render() {

return (

<Text>Hello world!</Text>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

react native Props

Most components can be customized when they are created, with different parameters. These creation parameters are called props.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => Bananas);

react native State

The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated.

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state

Using State

This is our root component. We are just importing Home which will be used in most of the chapters

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
constructor(props) {
super(props);
this.state = {isShowingText: true};

// Toggle the state every second
setInterval(() => {
this.setState(previousState => {
return { isShowingText: !previousState.isShowingText };
});
}, 1000);
}

render() {
let display = this.state.isShowingText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}

export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

react native Style

With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}

const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);