Skip to content

Commit

Permalink
optimized for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
EvanBacon committed Aug 18, 2020
1 parent 7977adb commit 2d0cfab
Show file tree
Hide file tree
Showing 5 changed files with 10,863 additions and 295 deletions.
7 changes: 3 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
"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-gesture-handler": "^1.6.1",
"react-native-paper": "^3.8.0",
Expand All @@ -32,17 +31,17 @@
"react-native-screens": "^2.5.0",
"react-native-svg": "^12.1.0",
"react-native-web": "~0.11.7",
"react-native-web-hooks": "^3.0.1"
"react-native-web-hooks": "^3.0.1",
"tinycolor2": "^1.4.1"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"expo-cli": "latest",
"@types/emoji-mart": "^3.0.2",
"@types/file-saver": "^2.0.1",
"@types/react": "~16.9.41",
"@types/react-color": "^3.0.4",
"@types/react-dom": "~16.9.0",
"@types/react-native": "~0.62.13",
"expo-cli": "latest",
"typescript": "~3.9.6"
},
"private": true
Expand Down
192 changes: 92 additions & 100 deletions src/Emoji.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import "emoji-mart/css/emoji-mart.css";

import { P } from "@expo/html-elements";
import { FontAwesome } from "@expo/vector-icons";
import { Picker } from "emoji-mart";
import * as ImagePicker from "expo-image-picker";
import React from "react";
import Circle from "react-color/lib/Twitter";
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
import { Button } from "react-native-paper";

import { ColorPicker, randomColor } from "./components/ColorPicker";
import { Picker } from "emoji-mart";
import useWindowDimensions from "./hooks/useWindowDimensions";
import { generateImagesAsync, twitterEmoji } from "./ImageOps";

const defaultEmojis = [
Expand Down Expand Up @@ -49,37 +51,8 @@ const defaultEmojis = [
},
];

const defaultColors = [
"#f44336",
"#e91e63",
"#EB144C",
"#9900EF",
"#9c27b0",
"#673ab7",
"#3f51b5",
"#2196f3",
"#03a9f4",
"#00bcd4",
"#009688",
"#4caf50",
"#8bc34a",
"#7BDCB5",
"#00D084",
"#ffeb3b",
"#ffc107",
"#ff9800",
"#ff5722",
"#607d8b",
"#999",
"#ABB8C3",
"black",
"#fff",
];

const randomEmoji = () =>
defaultEmojis[Math.floor(Math.random() * defaultEmojis.length)];
const randomColor = () =>
defaultColors[Math.floor(Math.random() * defaultColors.length)];

const defaultEmoji = randomEmoji();
const defaultColor = "#fff";
Expand Down Expand Up @@ -146,6 +119,10 @@ export default React.forwardRef(({ navigation, theme, isDark }, ref) => {
const chosenId = chosenEmoji && chosenEmoji.id ? chosenEmoji.id : null;
let emojiId = transformId(chosenUnified, chosenId);

const { width } = useWindowDimensions();

const isMobile = width < 640;

async function uploadImageAsync() {
const file = await ImagePicker.launchImageLibraryAsync();
if (!file.cancelled) {
Expand Down Expand Up @@ -175,91 +152,106 @@ export default React.forwardRef(({ navigation, theme, isDark }, ref) => {
setImage(null);
};

const renderAppIcon = () => (
<>
<AppIconImage
size={128}
onPress={uploadImageAsync}
color={color}
emojiId={emojiId}
image={image}
/>
<View style={{ marginTop: 8, opacity: 0.8 }}>
<FontAwesome.Button
name="refresh"
backgroundColor="transparent"
underlayColor={theme.colors.header}
color={theme.colors.text}
onPress={() => {
setColor(randomColor());
setEmoji(randomEmoji());
}}
>
Random
</FontAwesome.Button>
</View>
{false && (
<P
style={{
opacity: 0.6,
color: theme.colors.text,
textAlign: "center",
}}
>
Touch the icon to use a custom image.
</P>
)}
</>
);

const renderDownloadButton = () => (
<DownloadButton
color={theme.colors.text}
style={{ marginTop: 12 }}
onPress={() => {
generateImagesAsync({ emojiId, image, color });
}}
/>
);

return (
<View
style={{
flexDirection: "row",
flex: 1,
backgroundColor: theme.colors.background,
paddingVertical: isMobile ? 18 : 0,
}}
>
<View
style={{
flexDirection: "row",
flexDirection: isMobile ? "column" : "row",
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<View style={{ alignItems: "center" }}>
<View style={{ marginBottom: 8, opacity: 0.8 }}>
<FontAwesome.Button
name="refresh"
backgroundColor="transparent"
underlayColor={theme.colors.header}
color={theme.colors.text}
onPress={() => {
setColor(randomColor());
setEmoji(randomEmoji());
}}
>
Random
</FontAwesome.Button>
</View>
<AppIconImage
size={128}
onPress={uploadImageAsync}
color={color}
emojiId={emojiId}
image={image}
/>
<P
style={{
opacity: 0.6,
color: theme.colors.text,
textAlign: "center",
}}
<View
style={{
flex: 1,
paddingVertical: isMobile ? 18 : 0,
}}
>
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
Touch the icon to use a custom image.
</P>

<Circle
triangle="hide"
colors={defaultColors}
color={color}
onChangeComplete={({ hex }) => {
setColor(hex);
}}
/>

<DownloadButton
color={theme.colors.text}
style={{ marginTop: 12 }}
onPress={() => {
generateImagesAsync({ emojiId, image, color });
}}
{renderAppIcon()}
<ColorPicker
isDark={isDark}
isMobile={false}
onValueChanged={(hex) => setColor(hex)}
/>
</View>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<Picker
style={isMobile ? { flex: 1, borderRadius: 0 } : {}}
theme={isDark ? "dark" : "light"}
set="twitter"
notFoundEmoji="mag"
color={isDark ? "white" : "#4630eb"}
title=""
showPreview={false}
emoji="bacon"
onSelect={onSelect}
showSkinTones={false}
/>
</View>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<Picker
theme={isDark ? "dark" : "light"}
set="twitter"
notFoundEmoji="mag"
color={isDark ? "white" : "#4630eb"}
title="By Evan Bacon"
emoji="bacon"
onSelect={onSelect}
showSkinTones={false}
/>
</View>
</View>
);
});
Expand Down
Loading

0 comments on commit 2d0cfab

Please sign in to comment.