chore: migrate to monorepo

example/src/Shared/Albums.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable import/no-commonjs */
+
+import * as React from 'react';
+import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
+
+const COVERS = [
+  require('../assets/album-art-1.jpg'),
+  require('../assets/album-art-2.jpg'),
+  require('../assets/album-art-3.jpg'),
+  require('../assets/album-art-4.jpg'),
+  require('../assets/album-art-5.jpg'),
+  require('../assets/album-art-6.jpg'),
+  require('../assets/album-art-7.jpg'),
+  require('../assets/album-art-8.jpg'),
+];
+
+export default class Albums extends React.Component {
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.content}
+      >
+        {COVERS.map((source, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Image key={i} source={source} style={styles.cover} />
+        ))}
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#343C46',
+  },
+  content: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  cover: {
+    width: '50%',
+    height: Dimensions.get('window').width / 2,
+  },
+});

example/src/Shared/Article.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
+
+export default class Article extends React.Component {
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.content}
+      >
+        <View style={styles.author}>
+          <Image
+            style={styles.avatar}
+            source={require('../assets/avatar-1.png')}
+          />
+          <View style={styles.meta}>
+            <Text style={styles.name}>Knowledge Bot</Text>
+            <Text style={styles.timestamp}>1st Jan 2025</Text>
+          </View>
+        </View>
+        <Text style={styles.title}>Lorem Ipsum</Text>
+        <Text style={styles.paragraph}>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It
+          has roots in a piece of classical Latin literature from 45 BC, making
+          it over 2000 years old.
+        </Text>
+        <Image style={styles.image} source={require('../assets/book.jpg')} />
+        <Text style={styles.paragraph}>
+          Richard McClintock, a Latin professor at Hampden-Sydney College in
+          Virginia, looked up one of the more obscure Latin words, consectetur,
+          from a Lorem Ipsum passage, and going through the cites of the word in
+          classical literature, discovered the undoubtable source.
+        </Text>
+        <Text style={styles.paragraph}>
+          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
+          Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
+          Cicero, written in 45 BC. This book is a treatise on the theory of
+          ethics, very popular during the Renaissance. The first line of Lorem
+          Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+          section 1.10.32.
+        </Text>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  author: {
+    flexDirection: 'row',
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  meta: {
+    marginHorizontal: 8,
+    justifyContent: 'center',
+  },
+  name: {
+    color: '#000',
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  timestamp: {
+    color: '#999',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  avatar: {
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+  },
+  title: {
+    color: '#000',
+    fontWeight: 'bold',
+    fontSize: 36,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  paragraph: {
+    color: '#000',
+    fontSize: 16,
+    lineHeight: 24,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  image: {
+    width: '100%',
+    height: 200,
+    resizeMode: 'cover',
+    marginVertical: 8,
+  },
+});

example/src/Shared/Button.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import {
+  AccessibilityStates,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+export interface ButtonProps {
+  /**
+   * Text to display inside the button
+   */
+  title: string;
+
+  /**
+   * Handler to be called when the user taps the button
+   */
+  onPress: (event?: any) => void;
+
+  /**
+   * Color of the text (iOS), or background color of the button (Android)
+   */
+  color?: string;
+
+  /**
+   * TV preferred focus (see documentation for the View component).
+   */
+  hasTVPreferredFocus?: boolean;
+
+  /**
+   * Text to display for blindness accessibility features
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * If true, disable all interactions for this component.
+   */
+  disabled?: boolean;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string;
+}
+
+/**
+ * A basic button component that should render nicely on any platform. Supports
+ * a minimal level of customization.
+ *
+ * <center><img src="img/buttonExample.png"></img></center>
+ *
+ * This button is built using TouchableOpacity
+ *
+ * Example usage:
+ *
+ * ```
+ * import { Button } from 'react-native';
+ * ...
+ *
+ * <Button
+ *   onPress={onPressLearnMore}
+ *   title="Learn More"
+ *   color="#841584"
+ *   accessibilityLabel="Learn more about this purple button"
+ * />
+ * ```
+ *
+ */
+
+export default class Button extends React.Component<ButtonProps> {
+  render() {
+    const {
+      accessibilityLabel,
+      color,
+      onPress,
+      title,
+      disabled,
+      testID,
+    } = this.props;
+    const buttonStyles: any = [styles.button];
+    const textStyles: any = [styles.text];
+    if (color) {
+      if (Platform.OS === 'ios') {
+        textStyles.push({ color });
+      } else {
+        buttonStyles.push({ backgroundColor: color });
+      }
+    }
+    const accessibilityStates: AccessibilityStates[] = [];
+    if (disabled) {
+      buttonStyles.push(styles.buttonDisabled);
+      textStyles.push(styles.textDisabled);
+      accessibilityStates.push('disabled');
+    }
+    const formattedTitle =
+      Platform.OS === 'android' ? title.toUpperCase() : title;
+    return (
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityStates={accessibilityStates}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+      >
+        <View style={buttonStyles}>
+          <Text style={textStyles}>{formattedTitle}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: Platform.select({
+    default: {
+      backgroundColor: '#2196F3',
+      borderRadius: 2,
+      elevation: 4,
+      // Material design blue from https://material.google.com/style/color.html#color-color-palette
+    },
+    ios: {},
+  }),
+  buttonDisabled: Platform.select({
+    default: {
+      backgroundColor: '#dfdfdf',
+      elevation: 0,
+    },
+    ios: {},
+  }),
+  text: {
+    padding: 8,
+    textAlign: 'center',
+    ...Platform.select({
+      default: {
+        color: 'white',
+        fontWeight: '500',
+      },
+      ios: {
+        // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
+        color: '#007AFF',
+        fontSize: 18,
+      },
+    }),
+  },
+  textDisabled: Platform.select({
+    default: {
+      color: '#a1a1a1',
+    },
+    ios: {
+      color: '#cdcdcd',
+    },
+  }),
+});

example/src/Shared/ButtonWithMargin.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import BaseButton, { ButtonProps } from './Button';
+
+export const Button = (props: ButtonProps) => (
+  <View style={styles.margin}>
+    <BaseButton {...props} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  margin: {
+    ...Platform.select({
+      android: {
+        margin: 10,
+      },
+    }),
+  },
+});

example/src/Shared/Chat.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { View, Image, Text, ScrollView, StyleSheet } from 'react-native';
+
+const MESSAGES = [
+  'okay',
+  'sudo make me a sandwich',
+  'what? make it yourself',
+  'make me a sandwich',
+];
+
+export default class Albums extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <ScrollView
+          style={styles.inverted}
+          contentContainerStyle={styles.content}
+        >
+          {MESSAGES.map((text, i) => {
+            const odd = i % 2;
+
+            return (
+              <View
+                // eslint-disable-next-line react/no-array-index-key
+                key={i}
+                style={[odd ? styles.odd : styles.even, styles.inverted]}
+              >
+                <Image
+                  style={styles.avatar}
+                  source={
+                    odd
+                      ? require('../assets/avatar-2.png')
+                      : require('../assets/avatar-1.png')
+                  }
+                />
+                <View
+                  style={[styles.bubble, odd ? styles.received : styles.sent]}
+                >
+                  <Text style={odd ? styles.receivedText : styles.sentText}>
+                    {text}
+                  </Text>
+                </View>
+              </View>
+            );
+          })}
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#eceff1',
+  },
+  inverted: {
+    transform: [{ scaleY: -1 }],
+  },
+  content: {
+    padding: 16,
+  },
+  even: {
+    flexDirection: 'row',
+  },
+  odd: {
+    flexDirection: 'row-reverse',
+  },
+  avatar: {
+    marginVertical: 8,
+    marginHorizontal: 6,
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+    borderColor: 'rgba(0, 0, 0, .16)',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  bubble: {
+    marginVertical: 8,
+    marginHorizontal: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+  },
+  sent: {
+    backgroundColor: '#cfd8dc',
+  },
+  received: {
+    backgroundColor: '#2196F3',
+  },
+  sentText: {
+    color: 'black',
+  },
+  receivedText: {
+    color: 'white',
+  },
+});

example/src/Shared/Contacts.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, FlatList } from 'react-native';
+
+type Item = { name: string; number: number };
+
+const CONTACTS: Item[] = [
+  { name: 'Marissa Castillo', number: 7766398169 },
+  { name: 'Denzel Curry', number: 9394378449 },
+  { name: 'Miles Ferguson', number: 8966872888 },
+  { name: 'Desiree Webster', number: 6818656371 },
+  { name: 'Samantha Young', number: 6538288534 },
+  { name: 'Irene Hunter', number: 2932176249 },
+  { name: 'Annie Ryan', number: 4718456627 },
+  { name: 'Sasha Oliver', number: 9743195919 },
+  { name: 'Jarrod Avila', number: 8339212305 },
+  { name: 'Griffin Weaver', number: 6059349721 },
+  { name: 'Emilee Moss', number: 7382905180 },
+  { name: 'Angelique Oliver', number: 9689298436 },
+  { name: 'Emanuel Little', number: 6673376805 },
+  { name: 'Wayne Day', number: 6918839582 },
+  { name: 'Lauren Reese', number: 4652613201 },
+  { name: 'Kailey Ward', number: 2232609512 },
+  { name: 'Gabrielle Newman', number: 2837997127 },
+  { name: 'Luke Strickland', number: 8404732322 },
+  { name: 'Payton Garza', number: 7916140875 },
+  { name: 'Anna Moss', number: 3504954657 },
+  { name: 'Kailey Vazquez', number: 3002136330 },
+  { name: 'Jennifer Coleman', number: 5469629753 },
+  { name: 'Cindy Casey', number: 8446175026 },
+  { name: 'Dillon Doyle', number: 5614510703 },
+  { name: 'Savannah Garcia', number: 5634775094 },
+  { name: 'Kailey Hudson', number: 3289239675 },
+  { name: 'Ariel Green', number: 2103492196 },
+  { name: 'Weston Perez', number: 2984221823 },
+  { name: 'Kari Juarez', number: 9502125065 },
+  { name: 'Sara Sanders', number: 7696668206 },
+  { name: 'Griffin Le', number: 3396937040 },
+  { name: 'Fernando Valdez', number: 9124257306 },
+  { name: 'Taylor Marshall', number: 9656072372 },
+  { name: 'Elias Dunn', number: 9738536473 },
+  { name: 'Diane Barrett', number: 6886824829 },
+  { name: 'Samuel Freeman', number: 5523948094 },
+  { name: 'Irene Garza', number: 2077694008 },
+  { name: 'Devante Alvarez', number: 9897002645 },
+  { name: 'Sydney Floyd', number: 6462897254 },
+  { name: 'Toni Dixon', number: 3775448213 },
+  { name: 'Anastasia Spencer', number: 4548212752 },
+  { name: 'Reid Cortez', number: 6668056507 },
+  { name: 'Ramon Duncan', number: 8889157751 },
+  { name: 'Kenny Moreno', number: 5748219540 },
+  { name: 'Shelby Craig', number: 9473708675 },
+  { name: 'Jordyn Brewer', number: 7552277991 },
+  { name: 'Tanya Walker', number: 4308189657 },
+  { name: 'Nolan Figueroa', number: 9173443776 },
+  { name: 'Sophia Gibbs', number: 6435942770 },
+  { name: 'Vincent Sandoval', number: 2606111495 },
+];
+
+class ContactItem extends React.PureComponent<{
+  item: Item;
+}> {
+  render() {
+    const { item } = this.props;
+
+    return (
+      <View style={styles.item}>
+        <View style={styles.avatar}>
+          <Text style={styles.letter}>
+            {item.name.slice(0, 1).toUpperCase()}
+          </Text>
+        </View>
+        <View style={styles.details}>
+          <Text style={styles.name}>{item.name}</Text>
+          <Text style={styles.number}>{item.number}</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default class Contacts extends React.Component {
+  _renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
+
+  _ItemSeparator = () => <View style={styles.separator} />;
+
+  render() {
+    return (
+      <FlatList
+        data={CONTACTS}
+        keyExtractor={(_, i) => String(i)}
+        renderItem={this._renderItem}
+        ItemSeparatorComponent={this._ItemSeparator}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  item: {
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  avatar: {
+    height: 36,
+    width: 36,
+    borderRadius: 18,
+    backgroundColor: '#e91e63',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  letter: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  details: {
+    margin: 8,
+  },
+  name: {
+    fontWeight: 'bold',
+    fontSize: 14,
+    color: 'black',
+  },
+  number: {
+    fontSize: 12,
+    color: '#999',
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: 'rgba(0, 0, 0, .08)',
+  },
+});

example/src/Shared/HeaderButtons.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {
+  HeaderButtons as DefaultHeaderButtons,
+  Item,
+} from 'react-navigation-header-buttons';
+
+export class HeaderButtons extends React.PureComponent {
+  static Item = Item;
+
+  render() {
+    return (
+      <DefaultHeaderButtons
+        // color={Platform.OS === 'ios' ? '#037aff' : 'black'}
+        {...this.props}
+      />
+    );
+  }
+}

example/src/Shared/PhotoGrid.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import {
+  View,
+  Image,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ScrollViewProperties,
+} from 'react-native';
+import {
+  withNavigation,
+  NavigationScreenProp,
+  NavigationRoute,
+  NavigationEventSubscription,
+} from 'react-navigation';
+
+class NavigationAwareScrollViewBase extends React.Component<{
+  navigation: NavigationScreenProp<NavigationRoute>;
+  contentContainerStyle: StyleProp<ViewStyle>;
+}> {
+  componentDidMount() {
+    this.subscription = this.props.navigation.addListener('refocus', () => {
+      if (this.props.navigation.isFocused()) {
+        this.root.current && this.root.current.scrollTo({ x: 0, y: 0 });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.subscription && this.subscription.remove();
+  }
+
+  setNativeProps(props: ScrollViewProperties) {
+    // @ts-ignore
+    this.root.current.setNativeProps(props);
+  }
+
+  getNode() {
+    return this.root.current;
+  }
+
+  private subscription: NavigationEventSubscription | undefined;
+
+  private root = React.createRef<ScrollView>();
+
+  render() {
+    return <ScrollView {...this.props} ref={this.root} />;
+  }
+}
+
+const NavigationAwareScrollView = withNavigation(NavigationAwareScrollViewBase);
+
+export default function PhotoGrid({ id }: { id: string }) {
+  const PHOTOS = Array.from({ length: 24 }).map(
+    (_, i) => `https://unsplash.it/300/300/?random&__id=${id}${i}`
+  );
+
+  return (
+    <NavigationAwareScrollView contentContainerStyle={styles.content}>
+      {PHOTOS.map(uri => (
+        <View key={uri} style={styles.item}>
+          <Image source={{ uri }} style={styles.photo} />
+        </View>
+      ))}
+    </NavigationAwareScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 4,
+  },
+  item: {
+    height: Dimensions.get('window').width / 2,
+    width: '50%',
+    padding: 4,
+  },
+  photo: {
+    flex: 1,
+    resizeMode: 'cover',
+  },
+});

example/src/Shared/SampleText.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { StyleSheet } from 'react-native';
+import { Themed } from 'react-navigation';
+
+/**
+ * Used across examples as a screen placeholder.
+ */
+
+const SampleText = ({ children }: { children?: ReactNode }) => (
+  <Themed.Text style={styles.sampleText}>{children}</Themed.Text>
+);
+
+export default SampleText;
+
+const styles = StyleSheet.create({
+  sampleText: {
+    margin: 14,
+  },
+});

example/src/Shared/tabBarIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+
+const tabBarIcon = (name: string) => ({ tintColor }: { tintColor: string }) => (
+  <MaterialIcons style={styles.icon} name={name} color={tintColor} size={24} />
+);
+
+export default tabBarIcon;
+
+const styles = StyleSheet.create({
+  icon: { backgroundColor: 'transparent' },
+});