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

package/Examples/SampleUI/src/Examples/TeamDetails.tsx

@@ -0,0 +1,291 @@
+import * as React from 'react';
+import {
+  Easing,
+  FlatList,
+  ScrollView,
+  StyleSheet,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+import type { StackNavigationProp } from '@react-navigation/stack';
+import {
+  Appbar,
+  BottomNavigation,
+  Card,
+  Button,
+  Text,
+  Chip,
+  Divider,
+  IconButton,
+  FAB,
+  PaperProvider,
+} from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colorThemes, teamResultsData } from '../../utils';
+import ScreenWrapper from '../ScreenWrapper';
+
+type RoutesState = Array<{
+  key: string;
+  title: string;
+  focusedIcon: string;
+  unfocusedIcon?: string;
+  color?: string;
+  badge?: boolean;
+  getAccessibilityLabel?: string;
+  getTestID?: string;
+}>;
+
+type Route = {
+  route: { key: string };
+  params: {
+    sourceColor: string;
+    headerTitle: string;
+    darkMode: boolean;
+  };
+};
+
+type Props = {
+  navigation: StackNavigationProp<{}>;
+  route: Route;
+};
+
+type Item = {
+  host: string;
+  guest: string;
+  result: string;
+  winner: string;
+  favourite: boolean;
+};
+
+const Roster = () => <View />;
+
+const News = () => {
+  return (
+    <>
+      <ScreenWrapper>
+        <ScrollView
+          showsHorizontalScrollIndicator={false}
+          horizontal
+          style={styles.chipsContainer}
+          contentContainerStyle={styles.chipsContent}
+        >
+          <Chip
+            selected
+            onPress={() => {}}
+            style={styles.chip}
+            showSelectedOverlay
+          >
+            Latest
+          </Chip>
+          <Chip onPress={() => {}} style={styles.chip}>
+            Popular
+          </Chip>
+          <Chip onPress={() => {}} style={styles.chip}>
+            Interviews
+          </Chip>
+          <Chip onPress={() => {}} style={styles.chip}>
+            Transfers
+          </Chip>
+          <Chip onPress={() => {}} style={styles.chip}>
+            League
+          </Chip>
+        </ScrollView>
+        <View style={styles.cardContainer}>
+          <Card style={styles.card} mode="contained">
+            <Card.Cover source={require('../../assets/images/players.jpg')} />
+            <Card.Title
+              title="Winter transfer window"
+              titleVariant="headlineMedium"
+            />
+            <Card.Content>
+              <Text variant="bodyMedium">
+                Which soccer players are switching teams? From the Premier
+                League, La Liga and beyond, here is a list of players on the
+                move this summer.
+              </Text>
+            </Card.Content>
+            <Card.Actions>
+              <Button onPress={() => {}}>Share</Button>
+              <Button onPress={() => {}}>Read more</Button>
+            </Card.Actions>
+          </Card>
+          <Card style={styles.card} mode="contained">
+            <Card.Cover source={require('../../assets/images/players-2.jpg')} />
+            <Card.Title
+              title="John Doe's injury"
+              titleVariant="headlineMedium"
+            />
+            <Card.Content>
+              <Text variant="bodyMedium">
+                Medical tests show that Doe has injured the tendon in his left
+                hamstring, and in the next few days will...
+              </Text>
+            </Card.Content>
+            <Card.Actions>
+              <Button onPress={() => {}}>Share</Button>
+              <Button onPress={() => {}}>Read more</Button>
+            </Card.Actions>
+          </Card>
+        </View>
+      </ScreenWrapper>
+      <FAB icon="magnify" onPress={() => {}} visible style={styles.fab} />
+    </>
+  );
+};
+
+const Results = () => {
+  const renderItem = ({ item }: { item: Item }) => {
+    return (
+      <View style={styles.listRow}>
+        <IconButton
+          onPress={() => {}}
+          selected={item.favourite}
+          icon={item.favourite ? 'star' : 'star-outline'}
+        />
+        <View style={styles.teamResultRow}>
+          <View>
+            <Text
+              variant="bodyLarge"
+              style={item.winner === item.host && styles.winner}
+            >
+              {item.host}
+            </Text>
+            <Text
+              variant="bodyLarge"
+              style={item.winner === item.guest && styles.winner}
+            >
+              {item.guest}
+            </Text>
+          </View>
+          <View style={styles.score}>
+            <Text variant="bodyLarge">{item.result.split(':')[0]}</Text>
+            <Text variant="bodyLarge">{item.result.split(':')[1]}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <FlatList
+      data={teamResultsData}
+      renderItem={renderItem}
+      ItemSeparatorComponent={Divider}
+    />
+  );
+};
+
+const ThemeBasedOnSourceColor = ({ navigation, route }: Props) => {
+  const insets = useSafeAreaInsets();
+  const [index, setIndex] = React.useState(0);
+
+  const { params } = route;
+  const { sourceColor, headerTitle, darkMode } = params;
+
+  const [routes] = React.useState<RoutesState>([
+    {
+      key: 'news',
+      title: 'News',
+      focusedIcon: 'newspaper-variant',
+      unfocusedIcon: 'newspaper-variant-outline',
+      badge: true,
+    },
+    {
+      key: 'results',
+      title: 'Results',
+      focusedIcon: 'soccer-field',
+    },
+    {
+      key: 'roster',
+      title: 'Roster',
+      focusedIcon: 'account-group',
+      unfocusedIcon: 'account-group-outline',
+    },
+  ]);
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  const theme = colorThemes[sourceColor || 'paper'];
+
+  const systemColorScheme = useColorScheme() || 'light';
+  const colorScheme = darkMode ? 'dark' : systemColorScheme;
+
+  return (
+    <PaperProvider theme={theme[colorScheme]}>
+      <View style={styles.screen}>
+        <Appbar.Header elevated>
+          <Appbar.BackAction onPress={() => navigation.goBack()} />
+          <Appbar.Content title={headerTitle} />
+        </Appbar.Header>
+        <BottomNavigation
+          safeAreaInsets={{ bottom: insets.bottom }}
+          navigationState={{ index, routes }}
+          onIndexChange={setIndex}
+          labelMaxFontSizeMultiplier={2}
+          renderScene={BottomNavigation.SceneMap({
+            news: News,
+            results: Results,
+            roster: Roster,
+          })}
+          sceneAnimationEnabled
+          sceneAnimationType={'opacity'}
+          sceneAnimationEasing={Easing.ease}
+          getLazy={({ route }) => route.key !== 'album'}
+        />
+      </View>
+    </PaperProvider>
+  );
+};
+
+ThemeBasedOnSourceColor.title = 'Theme Based On Source Color';
+
+export default ThemeBasedOnSourceColor;
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  winner: {
+    fontWeight: '700',
+  },
+  listRow: {
+    flexDirection: 'row',
+    marginVertical: 8,
+  },
+  teamResultRow: {
+    flex: 1,
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  score: {
+    marginRight: 16,
+  },
+  fab: {
+    position: 'absolute',
+    bottom: 16,
+    right: 16,
+  },
+  card: {
+    marginHorizontal: 8,
+    marginBottom: 8,
+  },
+  cardContainer: {
+    marginBottom: 80,
+  },
+  chipsContainer: {
+    flexDirection: 'row',
+  },
+  chipsContent: {
+    paddingLeft: 8,
+    paddingVertical: 8,
+  },
+  chip: {
+    marginRight: 8,
+  },
+});

