WDS Headless WordPress Example

app.js

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',
  },
});