Category: React Native

React-Native Introduction

Introduction

So if you want to build a mobile app for any platfoem what should you learn?

There is a Individual native language for each app i.e Java language for Andoid and Swift/C for IOS?

Native app development for android and ios development are quite different and expensive as well. the way is using cameras is different on both of the platforms.

These days we are looking for the shortest development which can save our time and better app performance. For the same there are many frameworks available React Native, Ionic, Xamarin, PhoneGap etc.

I will focus on React Native part.

What is React Native:

React Native is a framework developed by facebook to creating apps for IOS and Android under one common language JavaScript.

Firstly facebook only develop react native to support IOS. But now we can render apps for android as well.

Why React Native ?

When apps got an update which is written in Swift/C or Java whole app need to be recompiled and a new version need to be distributed app on store again.

To avoide hassle, React Native apps work in a different way, a native app is able to locate specific JavaScript. Which ca be downloaded and compiled app while app is launched on an actual device.

A few facts about react native:

  • React native use node js packages.
  • You can run your project on emulator using Android studio or Xcoder
  • The Index.js file containes the main entry point

So that’s all about react native introduction stay tuned for more tutorials.

How to install NodeJS on Windows PC

How to install NodeJS on Windows PC

In this tutorial I am going to let you know how to install NodeJS in your local computer.

So let’s start with the step 1 : Downloading Node JS

To Download nodeJS visit their official website https://nodejs.org/en/

and download NodeJS package for your windows computer.

Node JS
Node JS

Once you have downloaded node JS package double click on the package and click next as shown in the image:

Node JS
Node JS

Then Click on the next button 3 times and chose your preferred location to

Install nodeJS  and Click on install to get it installed on your computer.

Once Installation process is completed you got a box says finish

just hit the finish button and nodejs is ready to use.

To check if node js is install properly open command prompt on your computer and type npm and hit enter to check.

Node JS
Node JS

if you got the output as above image. then your node js setup is completed.

This is all about How to install NodeJS on Windows PC

Change color as per input React Native

Change color as per input React Native

Hello Everyone, In this tutorial i will going to let you know how to change box color on input text change.

Same tutorial for this on web is already available on this link.

Let’s start with the React Native project and in the first step I am going to start with designing part.

Here’s the code for designing:

<Container>
<Header></Header>
<Contentstyle={{ padding:20 }}>
<Textstyle={{ fontSize:30, textAlign:'center', marginVertical:40 }}>Color Changer</Text>
<ItemfloatingLabel>
<Label>Colour Name</Label>
<Input
onChangeText={(text) =>this.setState({colorname:text.toLowerCase()})}
/>
</Item>
<Viewstyle={{ flex:1, height:200, backgroundColor:this.state.colorname, marginTop:40}}>
</View>
</Content>
</Container>

So In the avobe code I  have complete the designing part you can see the text.toLowerCase() function in the state.

toLowerCase() function is used to convert text into lowercase as we required text in lowercase to show color.

Now lets create out constructor:

constructor(props){
super(props);
this.state= {colorname:'black'}
}
Constructor coding is not lengthy as we just need to define colorname in it.
Here is the full code for Change color as per input React Native :
import React from 'react';

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

import { Container, Header, Content, Item, Label, Button, Input } from 'native-base';

export default class App extends React.Component {

constructor(props){

super(props);

this.state= {colorname:'black'}

}

render() {

return (

<Container>

<Header></Header>

<Contentstyle={{ padding:20 }}>

<Textstyle={{ fontSize:30, textAlign:'center', marginVertical:40 }}>Color Changer</Text>

<ItemfloatingLabel>

<Label>Colour Name</Label>

<Input

onChangeText={(text) =>this.setState({colorname:text.toLowerCase()})}

/>

</Item>

<Viewstyle={{ flex:1, height:200, backgroundColor:this.state.colorname, marginTop:40}}>




</View>

</Content>

</Container>

);

}

}

const styles = StyleSheet.create({

container: {

flex:1,

backgroundColor:'#fff',

alignItems:'center',

justifyContent:'center',

},

});

Now final output for this code will looks like follow:

Change color as per input React Native
Change color as per input React Native

React Native Color Changer Box

React Native Color Changer Box

Hi Everyone In this tutorial I am going to create one app which change the box color on every click.

To do so I am using native-base UI elements so lets start with the designing part:

First I will set the constructor with state element:

constructor(props){
super(props);
this.state = {colorname:'#e3e3e3'}
}

In the above code i have added new object named : colorname and set the static value in it.

This static value will be changed on every button click on.

So lets create the design using native base UI elements:

