React Native
Here are the steps to integrate Gumlet Service with React Native
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
<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