added example

Author: schiller-manuel

example/App.tsx

@@ -0,0 +1,49 @@
+// eslint-disable-next-line import/default
+import React, { useState } from 'react';
+import { Dimensions, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Blurhash } from 'gl-react-blurhash';
+import { Surface } from 'gl-react-expo';
+
+const screenWidth = Math.round(Dimensions.get('window').width);
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    image: {
+        width: screenWidth * 0.8,
+        height: (screenWidth * 0.8) / 1.5
+    }
+});
+
+const data = {
+    hash: 'LPKA$w{H_c05b{Nqwbx^grotMnNf',
+    uri:
+        'https://images.pexels.com/photos/1209843/pexels-photo-1209843.jpeg?crop=entropy&cs=srgb&dl=person-with-body-painting-1209843.jpg&fit=crop&fm=jpg&h=853&w=1280'
+};
+
+function ImageWithBlurhash({ blurhashVisible }: { blurhashVisible: boolean }) {
+    if (blurhashVisible) {
+        return (
+            <Surface style={styles.image}>
+                <Blurhash hash={data.hash} />
+            </Surface>
+        );
+    }
+    return <Image source={{ uri: data.uri }} style={styles.image}></Image>;
+}
+
+export default function App() {
+    const [blurhashVisible, setBlurhashVisible] = useState(true);
+    const onPress = () => setBlurhashVisible(!blurhashVisible);
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity onPress={onPress}>
+                <ImageWithBlurhash blurhashVisible={blurhashVisible} />
+            </TouchableOpacity>
+        </View>
+    );
+}

example/app.json

@@ -0,0 +1,16 @@
+{
+    "expo": {
+        "name": "gl-blurhash-example",
+        "slug": "gl-blurhash-example",
+        "platforms": ["ios", "android", "web"],
+        "version": "1.0.0",
+        "orientation": "portrait",
+        "updates": {
+            "fallbackToCacheTimeout": 0
+        },
+        "assetBundlePatterns": ["**/*"],
+        "ios": {
+            "supportsTablet": true
+        }
+    }
+}

example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ['babel-preset-expo']
+    };
+};

example/package.json

@@ -0,0 +1,32 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@types/gl-react-expo": "^3.16.2",
+    "buffer": "^5.6.0",
+    "expo": "~37.0.3",
+    "expo-gl": "^8.2.0",
+    "gl-react": "^4.0.1",
+    "gl-react-blurhash": "latest",
+    "gl-react-expo": "^4.0.1",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-screens": "~2.2.0",
+    "react-native-web": "~0.11.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.6",
+    "@types/react": "~16.9.23",
+    "@types/react-native": "~0.61.17",
+    "babel-preset-expo": "~8.1.0",
+    "typescript": "~3.8.3"
+  },
+  "private": true
+}

example/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true
+  }
+}