feat: js implementation

package.json

@@ -5,7 +5,7 @@
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
-  "react-native": "src/index.tsx",
+  "react-native": "src/index.ts",
   "files": [
     "src",
     "lib",

src/Bubble.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { requireNativeComponent, Platform } from 'react-native';
+
+const RNBubble = requireNativeComponent('RNBubbleSelectNodeView');
+
+export interface BubbleNode {
+  text: string;
+  id: string;
+}
+
+export type BubbleProps = BubbleNode & {
+  color?: string;
+  radius?: number;
+  marginScale?: number;
+  fontName?: string;
+  fontSize?: number;
+  fontColor?: string;
+  fontStyle?: 'bold' | 'bold-italic' | 'normal';
+  lineHeight?: number;
+};
+
+const Bubble = ({
+  text,
+  color,
+  radius,
+  marginScale,
+  id,
+  fontName,
+  fontSize,
+  fontColor,
+  lineHeight,
+  fontStyle,
+}: BubbleProps) => {
+  const props = Platform.select({
+    ios: {
+      text,
+      color,
+      radius,
+      marginScale,
+      id,
+      fontName,
+      fontSize,
+      fontColor,
+      lineHeight,
+    },
+    android: {
+      text,
+      color,
+      id,
+      fontName,
+      fontSize,
+      fontColor,
+      fontStyle,
+    },
+  });
+
+  return <RNBubble {...props} />;
+};
+
+export default Bubble;

src/BubbleSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { BubbleNode, BubbleProps } from './Bubble';
+import { NativeSyntheticEvent, requireNativeComponent } from 'react-native';
+
+const RNBubbleSelect = requireNativeComponent('RNBubbleSelectView');
+
+export type BubbleSelectProps = Omit<BubbleProps, 'text' | 'id'> & {
+  onSelect?: (bubble: BubbleNode) => void;
+  onDeselect?: (bubble: BubbleNode) => void;
+  bubbleSize?: number;
+  allowsMultipleSelection?: boolean;
+  children: React.ReactNode;
+  style?: object;
+  width?: number;
+  height?: number;
+};
+
+const BubbleSelect = ({
+  onSelect,
+  onDeselect,
+  style,
+  allowsMultipleSelection,
+  children,
+  bubbleSize,
+  width = 200,
+  height = 200,
+  ...bubbleProps
+}: BubbleSelectProps) => {
+  const defaultStyle = {
+    flex: 1,
+    width,
+    height,
+  };
+
+  const handleSelect = (event: NativeSyntheticEvent<BubbleNode>) => {
+    console.log(event);
+    if (onSelect) {
+      onSelect(event.nativeEvent);
+    }
+  };
+
+  const handleDeselect = (event: NativeSyntheticEvent<BubbleNode>) => {
+    if (onDeselect) {
+      onDeselect(event.nativeEvent);
+    }
+  };
+
+  return (
+    <RNBubbleSelect
+      style={[defaultStyle, style]}
+      allowsMultipleSelection={allowsMultipleSelection}
+      onSelect={handleSelect}
+      onDeselect={handleDeselect}
+      bubbleSize={bubbleSize}
+    >
+      {React.Children.map(children, (child: any) =>
+        React.cloneElement(child, bubbleProps)
+      )}
+    </RNBubbleSelect>
+  );
+};
+
+export default BubbleSelect;

src/index.ts

@@ -0,0 +1,7 @@
+import BubbleSelect from './BubbleSelect';
+
+export * from './Bubble';
+export * from './BubbleSelect';
+
+export { default as Bubble } from './Bubble';
+export default BubbleSelect;