Skip to content

Instantly share code, notes, and snippets.

@moduscreate

moduscreate/using_placeholder_images_with_react_native.js

Last active July 24, 2017 09:50
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. Modus Create revised this gist Apr 3, 2016. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions using_placeholder_images_with_react_native.js
    View file
    Original file line number Diff line number Diff line change
    @@ -103,12 +103,8 @@ class Placeholder extends Component {
    for (; i < length; i++) {
    item = data[i];

    // We don't have an image, so put mocks up
    if (! item) {
    source = placeholder
    }
    // For when we actually have data
    else {
    if (item) {
    source = {
    uri : item.images.original_still.url + randVal,
    width : itemSize,
  2. Modus Create revised this gist Apr 3, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion using_placeholder_images_with_react_native.js
    View file
    Original file line number Diff line number Diff line change
    @@ -63,6 +63,7 @@ class Placeholder extends Component {
    // Step #1 & #2
    // Here we’ll fetch JSON for images to be displayed
    componentWillMount() {
    // The URL below has an 'r' parameter that is used as a 'cache buster' and is only intended for demonstration purposes
    let url = 'http://api.giphy.com/v1/gifs/search?q=javascript&api_key=dc6zaTOxFJmzC&limit=30&r=' + Math.random();
    console.log('Loading data')

    @@ -83,7 +84,7 @@ class Placeholder extends Component {
    let images = [],
    length = data.length,
    i = 0,
    randVal = '?r=' + Math.random(),
    randVal = '?r=' + Math.random(), // Cache busting for testing only can be removed
    source,
    item;

  3. Modus Create revised this gist Apr 3, 2016. No changes.
  4. Modus Create revised this gist Apr 3, 2016. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions using_placeholder_images_with_react_native.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,10 +18,9 @@ console.disableYellowBox = true; // This gets in the way!
    const windowDims = Dimensions.get('window'),
    itemSize = (windowDims.width / 2) - 20;


    // This is *the* placeholder image to be used in steps #3 and #5
    const placeholder = require('./images/placeholder.png');


    const styles = StyleSheet.create({
    container : {
    paddingTop : 30,
  5. Modus Create created this gist Apr 3, 2016.
    149 changes: 149 additions & 0 deletions using_placeholder_images_with_react_native.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,149 @@
    import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    StatusBar,
    ScrollView
    } from 'react-native';

    StatusBar.setBarStyle('light-content');
    console.disableYellowBox = true; // This gets in the way!


    // imageSize is used to statically size <Image/> instances
    const windowDims = Dimensions.get('window'),
    itemSize = (windowDims.width / 2) - 20;


    const placeholder = require('./images/placeholder.png');


    const styles = StyleSheet.create({
    container : {
    paddingTop : 30,
    justifyContent : 'center',
    alignItems : 'center',
    backgroundColor : '#F5FCFF',
    flexDirection : 'row',
    flexWrap : 'wrap'
    },

    child : {
    width : itemSize,
    height : itemSize,
    margin : 7
    },

    topBar : {
    position : 'absolute',
    top : 0,
    height : 25,
    width : windowDims.width,
    backgroundColor : 'rgba(0,0,0,.8)'
    }
    });

    class Placeholder extends Component {
    // Initial state
    state = {
    data : [] // empty data array
    };

    // Step #4 (Self-bound function)
    // We will update the state of the application so that images can render
    onAfterLoad = (data) => {
    this.setState({
    data : data.data
    });
    };

    // Step #1 & #2
    // Here we’ll fetch JSON for images to be displayed
    componentWillMount() {
    let url = 'http://api.giphy.com/v1/gifs/search?q=javascript&api_key=dc6zaTOxFJmzC&limit=30&r=' + Math.random();
    console.log('Loading data')

    // Initiate query, parse, then update view via callback
    fetch(url)
    .then(function(r) {
    return r.json();
    })
    .then(this.onAfterLoad) // Success callback registration
    .catch(function(e) { // Failure callback registartion
    alert('Failure fetching data');
    console.log(e)
    });
    }

    // This will be responsible for rendering the image components
    buildImages(data) {
    let images = [],
    length = data.length,
    i = 0,
    randVal = '?r=' + Math.random(),
    source,
    item;

    // Empty array?
    if (data.length == 0) {
    // This console.log() call can be removed.
    console.log('Rendering placeholders');
    // Fill the array with 10 undefines
    data.length = length = 10;
    }
    else {
    // This else branch is here just for debugging and can be removed.
    console.log(`Got data. Rendering ${length} images.`);
    }

    for (; i < length; i++) {
    item = data[i];

    // We don't have an image, so put mocks up
    if (! item) {
    source = placeholder
    }
    // For when we actually have data
    else {
    source = {
    uri : item.images.original_still.url + randVal,
    width : itemSize,
    height : itemSize
    }
    }

    images.push(
    <Image style={styles.child}
    source={source}
    defaultSource={placeholder}
    key={'img' + i}/>
    )
    }

    return images;
    }

    render() {
    let state = this.state,
    data = state.data,
    images = this.buildImages(data);

    return (
    <View style={{flex:1}}>
    <ScrollView contentContainerStyle={styles.container}
    style={{backgroundColor: '#F5FCFF'}}>

    {images}
    </ScrollView>

    <View style={styles.topBar}/>
    </View>
    );
    }
    }

    AppRegistry.registerComponent('Placeholder', () => Placeholder);