Skip to content

Instantly share code, notes, and snippets.

@billmalarky
Created January 5, 2018 20:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save billmalarky/a7fb361bbbb450828d4bb0a1b0848f10 to your computer and use it in GitHub Desktop.
Save billmalarky/a7fb361bbbb450828d4bb0a1b0848f10 to your computer and use it in GitHub Desktop.
Basic app.js with two screens.
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
ScrollView,
Button,
Image
} from 'react-native';
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
showImages: false
};
}
render() {
return (
<ScrollView style={styles.container}>
<Button title={"Toggle Screen"} onPress={ () => { this.setState({ showImages: !this.state.showImages}) } } />
{! this.state.showImages && <Text style={styles.welcome}>Home Screen</Text> }
{this.state.showImages && <Text style={styles.welcome}>Image Screen</Text> }
{this.state.showImages && <Image style={styles.image} source={{uri: 'https://i.imgur.com/kPkQTic.jpg'}} permanent={false} /> }
{this.state.showImages && <Image style={styles.image} source={{uri: 'https://i.redd.it/uwvjph19mltz.jpg'}} permanent={false} /> }
{this.state.showImages && <Image style={styles.image} source={{uri: 'https://i.redd.it/39w0xd9ersxz.jpg'}} permanent={false} /> }
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 10
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
image: {
width:150,
height: 204
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment