feat(ScrollPanel): add ScrollPanel component

example/src/examples/ScrollPanelExample.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { ScrollPanel } from 'react95-native';
+
+function getRandomColor() {
+  var letters = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+const ScrollPanelExample = () => {
+
+  const colors = new Array(16).fill(null).map(getRandomColor);
+
+  return (
+    <View style={{ backgroundColor: 'teal', flex: 1 }}>
+      <ScrollPanel>
+        {colors.map((color, i) => (
+          <View key={i} style={[styles.item, { backgroundColor: color }]} />
+        ))}
+      </ScrollPanel>
+      <ScrollPanel noBackground>
+        {colors.map((color, i) => (
+          <View key={i} style={[styles.item, { backgroundColor: color }]} />
+        ))}
+      </ScrollPanel>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    height: 60,
+    width: 60,
+    borderRadius: 20,
+    backgroundColor: 'teal',
+    marginHorizontal: 8,
+  },
+});
+
+export default ScrollPanelExample;

example/src/examples/index.tsx

@@ -11,6 +11,7 @@ import MenuExample from './MenuExample';
 import PanelExample from './PanelExample';
 import ProgressExample from './ProgressExample';
 import RadioExample from './RadioExample';
+import ScrollPanelExample from './ScrollPanelExample';
 import SelectBoxExample from './SelectBoxExample';
 import SelectExample from './SelectExample';
 import TabsExample from './TabsExample';
@@ -58,6 +59,7 @@ export default [
         title: 'Divider',
       },
       { name: 'PanelExample', component: PanelExample, title: 'Panel' },
+      { name: 'ScrollPanelExample', component: ScrollPanelExample, title: 'ScrollPanel' },
       { name: 'WindowExample', component: WindowExample, title: 'Window' },
     ],
   },

src/ScrollPanel/ScrollPanel.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { ThemeContext } from '../common/theming/Theme';
+
+import { Border } from '../common/styleElements';
+import { Divider } from '..';
+
+// TODO: where to pass custom styles?
+// TODO: add noBottomBorder and noTopBorder prop
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  noBackground?: boolean;
+};
+
+const ScrollPanel = ({ style = {}, children, noBackground }: Props) => {
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: noBackground ? 'transparent' : theme.materialDark,
+        },
+      ]}
+    >
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+        <View style={[styles.borderWrapper]}>
+          <Border variant='outside' />
+          <View
+            style={[styles.inner, { backgroundColor: theme.material }, style]}
+          >
+            <Divider orientation='vertical' variant='raised' />
+            <Divider orientation='vertical' variant='raised' />
+            <View style={[styles.content]}>{children}</View>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  inner: {
+    padding: 16,
+    // TODO: decide if left padding should be 8 or 16
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  borderWrapper: {
+    padding: 4,
+    position: 'relative',
+    minWidth: '100%'
+  },
+  content: {
+    marginLeft: 8,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default ScrollPanel;

src/ScrollPanel/index.ts

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

src/index.ts

@@ -17,5 +17,6 @@ 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 ScrollPanel } from './ScrollPanel';
 
 export * from './common/theming';