Skip to content

Instantly share code, notes, and snippets.

@Oceas Oceas/app.js
Last active Sep 19, 2019

Embed
What would you like to do?
WDS Headless WordPress Example
import React from 'react';
import {StyleSheet, ScrollView, View, Text, Image, Button} from 'react-native';
import axios from 'axios';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {WebView} from 'react-native-webview';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
published: '',
content: '',
};
/* Fetch post details and update what is to be displayed to the user. */
axios
.get('https://webdevstudios.com/wp-json/wp/v2/posts/19032')
.then(response =>
this.setState({
title: response.data.title.rendered,
content: response.data.content.rendered,
published: response.data.date,
}),
);
}
render() {
return (
<View>
{/*Branding for app. You can add any additional app functionality around webview. */}
<Image style={styles.logo} source={require('./src/assets/Logo.png')} />
{/* Additional app functionality*/}
<Button title={'Home'} />
<Button title={'Browse'} />
<Button title={'Checkout'} />
<Button title={'Support'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.body}>
{/*Webview for displaying post details*/}
<Text style={styles.postTitle}>{this.state.title}</Text>
<Text>Published: {this.state.published}</Text>
<View style={styles.sectionContainer}>
{/*Webview for displaying rendered post. */}
<WebView
originWhitelist={['*']}
scalesPageToFit={false}
source={{html: this.state.content}}
style={{height: 600}}
/>
</View>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
marginTop: 20
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
logo: {
resizeMode: 'stretch',
width: 400,
height: 150,
},
postTitle: {
fontWeight: 'bold',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.