<Container>
<Header></Header>
<Content>
<Text style={{textAlign:'center',fontSize:30, marginTop:20, marginBottom:20}}>Press Button</Text>
<Button block success
onPress={this.getcolor.bind(this)}
>
<Text>Click Me</Text>
</Button>
<View style={{flex:1, paddingTop:100, paddingBottom:100, backgroundColor:this.state.colorname, marginTop:30}}>
<Text style={{
color:'#ffffff',
textAlign:'center',
fontSize:20,
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10}}>
Output Here
</Text>
</View>
</Content>
</Container>

In the above code you can see i have set the state names colorname in the view background color and create one button to generate random color code.

Not let’s create the function named getcolor to change the color on every click:

getcolor(){
var ColorCode = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
this.setState({colorname:ColorCode});
}

In the above code I have used JavaScript Math.random to generate number between 1 to 256 and concatinate it with the rgb() color.

So here is the final code for React Native Color Changer Box:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Container, Header, Content, Button} from 'native-base';
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {colorname:'#e3e3e3'}
}
render() {
return (
<Container>
<Header></Header>
<Content>
<Text style={{textAlign:'center',fontSize:30, marginTop:20, marginBottom:20}}>Press Button</Text>
<Button block success
onPress={this.getcolor.bind(this)}
>
<Text>Click Me</Text>
</Button>
<View style={{flex:1, paddingTop:100, paddingBottom:100, backgroundColor:this.state.colorname, marginTop:30}}>
<Text style={{
color:'#ffffff',
textAlign:'center',
fontSize:20,
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10}}>
Output Here
</Text>
</View>
</Content>
</Container>
);
}
getcolor(){
var ColorCode = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
this.setState({colorname:ColorCode});
}
}

Our Final Output will looks like following Image:

So That’s all for today hope you guys enjoy this tutorial stay tuned for my further updates.

react native wordpress

react native woocommerce

react native woocommerce to create an app which will automatically get data from wordpress blog and shown in our application.

Requirements :

1 . WordPress Website I am using http://onlinetutorial.co.in/wp-json to get WORDPRESS data as JSON

2. Internet Connection to hit online API.

Now lets start with the coding part :

Firstly you need to create one react native app to work with to do so please use following command in your command prompt:

create-react-native-app appname

After this you will get all the required files to star new react native app. but we need to open only App.js file to work with.

Now here is a complete code to (Create an app to get WordPress data React Native):

import React from 'react';

import { StyleSheet, Text, View, FlatList, WebView } from 'react-native';

import { Container, Header,Content, Form, Item, Input, Label, Button} from 'native-base';

export default class App extends React.Component {

constructor(props){

super(props);

this.state= {userdata:'',url:'',maindata:[]}

}

render() {

return (

<Container>

<Header/>

<Content>

{this.newFunc()}

<Textstyle={{marginTop:30,marginBottom:30,textAlign:'center'}}>Enter WordPress website url to get posts data</Text>

<ItemfloatingLabel>

<Label>Enter URL</Label>

<Input

onChangeText={(text) =>this.setState({url:text})}

/>

</Item>

<Buttonsuccessblock

onPress={this.getData.bind(this)}

>

<Text>Click Me</Text>

</Button>

</Content>

</Container>

);

}

getData(){

fetch(this.state.url+'/wp-json/wp/v2/posts')

.then((response) => response.json())

.then((responseJson) => {

this.setState({userdata:responseJson})

letarr= [];

this.state.userdata.map((values) => {

arr.push({id:values.id,title:values.title.rendered,date:values.date,content:values.content.rendered});

})

this.setState({maindata:arr});

});

}

newFunc(){

if(this.state.maindata.length>0){

returnthis.state.maindata.map((abcd,i) => {

return (

<Viewstyle={{flex:1,backgroundColor:'#c6ffc8',margin:10, padding:10}}>

<Textstyle={{fontSize:20,textAlign:'left'}}key={i}>{abcd.title}</Text>

<Text>{abcd.date}</Text>

</View>

)

});

}else{

return (

<Viewstyle={{flex:1,backgroundColor:'#c6ffc8',margin:10, padding:10}}>

<Textstyle={{fontSize:20,textAlign:'left'}}>URL Should be started from http://</Text>

</View>

)

}

}

}

I have used native base here to design my react native app

Lets understand the first function named constructor()

Constructor

constructor(props){ // Set global props from react native package
super(props);
this.state= {userdata:”,url:”,maindata:[]} // create new object values to set data.
}
After the constructor here is our main part which is shown on the page:
render() {
return (
<Container> // This is the main container
<Header/>// Header tag is used to give some margin on the top.
<Content> // Content is out main contents shown on the page
{this.newFunc()} // Call to function
<Textstyle={{marginTop:30,marginBottom:30,textAlign:'center'}}>Enter WordPress website url to get posts data</Text> // Simple text to show on the page
<Item floatingLabel>
<Label>Enter URL</Label>
<Input
onChangeText={(text) =>this.setState({url:text})} // set state which defined in the constructor
/>
</Item>
<Buttonsuccessblock
onPress={this.getData.bind(this)} //on button click call to the function 
>
<Text>Click Me</Text>
</Button>
</Content>
</Container>
);
}