package/Examples/SampleUI/src/Examples/TeamsList.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { ParamListBase } from '@react-navigation/native';
+import type { StackScreenProps } from '@react-navigation/stack';
+import { DataTable } from 'react-native-paper';
+
+import { teamsList } from '../../utils';
+import ScreenWrapper from '../ScreenWrapper';
+
+type Props = StackScreenProps<ParamListBase>;
+
+const TeamsList = ({ navigation }: Props) => {
+  return (
+    <ScreenWrapper contentContainerStyle={styles.content}>
+      <DataTable>
+        <DataTable.Header>
+          <DataTable.Title style={styles.first}>Team</DataTable.Title>
+          <DataTable.Title numeric>MP</DataTable.Title>
+          <DataTable.Title numeric>G</DataTable.Title>
+          <DataTable.Title numeric>PTS</DataTable.Title>
+        </DataTable.Header>
+
+        {teamsList.map((item) => (
+          <DataTable.Row
+            key={item.key}
+            onPress={() =>
+              navigation.navigate('teamDetails', {
+                sourceColor: item.name.split(' ')[1].toLowerCase(),
+                headerTitle: item.name,
+                darkMode: item.darkMode,
+              })
+            }
+          >
+            <DataTable.Cell style={styles.first}>{item.name}</DataTable.Cell>
+            <DataTable.Cell numeric>{item.matchesPlayed}</DataTable.Cell>
+            <DataTable.Cell numeric>{item.goals}</DataTable.Cell>
+            <DataTable.Cell numeric>{item.points}</DataTable.Cell>
+          </DataTable.Row>
+        ))}
+      </DataTable>
+    </ScreenWrapper>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    padding: 8,
+  },
+  first: {
+    flex: 2,
+  },
+});
+
+TeamsList.title = 'Teams';
+
+export default TeamsList;

