GroundhogDay.JS

Doing full stack Javascript can sometimes feel a bit like Bill Murray’s character in Groundhog Day: on every project it’s the same stuff. So when I had the chance to use React Native I jumped on it and started working through Bonnie Eisenman’s book “Learning React Native” to get up to speed. In this blog post I will talk very briefly about two of the things I found interesting: the fetch API and requiring images.

Let’s start with requiring images. This is what it looks like in a React render method:

    render() {
      return (
        <View style={ styles.container } >
          <Image source={ require('image!cloud1') }
            resizeMode='contain'
            style={ styles.backdrop } />
        </View>
      );
    }

One of the first things I tried with the image was making it dynamic by changing the string in the require bit to this.state.image. This naive approach failed because once the require method returns the first image object the require method is gone and subsequent renders only see that image object in the source attribute.

To get around this I make the entire source attribute dynamic and require my images as separate properties of ‘this’. For example (see the full code here):

  export default class WeatherBase extends Component {
    constructor(props) {
      super(props);
      this.image1 = require('image!cloud1');
      this.image2 = require('image!cloud2');
    }
    ...
    render() {
      return (
        <View style={ styles.container } >
          <Image source={ this.state.image }
            resizeMode='contain'
            style={ styles.backdrop } />
        </View>
      );
    }
  }

Moving on to the second interesting thing I came across: the fetch API is supported by React Native. This API is currently only supported by the Chrome, Firefox and Opera browsers.  Which is why I was shocked to learn that the interpreter used by React Native is JavaScriptCore, AKA SquirrelFish, AKA Nitro, AKA the interpreter used in WebKit which is what Safari and iOS Safari use.

Fetch is nice though.  It uses Promises to make XMLHttpRequests more streamlined (even more than AJAX (btw, here’s an excellent history of the non-mythological AJAX)).  From my React Native project:

    fetch('http://api.openweathermap.org/data/2.5/weather?q=' + zip +
      '&units=imperial&APPID=' + APPID)
      .then((response) => response.json())
      .then((responseJSON) => {
        this.setState({
          ...
        });
      })
      .catch((error) => {
        console.warn(error);
      });

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s