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.

Download project on Github
Download project on Github

41 thoughts on “react native wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. of course much like your web-site and you should examination the actual transliteration on many of your site content. A variety of them are usually rife having spelling difficulties and that i to find the item pretty frustrating frankly in contrast We’ll undoubtedly go back just as before.. aplikasi berita saham terkini

  2. Wonderful beat ! I would like to apprentice whilst you amend your site, how can i subscribe for a blog site? The account aided me a applicable deal. I had been a little bit acquainted of this your broadcast provided vivid transparent idea

  3. Hmm it appears like your site ate my first comment (it was super long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the whole thing. Do you have any tips for first-time blog writers? I’d really appreciate it.

  4. There are some fascinating cut-off dates on this article but I don’t know if I see all of them heart to heart. There may be some validity but I will take maintain opinion till I look into it further. Good article , thanks and we would like more! Added to FeedBurner as well

  5. obviously like your website but you have to check the spelling on several of your posts. A number of them are rife with spelling issues and I find it very troublesome to tell the truth nevertheless I’ll certainly come back again.

  6. Attractive section of content. I just stumbled upon your web site and in accession capital to assert that I get actually enjoyed account your blog posts. Anyway I will be subscribing to your augment and even I achievement you access consistently rapidly.

  7. Excellent beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog website? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

  8. I’m not beneficial the place you’re obtaining your information, nevertheless wonderful subject. I must spend an afternoon researching additional or even comprehending extra. Appreciate fantastic information I’d been hunting for this review for my assignment.

  9. Hello, i believe that i noticed you visited my blog thus i got here to return the prefer?.I am trying to find issues to improve my site!I suppose its ok to make use of a few of your ideas!!

  10. Экспрессдиета елены малышевой минус 5 кг за 10 дней помимо посоветуйте ,пожалуйста какую продукция для похудения лида 3 махи хорошую диету,хочу похудеть на 5 кг.. Tfk entertainment большая медицинская энциклопедия 001] купит много таблеток и будет жить счастливо, но в другом месте..

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.