package/Examples/SampleUI/src/Examples/TextExample.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+
+import {
+  Caption,
+  configureFonts,
+  Headline,
+  MD3LightTheme,
+  Paragraph,
+  PaperProvider,
+  Subheading,
+  customText,
+  Title,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const Text = customText<'customVariant'>();
+
+const TextExample = () => {
+  const { isV3 } = useExampleTheme();
+
+  const fontConfig = {
+    customVariant: {
+      fontFamily: Platform.select({
+        ios: 'Noteworthy',
+        default: 'serif',
+      }),
+      fontWeight: '400',
+      letterSpacing: Platform.select({
+        ios: 7,
+        default: 4.6,
+      }),
+      lineHeight: 54,
+      fontSize: 40,
+    },
+  } as const;
+
+  const theme = {
+    ...MD3LightTheme,
+    fonts: configureFonts({ config: fontConfig }),
+  };
+  return (
+    <ScreenWrapper>
+      <View style={styles.container}>
+        {!isV3 && (
+          <>
+            <Caption style={styles.text}>Caption</Caption>
+            <Paragraph style={styles.text}>Paragraph</Paragraph>
+            <Subheading style={styles.text}>Subheading</Subheading>
+            <Title style={styles.text}>Title</Title>
+            <Headline style={styles.text}>Headline</Headline>
+          </>
+        )}
+
+        {isV3 && (
+          <>
+            <Text style={styles.text} variant="displayLarge">
+              Display Large
+            </Text>
+            <Text style={styles.text} variant="displayMedium">
+              Display Medium
+            </Text>
+            <Text style={styles.text} variant="displaySmall">
+              Display small
+            </Text>
+
+            <Text style={styles.text} variant="headlineLarge">
+              Headline Large
+            </Text>
+            <Text style={styles.text} variant="headlineMedium">
+              Headline Medium
+            </Text>
+            <Text style={styles.text} variant="headlineSmall">
+              Headline Small
+            </Text>
+
+            <Text style={styles.text} variant="titleLarge">
+              Title Large
+            </Text>
+            <Text style={styles.text} variant="titleMedium">
+              Title Medium
+            </Text>
+            <Text style={styles.text} variant="titleSmall">
+              Title Small
+            </Text>
+
+            <Text style={styles.text} variant="labelLarge">
+              Label Large
+            </Text>
+            <Text style={styles.text} variant="labelMedium">
+              Label Medium
+            </Text>
+            <Text style={styles.text} variant="labelSmall">
+              Label Small
+            </Text>
+
+            <Text style={styles.text} variant="bodyLarge">
+              Body Large
+            </Text>
+            <Text style={styles.text} variant="bodyMedium">
+              Body Medium
+            </Text>
+            <Text style={styles.text} variant="bodySmall">
+              Body Small
+            </Text>
+
+            <PaperProvider theme={theme}>
+              <Text style={styles.text} variant="customVariant">
+                Custom Variant
+              </Text>
+            </PaperProvider>
+          </>
+        )}
+      </View>
+    </ScreenWrapper>
+  );
+};
+
+TextExample.title = 'Typography';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  text: {
+    marginVertical: 4,
+  },
+});
+
+export default TextExample;