Created by
Michael Peter
last modified
| 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>
);
}
}
|
| 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://baconipsum.com/api/?type=meat-and-filler&sentences=3&format=text&start-with-lorem=1');
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);
});
}
|