Snippets

Shockoe Data Components Blog - React Native

Updated by Michael Peter
View revision

File shared/DataComponents.js Modified

  • Ignore whitespace
  • Hide word diff 
 
 	async componentDidMount() {
 		await delay(3000);
-		let newTextResponse = await fetch('https://loripsum.net/api/1/short/plaintext');
+		let newTextResponse = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=3&format=text&start-with-lorem=1');
 		let newText = await newTextResponse.text();
 		this.setState({ text: newText });
 	}
Created by Michael Peter
View revision

File App.js Added

  • Ignore whitespace
  • Hide word diff 
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { renderPlatformUI, LoremIpsumData } from './shared/DataComponents.js';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: '#F5FCFF'
+	},
+	header : { fontWeight: 'bold', fontSize: 20 },
+	text : {padding : 40}
+});
+
+export default class LoremIpsumScreen extends Component {
+	render() {
+		return (
+			<LoremIpsumData render={renderPlatformUI(LoremIpsumUI)} />
+		);
+	}
+}
+
+class LoremIpsumUI extends Component {
+	render() {
+		return (
+			<View style={styles.container}>
+				<Text style={styles.header}>MOBILE VERSION</Text>
+				<Text style={styles.text}>{this.props.text}</Text>
+			</View>
+		);
+	}
+}

File shared/DataComponents.js Added

  • Ignore whitespace
  • Hide word diff 
+import React, { Component } from 'react';
+
+export function renderPlatformUI(PlatformChild) {
+	return (childProps) => {
+		return (<PlatformChild {...childProps} />);
+	}
+}
+
+export class LoremIpsumData extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			text: 'Loading...'
+		};
+	}
+
+	async componentDidMount() {
+		await delay(3000);
+		let newTextResponse = await fetch('https://loripsum.net/api/1/short/plaintext');
+		let newText = await newTextResponse.text();
+		this.setState({ text: newText });
+	}
+
+	render() {
+		return this.props.render({text : this.state.text});
+	}
+}
+
+function delay(ms) {
+	return new Promise(resolve => {
+		setTimeout(() => {
+			resolve();
+		}, ms);
+	});
+}
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.