Now after this there are 2 function to perform everything on this app here is the code for these functions:

getData(){ // This function is created to get data from the API.
fetch(this.state.url+'/wp-json/wp/v2/posts') // fetch is used in native to get online data
.then((response) => response.json())
.then((responseJson) => {
this.setState({userdata:responseJson}) // Here I have set that data into my state
let arr= []; // Create blank array to store values
this.state.userdata.map((values) => { // Map function is an instead of javascript each function
arr.push({id:values.id,title:values.title.rendered,date:values.date,content:values.content.rendered}); // Here We push values into an array to store
})
this.setState({maindata:arr}); // HEre we set array values to maindata in state
});
}
newFunc(){
if(this.state.maindata.length>0){ // This is the check if the values exist or not
returnthis.state.maindata.map((abcd,i) => {
return (
<Viewstyle={{flex:1,backgroundColor:'#c6ffc8',margin:10, padding:10}}>
<Textstyle={{fontSize:20,textAlign:'left'}}key={i}>{abcd.title}</Text>
<Text>{abcd.date}</Text>
</View>
)
});
}else{
return (
<Viewstyle={{flex:1,backgroundColor:'#c6ffc8',margin:10, padding:10}}>
<Textstyle={{fontSize:20,textAlign:'left'}}>URL Should be started from http://</Text>
</View>
)
}
}

You can see my comments on functions in the code to better understand now here is the final output for this code:

And after enter http://onlinetutorial.co.in into Enter url field I have getting following output:

There is only one requirement your enter URL website should be a wordpress website.

So Thst’s all for today hope you guys enjoy this tutorial. Thanks.

react native material ui

react native material ui

In this tutorial we are going to create react native material ui simple login form with static values to successfully login.

I am going to create login page which is looking like following image:

In the first step I am Installing react js app if your don’t know how to install app please follow out installation tutorial.

I am using nativebase.io designs to make designing work smoother and fast.

Step 1 :

Import content from the command provided by nativebase.io website

npm install native-base --save
react-native link

Now Let’s start with the coding part I have used following code to design login page which i have copied from nativebase.io

<Container>
<Header/>
<Textstyle={{fontSize:30,textAlign:’center’}}>Sach Tech</Text>
<Content>
<Form>
<ItemfloatingLabel>
<Label>Username</Label>
<Input
onChangeText={this.onUserName.bind(this)}
/>
</Item>
<ItemfloatingLabellast>
<Label>Password</Label>
<Input
onChangeText={this.onUserPassword.bind(this)}
secureTextEntry
/>
</Item>
<ButtonblockonPress={this.onSubmit.bind(this)}>
<Text>Submit</Text>
</Button>
</Form>
</Content>
</Container>
I have placed all this code inside rendur() function return method to make it view on the mobile app.
you can see
I have used onChangeText=” attribute and set value of the username field to user object which is create in constructor
and do the same for the password field.
Here is the functions code to make login form work :
onUserName(text) {
this.setState({user:text});
}
onUserPassword(text) {
this.setState({pass:text});
}
onSubmit() {
if(this.state.user==’admin’&&this.state.pass==’admin’){
alert(‘Login Success’);
}else{
alert(‘OOPS’);
}
}
In this code first two functions are used to setting the values of username and password into static object.
and the last function named onSubmit is checking the values.
if both of the values are “admin” then it shows alert box saying Login Success
else it shows the alert with OOPS.
That’s all we have successfully create Basic Login with React Native stay tuned for my further uploads.

create react native app

create react native app

Hello Everyone in this tutorial i am going to let you know about how to create react native app.

Requirement : You should have NodeJS installed in your computer to start working with React Native.

If you don’t have nodejs installed please  download and install it from nodejs official website.

Now let’s start with the first step :

open your command prompt (For windows) or Terminal (For Linux) and locate to the directory where you want to clone starter pack and execute following command there :

npm install -g create-react-native-app

Now run the following command to create a new react native project named myProject

create-react-native-app myProject

cd myProject

npm start

npm start command will start a development server for you. Once the development server started you will get the QR code to scan with your android device and start working on react native..

To scan the qr code you need to install app named Expo in your android device and scan the qr code there.

Then open the file named App.js to start with your first app and you will see the code like this :

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

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

So this is the auto generated file by react JS you can make changes in the <Text></Text> tag and see the output into your device.

I have changed follow text :

<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>

With the the following text

<Text>Hello Online Tutorials !</Text>

and then save the file to see the changes into your device.

That’s all thanks for your time.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.