Snippets

Shockoe Data Components Blog - React Native Classic

Updated by Michael Peter
View revision

File App.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 });
 	}
Updated 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';
+
+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 {
+	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 (
+			<View style={styles.container}>
+				<Text style={styles.header}>MOBILE VERSION</Text>
+				<Text style={styles.text}>{this.state.text}</Text>
+			</View>
+		);
+	}
+}
+
+// helper function to insert delays in async functions
+function delay(ms) {
+	return new Promise(resolve => {
+		setTimeout(() => {
+			resolve();
+		}, ms);
+	});
+}

File App.jsx Deleted

  • Ignore whitespace
  • Hide word diff 
-import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-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 {
-	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 (
-			<View style={styles.container}>
-				<Text style={styles.header}>MOBILE VERSION</Text>
-				<Text style={styles.text}>{this.state.text}</Text>
-			</View>
-		);
-	}
-}
-
-// helper function to insert delays in async functions
-function delay(ms) {
-	return new Promise(resolve => {
-		setTimeout(() => {
-			resolve();
-		}, ms);
-	});
-}
Updated by Michael Peter
View revision

File App.js Deleted

  • Ignore whitespace
  • Hide word diff 
-import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-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 {
-	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 (
-			<View style={styles.container}>
-				<Text style={styles.header}>MOBILE VERSION</Text>
-				<Text style={styles.text}>{this.state.text}</Text>
-			</View>
-		);
-	}
-}
-
-// helper function to insert delays in async functions
-function delay(ms) {
-	return new Promise(resolve => {
-		setTimeout(() => {
-			resolve();
-		}, ms);
-	});
-}

File App.jsx Added

  • Ignore whitespace
  • Hide word diff 
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+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 {
+	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 (
+			<View style={styles.container}>
+				<Text style={styles.header}>MOBILE VERSION</Text>
+				<Text style={styles.text}>{this.state.text}</Text>
+			</View>
+		);
+	}
+}
+
+// helper function to insert delays in async functions
+function delay(ms) {
+	return new Promise(resolve => {
+		setTimeout(() => {
+			resolve();
+		}, ms);
+	});
+}
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';
+
+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 {
+	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 (
+			<View style={styles.container}>
+				<Text style={styles.header}>MOBILE VERSION</Text>
+				<Text style={styles.text}>{this.state.text}</Text>
+			</View>
+		);
+	}
+}
+
+// helper function to insert delays in async functions
+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.