feat(arrowicon): add arrowicon component

example/src/ExamplesScreen.tsx

@@ -82,11 +82,11 @@ const ExamplesScreen = () => {
             </List.Accordion>
           </ScrollView>
         </Cutout>
-        <View style={[styles.info]}>
-          <Panel variant='well' style={[styles.infoItem, { flexGrow: 1 }]}>
+        <View style={[styles.statusBar]}>
+          <Panel variant='well' style={[styles.statusBarItem, { flexGrow: 1 }]}>
             <Text>Current theme: {currentTheme.name}</Text>
           </Panel>
-          <Panel variant='well' style={[styles.infoItem]}>
+          <Panel variant='well' style={[styles.statusBarItem]}>
             <Text>Total themes: {themes.length}</Text>
           </Panel>
         </View>
@@ -123,18 +123,19 @@ const styles = StyleSheet.create({
   section: {
     marginBottom: 16,
   },
-  info: {
+  statusBar: {
     display: 'flex',
     flexDirection: 'row',
     width: '100%',
 
     marginTop: 6,
     marginBottom: 2,
   },
-  infoItem: {
+  statusBarItem: {
     marginHorizontal: 2,
     paddingHorizontal: 4,
     height: 30,
+    justifyContent: 'center',
   },
   header: {
     justifyContent: 'center',

example/src/examples/ColorPickerExample.tsx

@@ -45,7 +45,7 @@ const ColorPickerExample = () => {
     setColorMenuOpen(false);
   };
 
-  const [secondColorMenuOpen, setSecondColorMenuOpen] = React.useState(true);
+  const [secondColorMenuOpen, setSecondColorMenuOpen] = React.useState(false);
   const [secondColor, setSecondColor] = React.useState(colors[6]);
   const [tempSecondColor, setTempSecondColor] = React.useState(secondColor);
 

src/ArrowIcon/ArrowIcon.tsx

@@ -0,0 +1,79 @@
+import React, { useContext } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { ThemeContext } from '../common/theming/Theme';
+
+type Props = {
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  disabled?: boolean;
+  segments?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const pixelSize = 2;
+
+const ArrowIcon = ({
+  direction = 'bottom',
+  disabled = false,
+  segments = 4,
+  style = {},
+  ...rest
+}: Props) => {
+  const theme = useContext(ThemeContext);
+
+  const segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
+
+  if (['right', 'bottom'].includes(direction)) {
+    segmentSizes.reverse();
+  }
+  const isHorizontal = ['left', 'right'].includes(direction);
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {segmentSizes.map((segmentSize, i) => (
+        <View
+          key={i}
+          style={[
+            styles.segment,
+            {
+              [isHorizontal ? 'height' : 'width']: pixelSize * segmentSize,
+              [isHorizontal ? 'width' : 'height']: pixelSize,
+              backgroundColor: disabled
+                ? theme.materialTextDisabled
+                : theme.materialText,
+              shadowColor: disabled
+                ? theme.materialTextDisabledShadow
+                : 'transparent',
+              shadowOffset: {
+                width: 1,
+                height: 1,
+              },
+              shadowOpacity: 1,
+              shadowRadius: 0,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    alignItems: 'center',
+  },
+  segment: {
+    height: pixelSize,
+  },
+});
+
+export default ArrowIcon;

src/ArrowIcon/index.ts

@@ -0,0 +1 @@
+export { default } from './ArrowIcon';

src/ColorButton/ColorButton.tsx

@@ -1,17 +1,10 @@
 import React, { useContext } from 'react';
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { $RemoveChildren, Color } from '../types';
 
-import { Button, Divider } from '..';
+import { Button, Divider, ArrowIcon } from '..';
 import { ThemeContext } from '../common/theming/Theme';
 
-const dropdownSymbol = {
-  default:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALElEQVQoU2NkIAIwEqGGgWRF/7GYCjYE3SRkhXA5bNaBFKKIk+wmnB4lyiQAAsgDCqkPxTcAAAAASUVORK5CYII=',
-  disabled:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkIAIwEqGGgTRFLa0t/9FNramuARuCYhKyQpgCDEUgAZBCZAVYFWHzCGkOxxcUANHnDAplQ9G1AAAAAElFTkSuQmCC',
-};
-
 type Props = $RemoveChildren<typeof Button> & {
   color?: Color;
 };
@@ -46,11 +39,11 @@ const ColorButton = ({ disabled, color, ...rest }: Props) => {
           ]}
         />
         <Divider orientation='vertical' size={previewHeight} />
-        <Image
+        <ArrowIcon
+          direction='bottom'
+          disabled={disabled}
+          segments={3}
           style={styles.dropdownIcon}
-          source={{
-            uri: dropdownSymbol[disabled ? 'disabled' : 'default'],
-          }}
         />
       </View>
     </Button>
@@ -66,11 +59,9 @@ const styles = StyleSheet.create({
     marginRight: 6,
   },
   dropdownIcon: {
-    width: 20,
-    height: 20,
     alignSelf: 'center',
-    marginRight: -4,
-    marginLeft: 1,
+    marginRight: 2,
+    marginLeft: 4,
   },
 });
 

src/ScrollView/ScrollView.tsx

@@ -6,7 +6,6 @@ import {
   ViewStyle,
   StyleProp,
   ImageBackground,
-  Image,
   PanResponder,
   TouchableWithoutFeedback,
 } from 'react-native';
@@ -18,28 +17,13 @@ import type {
 import useAsyncReference from '../common/hooks/useAsyncReference';
 import { ThemeContext } from '../common/theming/Theme';
 
-import { Panel, Button } from '..';
+import { Panel, Button, ArrowIcon } from '..';
 
 type Direction = -1 | 1;
 
 const scrollbarThickness = 30;
 const scrollbarButtonSize = scrollbarThickness;
 
-const Icon = (
-  <Image
-    style={[
-      {
-        width: 18,
-        height: 18,
-      },
-    ]}
-    source={{
-      uri:
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALElEQVQoU2NkIAIwEqGGgWRF/7GYCjYE3SRkhXA5bNaBFKKIk+wmnB4lyiQAAsgDCqkPxTcAAAAASUVORK5CYII=',
-    }}
-  />
-);
-
 type ScrollViewProps = React.ComponentProps<typeof View> & {
   alwaysShowScrollbars?: boolean;
   children: React.ReactNode;
@@ -196,15 +180,11 @@ const ScrollView = ({
             disabled={contentFullyVisible}
             style={[styles.scrollbarButton]}
           >
-            <View
-              style={{
-                justifyContent: 'center',
-                alignItems: 'center',
-                transform: [{ rotate: horizontal ? '90deg' : '180deg' }],
-              }}
-            >
-              {Icon}
-            </View>
+            <ArrowIcon
+              direction={horizontal ? 'left' : 'top'}
+              disabled={contentFullyVisible}
+              segments={4}
+            />
           </Button>
           <View style={[styles.scrollbarTrack]}>
             {!contentFullyVisible && (
@@ -247,15 +227,11 @@ const ScrollView = ({
             disabled={contentFullyVisible}
             style={[styles.scrollbarButton]}
           >
-            <View
-              style={{
-                justifyContent: 'center',
-                alignItems: 'center',
-                transform: [{ rotate: horizontal ? '-90deg' : '0deg' }],
-              }}
-            >
-              {Icon}
-            </View>
+            <ArrowIcon
+              direction={horizontal ? 'right' : 'bottom'}
+              disabled={contentFullyVisible}
+              segments={4}
+            />
           </Button>
         </View>
       )}

src/Select/Select.tsx

@@ -3,7 +3,6 @@ import {
   StyleSheet,
   View,
   TouchableHighlight,
-  ImageBackground,
   StyleProp,
   ViewStyle,
 } from 'react-native';
@@ -14,14 +13,7 @@ import { blockSizes } from '../common/styles';
 import { Border } from '../common/styleElements';
 
 import getSelectOptions, { Option } from './SelectBase';
-import { ScrollView, Text } from '..';
-
-const dropdownSymbol = {
-  default:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALElEQVQoU2NkIAIwEqGGgWRF/7GYCjYE3SRkhXA5bNaBFKKIk+wmnB4lyiQAAsgDCqkPxTcAAAAASUVORK5CYII=',
-  disabled:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkIAIwEqGGgTRFLa0t/9FNramuARuCYhKyQpgCDEUgAZBCZAVYFWHzCGkOxxcUANHnDAplQ9G1AAAAAElFTkSuQmCC',
-};
+import { ScrollView, Text, ArrowIcon } from '..';
 
 type Props = {
   options: Array<Option>;
@@ -126,22 +118,19 @@ const Select = ({
               </View>
             </View>
             <View
-              style={[styles.fakeButton, { backgroundColor: theme.material }]}
+              style={[
+                styles.fakeButton,
+                {
+                  backgroundColor: theme.material,
+                },
+              ]}
             >
-              <ImageBackground
-                style={[
-                  {
-                    marginTop: isPressed ? 1 : 0,
-                    width: '100%',
-                    height: '100%',
-                  },
-                ]}
-                imageStyle={{
-                  resizeMode: 'contain',
-                  flex: 1,
-                }}
-                source={{
-                  uri: dropdownSymbol[disabled ? 'disabled' : 'default'],
+              <ArrowIcon
+                segments={4}
+                direction='bottom'
+                disabled={disabled}
+                style={{
+                  paddingTop: isPressed ? 2 : 0,
                 }}
               />
               <Border
@@ -210,6 +199,8 @@ const styles = StyleSheet.create({
     height: '100%',
     width: 30,
     padding: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   options: {
     position: 'absolute',

src/index.ts

@@ -1,29 +1,30 @@
+export { default as AppBar } from './AppBar';
+export { default as ArrowIcon } from './ArrowIcon';
 export { default as Button } from './Button';
+export { default as Card } from './Card';
+export { default as Checkbox } from './Checkbox';
 export { default as ColorButton } from './ColorButton';
 export { default as ColorPicker } from './ColorPicker';
-export { default as TextInput } from './TextInput';
-export { default as NumberInput } from './NumberInput';
-export { default as Panel } from './Panel';
-export { Text, Title, Anchor } from './Typography';
-export { default as AppBar } from './AppBar';
 export { default as Cutout } from './Cutout';
-export { default as Window } from './Window';
+export { default as Desktop } from './Desktop';
 export { default as Divider } from './Divider';
-export { default as Checkbox } from './Checkbox';
-export { default as Radio } from './Radio';
-export { default as Slider } from './Slider';
 export { default as Fieldset } from './Fieldset';
-export { default as Progress } from './Progress';
-export { Select, SelectBox } from './Select';
-export { default as Desktop } from './Desktop';
-export { default as Menu } from './Menu';
-export { default as Tabs } from './Tabs';
-export { default as ScrollView } from './ScrollView';
 export { default as Hourglass } from './Hourglass';
 export { default as List } from './List';
+export { default as Menu } from './Menu';
+export { default as NumberInput } from './NumberInput';
+export { default as Panel } from './Panel';
+export { default as Progress } from './Progress';
+export { default as Radio } from './Radio';
 export { default as ScrollPanel } from './ScrollPanel';
-export { default as Card } from './Card';
+export { default as ScrollView } from './ScrollView';
+export { default as Slider } from './Slider';
 export { default as Snackbar } from './Snackbar';
+export { default as Tabs } from './Tabs';
+export { default as TextInput } from './TextInput';
+export { default as Window } from './Window';
+export { Select, SelectBox } from './Select';
+export { Text, Title, Anchor } from './Typography';
 
 export * from './common/theming';