Initial commit

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    root: true,
+    extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended'
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: './tsconfig.json'
+    },
+    plugins: ['@typescript-eslint'],
+    rules: {
+        'comma-dangle': 'off',
+        'no-spaced-func': 'off',
+        'newline-per-chained-call': ['error'],
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-namespace': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars-experimental': 'error',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off'
+    }
+};

.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: Publish
+
+on: 
+  workflow_run:
+    workflows:
+      - Tests
+    branches:
+      - main
+    types:
+      - completed
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: yarn install
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

.github/workflows/tests.yml

@@ -0,0 +1,16 @@
+name: Tests
+
+on: push
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps: 
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: yarn install
+      - name: ESLint checks
+        run: yarn lint

.gitignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+.idea
+.vscode

.npmignore

@@ -0,0 +1,5 @@
+node_modules/
+.idea
+.vscode
+yarn.lock
+.github

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 96,
+    bracketSpacing: false,
+    jsxBracketSameLine: false,
+    singleQuote: true,
+    trailingComma: "none",
+    tabWidth: 4,
+    arrowParens: "avoid",
+};

README.md

@@ -1 +1,40 @@
-# 😁 react-native-twemojis 📦
+# 😁 react-native-twemojis 📦
+
+[![npm](https://img.shields.io/npm/v/react-native-twemojis)](https://www.npmjs.com/package/twemojis)
+![npm](https://img.shields.io/npm/dm/react-native-twemojis)
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/tomekkleszcz/react-native-twemojis/Publish)
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/tomekkleszcz/react-native-twemojis/Tests?label=tests)
+
+Replace emojis with Twemojis in your next React Native app.
+
+## 📥 Installation
+
+`npm install react-native-twemojis`
+
+or
+
+`yarn add react-native-twemojis`
+
+## 👀 Demo
+
+At the top there is `Text` component rendered on iOS device, and at the bottom there is rendered `TwemojiText` component.
+
+![React Native Swipe Slider demo](demo/demo.png)
+
+## 🧰 Usage
+
+The `TwemojiText` component behaves just like `Text` component, but replaces all the emojis with their Twemoji equivalent.
+
+```
+import TwemojiText from 'react-native-twemojis';
+
+const Component = () => {
+    return (
+        <TwemojiText>
+            Hello world! 🌎
+        </TwemojiText>
+    );
+}
+```
+
+The `TwemojiText` component accepts all `Text` props by default. If you want to customize the styling of the Twemojis there is a `twemojiStyle` prop which accepts `Image` styling.

package.json

@@ -0,0 +1,37 @@
+{
+    "name": "react-native-twemojis",
+    "version": "1.0.0",
+    "description": "Replace emojis with Twemojis in your next React Native app.",
+    "main": "src/index.ts",
+    "repository": "[email protected]:tomekkleszcz/react-native-twemojis.git",
+    "author": "tomekkleszcz <[email protected]>",
+    "license": "MIT",
+    "private": false,
+    "keywords": [
+        "react",
+        "native",
+        "twemoji",
+        "twemojis",
+        "emoji",
+        "emojis",
+        "replace"
+    ],
+    "scripts": {
+        "lint": "./node_modules/.bin/eslint ./src/ --ext .js,.jsx,.ts,.tsx",
+        "prepublish": "tsc"
+    },
+    "devDependencies": {
+        "@types/react-native": "^0.63.42",
+        "@typescript-eslint/eslint-plugin": "^4.11.0",
+        "@typescript-eslint/parser": "^4.11.0",
+        "eslint": "^7.16.0",
+        "typescript": "^4.1.3"
+    },
+    "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-native": ">= 0.59.0"
+    },
+    "dependencies": {
+        "react-string-replace": "^0.4.4"
+    }
+}

src/TwemojiText/index.styles.ts

@@ -0,0 +1,11 @@
+//Stylesheet
+import {StyleSheet} from 'react-native';
+
+const Styles = StyleSheet.create({
+    emoji: {
+        width: 24,
+        height: 24
+    }
+});
+
+export default Styles;

src/TwemojiText/index.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+//Components
+import {Image, Text} from "react-native";
+
+//Utils
+import reactStringReplace from "react-string-replace";
+import {emojiUnicode} from "../util";
+
+//Styles
+import Styles from "./index.styles";
+
+//Types
+import {TextProps, ImageStyle} from "react-native";
+
+type TwemojiTextProps = {
+    twemojiStyle?: ImageStyle;
+    children: string;
+};
+
+const EMOJI_REGEX = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;
+
+const TwemojiText: React.VFC<TextProps & TwemojiTextProps> = ({
+    twemojiStyle,
+    children,
+    ...props
+}) => {
+    const parts = reactStringReplace(children, EMOJI_REGEX, (emoji, i) => (
+        <Image
+            key={`emoji-${i}`}
+            testID={emoji}
+            style={twemojiStyle ?? Styles.emoji}
+            source={{
+                uri: `https://twemoji.maxcdn.com/2/72x72/${emojiUnicode(
+                    emoji
+                )}.png`,
+            }}
+        />
+    ));
+
+    return <Text testID={'text'} {...props}>{parts}</Text>;
+};
+
+export default TwemojiText;

src/index.ts

@@ -0,0 +1,3 @@
+import TwemojiText from './TwemojiText';
+
+export default TwemojiText;

src/util.ts

@@ -0,0 +1,11 @@
+export const emojiUnicode = (emoji: string): string => {
+    let comp;
+    if (emoji.length === 1) {
+        comp = emoji.charCodeAt(0);
+    }
+    comp = (emoji.charCodeAt(0) - 0xd800) * 0x400 + (emoji.charCodeAt(1) - 0xdc00) + 0x10000;
+    if (comp < 0) {
+        comp = emoji.charCodeAt(0);
+    }
+    return comp.toString(16);
+};

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+      "target": "esnext",
+      "module": "commonjs",
+      "lib": ["es6"],
+      "jsx": "react-native",
+      "moduleResolution": "node",
+      "esModuleInterop": true,
+      "declaration": true,
+      "noLib": false,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "sourceMap": true,
+      "noImplicitAny": true,
+      "outDir": "dist/",
+      "listFiles": false,
+      "noEmitHelpers": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"],
+  "compileOnSave": false
+}