Merge pull request #10 from jossydeleon/feature

Bugfix: Remote icons

Author: jossydeleon

packages/react-native-query-devtool/src/components/CopyButton/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Image, Pressable, StyleSheet } from 'react-native';
+import Icons from '../../utils/images';
 
 interface Props {
   onPress?: () => void;
@@ -10,7 +11,9 @@ const CopyButton: React.FC<Props> = ({ onPress }) => {
   return (
     <Pressable onPress={onPress}>
       <Image
-        source={require('../../../assets/copy.png')}
+        source={{
+          uri: Icons.CopyIcon,
+        }}
         style={styles.container}
       />
     </Pressable>

packages/react-native-query-devtool/src/components/FloatingButton/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Image, TouchableOpacity } from 'react-native';
 
 import { styles } from './styles';
+import Icons from '../../utils/images';
 
 interface Props {
   onPress: () => void;
@@ -17,7 +18,9 @@ const FloatingButton: React.FC<Props> = ({ onPress }) => {
     >
       <Image
         style={styles.image}
-        source={require('../../../assets/rqlogo.png')}
+        source={{
+          uri: Icons.RQLogo,
+        }}
       />
     </TouchableOpacity>
   );

packages/react-native-query-devtool/src/components/SearchButton/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Image, Pressable, StyleSheet } from 'react-native';
+import Icons from '../../utils/images';
 
 interface Props {
   onPress?: () => void;
@@ -10,7 +11,9 @@ const SearchButton: React.FC<Props> = ({ onPress }) => {
   return (
     <Pressable onPress={onPress}>
       <Image
-        source={require('../../../assets/search.png')}
+        source={{
+          uri: Icons.SearchIcon,
+        }}
         style={styles.container}
       />
     </Pressable>

packages/react-native-query-devtool/src/components/Searchbar/index.tsx

@@ -4,6 +4,7 @@ import { Image, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { styles } from './style';
 import SearchbarProps from './types';
+import Icons from '../../utils/images';
 
 const Searchbar: React.ForwardRefRenderFunction<TextInput, SearchbarProps> = (
   { filter, placeholder = 'Filter', setFilter },
@@ -27,7 +28,11 @@ const Searchbar: React.ForwardRefRenderFunction<TextInput, SearchbarProps> = (
           activeOpacity={0.8}
           onPress={() => setFilter('')}
         >
-          <Image source={require('../../../assets/clear.png')} />
+          <Image
+            source={{
+              uri: Icons.SearchIcon,
+            }}
+          />
         </TouchableOpacity>
       )}
     </View>

packages/react-native-query-devtool/src/utils/images.ts

@@ -0,0 +1,13 @@
+// TODO (Temporal work-around)
+const Icons = {
+  CopyIcon:
+    'https://github.com/jossydeleon/react-native-query-devtool-monorepo/blob/feature/packages/react-native-query-devtool/assets/copy.png?raw=true',
+  SearchIcon:
+    'https://github.com/jossydeleon/react-native-query-devtool-monorepo/blob/feature/packages/react-native-query-devtool/assets/search.png?raw=true',
+  ClearIcon:
+    'https://github.com/jossydeleon/react-native-query-devtool-monorepo/blob/feature/packages/react-native-query-devtool/assets/clear.png?raw=true',
+  RQLogo:
+    'https://github.com/jossydeleon/react-native-query-devtool-monorepo/blob/feature/packages/react-native-query-devtool/assets/rqlogo.png?raw=true',
+};
+
+export default Icons;