react-native-acoustic-connect-beta 18.0.7 → 18.0.9

package/Examples/SampleUI/src/Examples/ListItemExample.tsx

@@ -0,0 +1,310 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const CenteredCheckbox = () => (
+  <View style={styles.centered}>
+    <Checkbox status="checked" />
+  </View>
+);
+
+const strawberriesPath = '../../../SampleUI/assets/images/strawberries.jpg';
+
+const ListItemExample = () => {
+  return (
+    <ScreenWrapper>
+      <List.Section title="Text-only">
+        <List.Item title="Headline" />
+        <List.Item title="Headline" description="Supporting text" />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+        />
+        <Divider />
+        <List.Item title="Headline" right={() => <CenteredCheckbox />} />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          right={() => <Checkbox status="checked" />}
+        />
+        <Divider />
+      </List.Section>
+
+      <List.Section title="With icon">
+        <List.Item
+          title="Headline"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+        />
+        <Divider />
+        <List.Item
+          title="Headline"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          right={() => <Checkbox status="checked" />}
+        />
+        <Divider />
+      </List.Section>
+
+      <List.Section title="With avatar">
+        <List.Item
+          title="Headline"
+          left={(props) => (
+            <Avatar.Text style={props.style} label="A" size={40} />
+          )}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => (
+            <Avatar.Text style={props.style} label="A" size={40} />
+          )}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => (
+            <Avatar.Text style={props.style} label="A" size={40} />
+          )}
+        />
+        <Divider />
+        <List.Item
+          title="Headline"
+          left={(props) => (
+            <Avatar.Text style={props.style} label="A" size={40} />
+          )}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => (
+            <Avatar.Text style={props.style} label="A" size={40} />
+          )}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => (
+            <Avatar.Text style={props.style} label="A" size={40} />
+          )}
+          right={() => <Checkbox status="checked" />}
+        />
+        <Divider />
+      </List.Section>
+
+      <List.Section title="With image">
+        <List.Item
+          title="Headline"
+          left={(props) => (
+            <List.Image
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => (
+            <List.Image
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => (
+            <List.Image
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+        />
+        <Divider />
+        <List.Item
+          title="Headline"
+          left={(props) => (
+            <List.Image
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => (
+            <List.Image
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => (
+            <List.Image
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+          right={() => <Checkbox status="checked" />}
+        />
+        <Divider />
+      </List.Section>
+
+      <List.Section title="With video">
+        <List.Item
+          title="Headline"
+          left={(props) => (
+            <List.Image
+              variant="video"
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => (
+            <List.Image
+              variant="video"
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => (
+            <List.Image
+              variant="video"
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+        />
+        <Divider />
+        <List.Item
+          title="Headline"
+          left={(props) => (
+            <List.Image
+              variant="video"
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => (
+            <List.Image
+              variant="video"
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+          right={() => <CenteredCheckbox />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => (
+            <List.Image
+              variant="video"
+              style={props.style}
+              source={require(strawberriesPath)}
+            />
+          )}
+          right={() => <Checkbox status="checked" />}
+        />
+        <Divider />
+      </List.Section>
+
+      <List.Section title="With switch">
+        <List.Item
+          title="Headline"
+          right={() => <Switch disabled style={styles.centered} />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          right={() => <Switch disabled style={styles.centered} />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          right={() => <Switch disabled />}
+        />
+        <Divider />
+        <List.Item
+          title="Headline"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          right={() => <Switch disabled style={styles.centered} />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          right={() => <Switch disabled style={styles.centered} />}
+        />
+        <List.Item
+          title="Headline"
+          description="Supporting text that is long enough to fill up multiple lines in the item"
+          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          right={() => <Switch disabled />}
+        />
+        <Divider />
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+const styles = StyleSheet.create({
+  centered: {
+    alignSelf: 'center',
+  },
+});
+
+ListItemExample.title = 'List.Item';
+
+export default ListItemExample;

package/Examples/SampleUI/src/Examples/ListSectionExample.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { StyleSheet, Image, View } from 'react-native';
+
+import { Caption, List, Text, Chip, Divider } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+const ListSectionExample = () => {
+  return (
+    <ScreenWrapper>
+      <List.Section>
+        <List.Subheader>Single line</List.Subheader>
+        <List.Item
+          left={(props) => <List.Icon {...props} icon="calendar" />}
+          title="List item 1"
+        />
+        <List.Item
+          left={(props) => <List.Icon {...props} icon="wallet-giftcard" />}
+          title="List item 2"
+        />
+        <List.Item
+          title="List item 3"
+          left={(props) => <List.Icon {...props} icon="folder" />}
+          right={(props) => <List.Icon {...props} icon="equal" />}
+        />
+      </List.Section>
+      <Divider />
+      <List.Section>
+        <List.Subheader>Two line</List.Subheader>
+        <List.Item
+          left={() => (
+            <Image
+              source={require('../../assets/images/email-icon.png')}
+              style={styles.image}
+              accessibilityIgnoresInvertColors
+            />
+          )}
+          title="List item 1"
+          description="Describes item 1"
+        />
+        <List.Item
+          left={() => (
+            <Image
+              source={require('../../assets/images/email-icon.png')}
+              style={styles.image}
+              accessibilityIgnoresInvertColors
+            />
+          )}
+          right={(props) => <List.Icon {...props} icon="information" />}
+          title="List item 2"
+          description="Describes item 2"
+        />
+      </List.Section>
+      <Divider />
+      <List.Section>
+        <List.Subheader>Three line</List.Subheader>
+        <List.Item
+          left={() => (
+            <Image
+              source={require('../../assets/images/email-icon.png')}
+              style={styles.image}
+              accessibilityIgnoresInvertColors
+            />
+          )}
+          title="List item 1"
+          description="Describes item 1. Example of a very very long description."
+        />
+        <List.Item
+          left={() => (
+            <Image
+              source={require('../../assets/images/email-icon.png')}
+              style={styles.image}
+              accessibilityIgnoresInvertColors
+            />
+          )}
+          right={(props) => <List.Icon {...props} icon="star-outline" />}
+          title="List item 2"
+          description="Describes item 2. Example of a very very long description."
+        />
+      </List.Section>
+      <Divider />
+      <List.Section>
+        <List.Subheader>Custom title and description</List.Subheader>
+        <List.Item
+          left={() => (
+            <Image
+              source={require('../../assets/images/email-icon.png')}
+              style={styles.image}
+              accessibilityIgnoresInvertColors
+            />
+          )}
+          right={(props) => <List.Icon {...props} icon="star-outline" />}
+          title={({ ellipsizeMode, color: titleColor, fontSize }) => (
+            <View style={[styles.container, styles.row, styles.customTitle]}>
+              <Text
+                ellipsizeMode={ellipsizeMode}
+                style={{ color: titleColor, fontSize }}
+              >
+                List Item
+              </Text>
+              <Caption>Yesterday</Caption>
+            </View>
+          )}
+          description={({
+            ellipsizeMode,
+            color: descriptionColor,
+            fontSize,
+          }) => (
+            <View style={[styles.container, styles.column]}>
+              <Text
+                numberOfLines={2}
+                ellipsizeMode={ellipsizeMode}
+                style={{ color: descriptionColor, fontSize }}
+              >
+                React Native Paper is a high-quality, standard-compliant
+                Material Design library that has you covered in all major
+                use-cases.
+              </Text>
+              <View
+                style={[styles.container, styles.row, styles.additionalPadding]}
+              >
+                <Chip icon="file-pdf-box" onPress={() => {}}>
+                  DOCS.pdf
+                </Chip>
+              </View>
+            </View>
+          )}
+        />
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+ListSectionExample.title = 'List.Section';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    height: 40,
+    width: 40,
+    margin: 8,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  column: {
+    flexDirection: 'column',
+  },
+  customTitle: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  additionalPadding: {
+    paddingTop: 8,
+  },
+});
+
+export default ListSectionExample;

package/Examples/SampleUI/src/Examples/MaterialBottomTabNavigatorExample.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import { createMaterialBottomTabNavigator } from '../react-navigation';
+
+const Tab = createMaterialBottomTabNavigator();
+
+export default function MaterialBottomTabNavigatorExample() {
+  return (
+    <Tab.Navigator
+      initialRouteName="Feed"
+      activeColor="#e91e63"
+      style={styles.tabs}
+    >
+      <Tab.Screen
+        name="Feed"
+        component={Feed}
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: ({ color }) => (
+            <Icon name="home" color={color} size={26} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Notifications"
+        component={Notifications}
+        options={{
+          tabBarLabel: 'Updates',
+          tabBarIcon: ({ color }) => (
+            <Icon name="bell" color={color} size={26} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={Profile}
+        options={{
+          tabBarLabel: 'Profile',
+          tabBarIcon: ({ color }) => (
+            <Icon name="account" color={color} size={26} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+MaterialBottomTabNavigatorExample.title = 'Material Bottom Tab Navigator';
+
+function Feed() {
+  return (
+    <View style={styles.screen}>
+      <Text>Feed!</Text>
+    </View>
+  );
+}
+
+function Profile() {
+  return (
+    <View style={styles.screen}>
+      <Text>Profile!</Text>
+    </View>
+  );
+}
+
+function Notifications() {
+  return (
+    <View style={styles.screen}>
+      <Text>Notifications!</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // eslint-disable-next-line react-native/no-color-literals
+  tabs: {
+    backgroundColor: 'tomato',
+  },
+});