Guides

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 5 months ago