Merge pull request #4 from WayneKim92/bugfix/battle-tested-1

Bugfix/battle tested 1

example/src/App.tsx

@@ -1,12 +1,9 @@
-import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View, TextInput } from 'react-native';
 import Tooltip from 'react-native-good-tooltip';
+import { useState } from 'react';
 
 export default function App() {
-  const data = [
-    'In FlatList',
-    'zIndex must be specified using',
-    'CellRendererComponent.',
-  ];
+  const [inputText, setInputText] = useState('초기 텍스트');
 
   return (
     <SafeAreaView style={styles.container}>
@@ -19,31 +16,23 @@ export default function App() {
         }}
       >
         <Tooltip
-          isVisible={true}
           text="This is a tooltip"
           placement={'bottom'}
           anchor={'left'}
-          requiredConfirmation
+          onPress={() => {}}
         >
           <View style={[styles.box, { backgroundColor: 'red' }]} />
         </Tooltip>
 
         <Tooltip
-          isVisible={true}
           text="This is a tooltip"
           placement={'bottom'}
           styles={{ color: 'black' }}
         >
           <View style={[styles.box, { backgroundColor: 'green' }]} />
         </Tooltip>
 
-        <Tooltip
-          isVisible={true}
-          text="This is a tooltip"
-          placement={'bottom'}
-          anchor={'right'}
-          requiredConfirmation
-        >
+        <Tooltip text="This is a tooltip" placement={'bottom'} anchor={'right'}>
           <View style={[styles.box, { backgroundColor: 'blue' }]} />
         </Tooltip>
       </View>
@@ -77,103 +66,28 @@ export default function App() {
         </View>
       </View>
 
-      {/* Body*/}
-      <FlatList
-        data={data}
-        // style={{ flexGrow: 1 }}
-        CellRendererComponent={({ index, style, ...props }) => {
-          return (
-            <View
-              style={[
-                style,
-                {
-                  zIndex: data.length - index,
-                },
-              ]}
-              {...props}
-            />
-          );
-        }}
-        renderItem={({ item, index }) => (
-          <Tooltip
-            isVisible={true}
-            placement={'bottom'}
-            anchor={(() => {
-              if (index % 3 === 0) return 'right';
-              if (index % 2 === 0) return 'center';
-
-              return 'left';
-            })()}
-            text={'List Item Tooltip ' + index}
-          >
-            <View
-              style={{
-                paddingVertical: 15,
-                backgroundColor: 'blue',
-                opacity: 0.4,
-                justifyContent: 'center',
-                alignItems: 'flex-end',
-                paddingHorizontal: 16,
-              }}
-            >
-              <Text style={{ color: 'white' }}>{`${item}`}</Text>
-            </View>
-          </Tooltip>
-        )}
-        ListFooterComponent={() => (
-          <View
-            style={{
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              backgroundColor: '#8851bc',
-              height: 500,
-            }}
-          >
-            <Tooltip
-              placement={'top'}
-              anchor={'right'}
-              text={'Top RIght'}
-              isVisible={true}
-              requiredConfirmation
-            >
-              <View style={{ height: 50, backgroundColor: 'red', zIndex: 0 }}>
-                <Text>
-                  There may be situations where you need to add the overflow:
-                  'visible' style.
-                </Text>
-              </View>
-            </Tooltip>
+      <Tooltip placement={'bottom'} text={'Input Text'} visible={true}>
+        <TextInput
+          value={inputText}
+          placeholder={'Input text'}
+          onChangeText={setInputText}
+          style={{ padding: 16, backgroundColor: 'gray' }}
+        />
+      </Tooltip>
 
-            <View style={{ zIndex: 0 }}>
-              <Tooltip
-                isVisible={true}
-                text="Left Tooltip"
-                placement={'left'}
-                anchor={'top'}
-                requiredConfirmation
-              >
-                <View style={[styles.box, { backgroundColor: 'red' }]} />
-              </Tooltip>
-              <Tooltip
-                isVisible={true}
-                text="Center Tooltip"
-                placement={'right'}
-                anchor={'center'}
-              >
-                <View style={[styles.box, { backgroundColor: 'green' }]} />
-              </Tooltip>
-              <Tooltip
-                isVisible={true}
-                text="Center Tooltip"
-                placement={'left'}
-                anchor={'bottom'}
-              >
-                <View style={[styles.box, { backgroundColor: 'blue' }]} />
-              </Tooltip>
-            </View>
-          </View>
-        )}
-      />
+      {/*<FlatList*/}
+      {/*  data={[1, 2, 3]}*/}
+      {/*  renderItem={() => {*/}
+      {/*    return (*/}
+      {/*      <TextInput*/}
+      {/*        value={inputText}*/}
+      {/*        onChangeText={setInputText}*/}
+      {/*        placeholder={'Input text'}*/}
+      {/*        style={{ padding: 16, backgroundColor: 'gray' }}*/}
+      {/*      />*/}
+      {/*    );*/}
+      {/*  }}*/}
+      {/*/>*/}
     </SafeAreaView>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-good-tooltip",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "This tooltip was created with the best UX in mind.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -38,6 +38,7 @@
   "scripts": {
     "example": "yarn workspace react-native-good-tooltip-example",
     "test": "jest",
+    "postinstall": "npx patch-package",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",

patches/react-native-anchor-point+1.0.6.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/react-native-anchor-point/index.ts b/node_modules/react-native-anchor-point/index.ts
+index f789fa7..a1a97c6 100644
+--- a/node_modules/react-native-anchor-point/index.ts
++++ b/node_modules/react-native-anchor-point/index.ts
+@@ -33,8 +33,10 @@ export const withAnchorPoint = (transform: TransformsStyle, anchorPoint: Point,
+         shiftTranslateX.push({
+             translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
+         });
++        // @ts-ignore
+         injectedTransform = [...shiftTranslateX, ...injectedTransform];
+         // shift after rotation
++        // @ts-ignore
+         injectedTransform.push({
+             translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
+         });