fix: commit file name case change #2

app/react-native/src/preview/components/OnDeviceUI/addons/List.tsx

@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react';
+import { ScrollView } from 'react-native';
+import styled from '@emotion/native';
+import { Collection } from '@storybook/addons';
+import Button from '../navigation/Button';
+
+const Container = styled.View(({ theme }) => ({
+  flexDirection: 'row',
+  borderBottomWidth: 1,
+  borderBottomColor: theme.borderColor || '#e6e6e6',
+}));
+
+export interface Props {
+  panels: Collection;
+  addonSelected: string;
+  onPressAddon: (id: string) => void;
+}
+
+export default class AddonList extends PureComponent<Props> {
+  renderTab = (id: string, title: string) => {
+    const { addonSelected, onPressAddon } = this.props;
+
+    return (
+      <Button active={id === addonSelected} key={id} id={id} onPress={() => onPressAddon(id)}>
+        {title.toUpperCase()}
+      </Button>
+    );
+  };
+
+  render() {
+    const { panels } = this.props;
+    const addonKeys = Object.keys(panels);
+
+    return (
+      <Container>
+        <ScrollView showsHorizontalScrollIndicator={false} horizontal>
+          {addonKeys.map((id) => {
+            const { title } = panels[id];
+            // @ts-ignore
+            const resolvedTitle = typeof title === 'function' ? title() : title;
+            return this.renderTab(id, resolvedTitle);
+          })}
+        </ScrollView>
+      </Container>
+    );
+  }
+}

app/react-native/src/preview/components/OnDeviceUI/addons/Wrapper.tsx

@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react';
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { Collection } from '@storybook/addons';
+
+export interface Props {
+  panels: Collection;
+  addonSelected: string;
+}
+
+const style = StyleSheet.create({
+  invisible: {
+    height: 0,
+    width: 0,
+    opacity: 0,
+    position: 'absolute',
+  },
+  flex: {
+    flex: 1,
+  },
+});
+
+export default class Wrapper extends PureComponent<Props> {
+  static defaultProps = {
+    addonSelected: '',
+  };
+
+  render() {
+    const { panels, addonSelected } = this.props;
+
+    const addonKeys = Object.keys(panels);
+
+    return addonKeys.map((id) => {
+      const selected = addonSelected === id;
+
+      return (
+        <View key={id} style={selected ? style.flex : style.invisible}>
+          <ScrollView>{panels[id].render({ active: selected, key: id })}</ScrollView>
+        </View>
+      );
+    });
+  }
+}