React Native

Here are the steps to integrate Gumlet Service with React Native

Suggest Edits

To keep the scope of this document limited and simple we expect you to have a React Native development environment setup and a basic application running.

We will be making changes to the App.js file directly

Create a GumletScaledImage component

This component can be used anywhere in the app for remote images which Gumlet can serve.

You can go ahead and copy this code at ./components/GumletImage.js or a location of your choice.

import React, { useState, useMemo } from "react";
import { Image, StyleSheet } from "react-native";
import {PixelRatio} from 'react-native';
import PropTypes from "prop-types";

function extractHostname(url) {
    var hostname;
    //find & remove protocol (http, ftp, etc.) and get hostname
  
    if (url.indexOf("//") > -1) {
      hostname = url.split('/')[2];
    } else {
      hostname = url.split('/')[0];
    }
  
    //find & remove port number
    hostname = hostname.split(':')[0];
    //find & remove "?"
    hostname = hostname.split('?')[0];
  
    return hostname;
}

function GumletScaledImage({ style, source, ...restProps }) {

    const flattenedStyles = useMemo(() => StyleSheet.flatten(style), [style]);

    if (
        typeof flattenedStyles.width !== "number" &&
        typeof flattenedStyles.height !== "number"
    ) {
        throw new Error("GumletScaledImage requires either width or height");
    }

    const [size, setSize] = useState({
        width: flattenedStyles.width,
        height: flattenedStyles.height,
    });

    let gumletConfig = {
        hosts: [{
            current: "{{example.com}}",
            gumlet: "{{mysubdomain}}.gumlet.io"
        }]
    }

    let matchedHost = gumletConfig.hosts.find(o => o.current === extractHostname(source.uri));
    
    let gumletSourceURL = source.uri.replace(matchedHost.current, matchedHost.gumlet);
    if (gumletSourceURL.indexOf("?") !== -1) {
        gumletSourceURL += ("&width="+flattenedStyles.width)+("&dpr="+parseInt(PixelRatio.get()))
    }else{
        gumletSourceURL += ("?width="+flattenedStyles.width)+("&dpr="+parseInt(PixelRatio.get()))
    }

    return <Image source={{ uri: gumletSourceURL }} style={[style, size]} {...restProps} />;
}

GumletScaledImage.propTypes = {
  source: PropTypes.object.isRequired,
  style: PropTypes.object
};

GumletScaledImage.defaultProps = {
  style: {}
};

export default GumletScaledImage;

🚧

Warning

Please replace {{mysubdomain}} in the above code to the subdomain created by you on Gumlet. Please also replace {{example.com}} with the domain from where images are currently being served.

Import this component and replace it with your existing <Image /> components

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

// Import the component created in the previous step.
import GumletScaledImage from "./components/GumletImage";


const App: () => Node = () => {
  

  return (
    <View style={styles.container}>
      <GumletScaledImage
        style={{height: 200, width: 200}}
        source={{uri: "{{url_to_image}}"}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
});

export default App;

👍

Gumlet is live now!

This is all that was needed to deliver responsive images to your users.

Updated 2 months ago