Skip to content

Instantly share code, notes, and snippets.

@PavanKu

PavanKu/SimpleScrollView.js

Last active May 20, 2019 02:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PavanKu/f3fae786d0798cee87e909b231f45311 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PavanKu/f3fae786d0798cee87e909b231f45311 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. PavanKu revised this gist May 20, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion SimpleScrollView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    import React from 'react';
    import { View, Text, Image, ActivityIndicator, StyleSheet, FlatList } from "react-native";
    import { View, Text, Image, ActivityIndicator, StyleSheet, ScrollView } from "react-native";

    const initialState = { pictures: [
    {id:0, download_url:"https://picsum.photos/id/0/5616/3744" },
  2. PavanKu revised this gist May 20, 2019. No changes.
  3. PavanKu created this gist May 20, 2019.
    49 changes: 49 additions & 0 deletions SimpleScrollView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    import React from 'react';
    import { View, Text, Image, ActivityIndicator, StyleSheet, FlatList } from "react-native";

    const initialState = { pictures: [
    {id:0, download_url:"https://picsum.photos/id/0/5616/3744" },
    {id:1, download_url: "https://picsum.photos/id/1002/4312/2868"},
    {id:2, download_url: "https://picsum.photos/id/1006/3000/2000"},
    {id:3, download_url: "https://picsum.photos/id/1015/6000/4000"}
    ] };
    class PictureList extends React.Component {
    constructor(props) {
    super(props);
    this.state = initialState;
    }

    render() {
    const { pictures } = this.state;
    if (!pictures.length) { return (<ActivityIndicator />); }
    return (
    <View>
    <ScrollView>
    {pictures.map(picture => (
    <View style={styles.container} key={picture.id}>
    <Image style={styles.image} source={{uri: picture.download_url}} />
    </View>
    ))}
    />
    </View>
    );
    }
    }

    const styles = StyleSheet.create({
    container: {
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    backgroundColor: '#eaf7fd',
    marginBottom: 15,
    },
    image: {
    margin: 5,
    borderRadius: 5,
    width: 300,
    height: 300,
    }
    });

    export default PictureList;