init test

EvanBacon · Apr 20, 2020 · 806b779 · 806b779
1 parent 8de90b5
commit 806b779
Show file tree

Hide file tree

Showing 4 changed files with 321 additions and 243 deletions.
diff --git a/App.js b/App.js
@@ -1,19 +1,150 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React from "react";
+import { StyleSheet, Button, Image, Text, View } from "react-native";
+import "emoji-mart/css/emoji-mart.css";
+
+import { Picker } from "emoji-mart";
+import { SketchPicker } from "react-color";
+import * as ImagePicker from "expo-image-picker";
+
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+import { createAppIcon, twitterEmoji } from "./ImageOps";
+
+const App = () => {
+  const [color, setColor] = React.useState("#ff00ff");
+  const [chosenEmoji, setChosenEmoji] = React.useState("1f914");
+  const [image, setImage] = React.useState(null);
+
+  const onSelect = (data) => {
+    console.log(data);
+
+    setChosenEmoji(data.unified);
+    setImage(null);
+  };
 
-export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <Row style={{ flex: 1 }}>
+        <SketchPicker
+          color={color}
+          onChangeComplete={({ hex }) => {
+            setColor(hex);
+          }}
+        />
+      </Row>
+      <Row style={{ flex: 1 }}>
+        <AppIconImage color={color} emojiId={chosenEmoji} image={image} />
+        {chosenEmoji ? (
+          <Text>You chose: {chosenEmoji}</Text>
+        ) : (
+          <Text>No emoji Chosen</Text>
+        )}
+        <Button
+          title="Download"
+          onPress={async () => {
+            const icon = await createAppIcon({
+              color,
+              emojiId: chosenEmoji,
+              imageUrl: image,
+              size: 1024,
+              emojiPadding: 128,
+            });
+            setImage(icon);
+            return;
+            FileSaver.saveAs(
+              icon,
+              `icon-${new Date().toLocaleTimeString()}.png`
+            );
+            return;
+
+            let zip = new JSZip();
+            // icon 1024x1024 - emoji padding - 128
+            // splash 2048x2048 - emoji padding - 1000 (524 icon)
+            zip.file("icon.png", icon);
+            // zip.file("splash.png", `hello`);
+            // zip.file("favicon.ico", `hello`);
+            const content = await zip.generateAsync({ type: "blob" });
+            FileSaver.saveAs(content, `app-icons.zip`);
+          }}
+        />
+      </Row>
+      <Row>
+        <Picker set="twitter" onSelect={onSelect} />
+        <Button
+          title="Upload Image"
+          onPress={async () => {
+            const file = await ImagePicker.launchImageLibraryAsync();
+            console.log(file);
+            if (!file.cancelled) {
+              setImage(file.uri);
+              setChosenEmoji(undefined);
+            }
+          }}
+        />
+      </Row>
+    </View>
+  );
+};
+
+function Row({ style, ...props }) {
+  return (
+    <View
+      style={[
+        { flex: 1, alignItems: "center", justifyContent: "center" },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+function AppIconImage({ color, image, emojiId = "1f914" }) {
+  const size = 96;
+  const imgSize = size * 0.75;
+
+  let imageContents;
+
+  if (image) {
+    imageContents = (
+      <Image
+        source={{ uri: image }}
+        style={{ resizeMode: "cover", width: size, height: size, flex: 1 }}
+      />
+    );
+  } else {
+    imageContents = (
+      <Image
+        source={{ uri: twitterEmoji(emojiId) }}
+        style={{ width: imgSize, height: imgSize, resizeMode: "contain" }}
+      />
+    );
+  }
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size * 0.3,
+        backgroundColor: color,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+      }}
+    >
+      {imageContents}
     </View>
   );
 }
 
+export default App;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    flexDirection: "row",
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
 });
diff --git a/ImageOps.js b/ImageOps.js
@@ -0,0 +1,57 @@
+import * as ImageManipulator from "expo-image-manipulator";
+
+function loadImageAsync(uri) {
+  console.log(uri);
+  return new Promise((resolve, reject) => {
+    const imageSource = new Image();
+    imageSource.crossOrigin = "anonymous";
+    imageSource.onload = () => resolve(imageSource);
+    imageSource.onerror = () => reject(imageSource);
+    imageSource.src = uri;
+  });
+}
+
+export async function createAppIcon({
+  color,
+  imageUrl,
+  emojiId,
+  size,
+  emojiPadding,
+}) {
+  let canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+
+  const ctx = canvas.getContext("2d");
+
+  // draw color
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  if (imageUrl) {
+    const imageSource = await loadImageAsync(uri);
+    // ctx.drawImage(imageSource, 0, 0, imageSource.naturalWidth, imageSource.naturalHeight);
+
+    // draw image
+    ctx.drawImage(imageSource, 0, 0, size, size);
+  } else if (emojiId) {
+    const emojiUrl = twitterEmoji(emojiId);
+    // const emojiPadding = size * 0.125;
+    const emojiSize = size - emojiPadding * 2;
+    const emojiOffset = (size - emojiSize) / 2;
+    const imageSource = await loadImageAsync(emojiUrl);
+
+    console.log(imageSource);
+    // draw image
+    ctx.drawImage(imageSource, emojiOffset, emojiOffset, emojiSize, emojiSize);
+  }
+
+  // defaults to PNG with no loss
+  return canvas.toDataURL();
+}
+
+// twemoji.maxcdn.com
+
+export function twitterEmoji(id) {
+  return `https://twemoji.maxcdn.com/v/latest/svg/${id}.svg`;
+}
diff --git a/package.json b/package.json
@@ -8,15 +8,24 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@expo/html-elements": "^0.0.0-alpha.5",
+    "emoji-mart": "^3.0.0",
+    "emoji-picker-react": "^3.1.4",
     "expo": "~37.0.3",
+    "expo-image-manipulator": "^8.1.0",
+    "expo-image-picker": "^8.1.0",
+    "file-saver": "^2.0.2",
+    "jszip": "^3.4.0",
     "react": "~16.9.0",
+    "react-color": "^2.18.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
-    "react-native-web": "~0.11.7"
+    "react-native-web": "~0.11.7",
+    "react-native-web-hooks": "^3.0.1"
   },
   "devDependencies": {
-    "babel-preset-expo": "~8.1.0",
-    "@babel/core": "^7.8.6"
+    "@babel/core": "^7.8.6",
+    "babel-preset-expo": "~8.1.0"
   },
   "private": true
 }