Expo app tv example (#112)

* expo-app-tv-example

.gitignore

@@ -16,6 +16,13 @@ DerivedData
 *.ipa
 *.xcuserstate
 
+#MacOS
+.DS_Store
+
+# Turborepo cache
+.turbo
+
+
 # Android/IntelliJ
 #
 .idea

CONTRIBUTING.md

@@ -0,0 +1,11 @@
+# Contributing guidelines
+
+1. Clone this repository.
+2. Run `yarn` to install packages in the root folder.
+3. Go to `./examples/MyTVProject`
+4. Run `yarn start` in the terminal.
+5. Open a new terminal and go to `./examples/MyTVProject` again
+6. Run `yarn prebuild`
+7. Run `yarn ios` or `yarn android`
+8. Make your changes to `./packages/media-console`
+9. Test the changes on the simulator. If everything is good, you can open a pull request.

README.md

@@ -15,17 +15,27 @@ VideoPlayer for the React Native `<Video/>` component at [react-native-video][15
 
 ## ⭐️ Features
 
-This monorepo contains the `react-native-media-console` modules:
+This monorepo contains the `react-native-media-console` modules (`./packages/*`) and examples (`./examples/*`):
 
 | Package  | Description |
 | ------------- | ------------- |
 | [`react-native-media-console`][22] | Main package. Here you will also find complete documentation. |
 | [`@react-native-media-console/reanimated`][23]  | Use reanimated animations for the videoplayer |
 | `@react-native-media-console/icons`  | 🚧 Work In Progress|
 
+<br>
+
+| Example app  | Description |
+| ------------- | ------------- |
+| [`Expo Video TV app`][24]       | Multi platform app to demonstrate how `react-native-media-console` works <br> and also used for testing and contributing. |
 
 <br>
 
+## Contributing
+
+Issues, pull request, and discussion are all welcome. See the [Contribution Guidelines](CONTRIBUTING.md) for details, and please reach out to [the author](https://github.com/LunatiqueCoder) if you would like to participate more significantly.
+
+<br>
 
 ## 🏆 Sponsors
 
@@ -57,3 +67,4 @@ This monorepo contains the `react-native-media-console` modules:
 [21]: https://englishdiscoveries.page.link/fJc4
 [22]: https://github.com/LunatiqueCoder/react-native-media-console/tree/master/packages/media-console
 [23]: https://github.com/LunatiqueCoder/react-native-media-console/tree/master/packages/reanimated
+[24]: https://github.com/LunatiqueCoder/react-native-media-console/tree/master/examples/MyTVProject

examples/MyTVProject/.gitignore

@@ -0,0 +1,22 @@
+node_modules/
+.expo/
+dist/
+ios/
+android/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

examples/MyTVProject/README.md

@@ -0,0 +1,48 @@
+# react-native-media-console TV demo 👋
+
+![Apple TV screen shot](https://github.com/douglowder/examples/assets/6577821/a881466f-a7a0-4c66-b1fc-33235c466997)
+![Android TV screen shot](https://github.com/douglowder/examples/assets/6577821/815c8e01-8275-4cc1-bd57-b9c8bce1fb02)
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+This project uses
+
+- the [React Native TV fork](https://github.com/react-native-tvos/react-native-tvos), which supports both phone (Android and iOS) and TV (Android TV and Apple TV) targets
+- the [React Native TV config plugin](https://github.com/react-native-tvos/config-tv/tree/main/packages/config-tv) to allow Expo prebuild to modify the project's native files for TV builds
+- [react-native-video](https://github.com/TheWidlarzGroup/react-native-video) package to play videos
+- [react-native-media-console](https://github.com/LunatiqueCoder/react-native-media-console) for video controls
+
+## 🚀 How to use
+
+- `cd` into the project
+
+```sh
+yarn
+yarn prebuild # Executes Expo prebuild with TV modifications
+yarn ios # Build and run for Apple TV
+yarn android # Build for Android TV
+```
+
+## Development
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+This project includes a [demo](./components/EventHandlingDemo.tsx) showing how to use React Native TV APIs to highlight controls as the user navigates the screen with the remote control.
+
+## TV specific file extensions
+
+This project includes an [example Metro configuration](./metro.config.js) that allows Metro to resolve application source files with TV-specific code, indicated by specific file extensions (`*.ios.tv.tsx`, `*.android.tv.tsx`, `*.tv.tsx`). The [ExternalLink](./components/ExternalLink.tsx) component makes use of this by having a [separate TV source file](./components/ExternalLink.tv.tsx) that avoids importing packages that don't exist on Apple TV.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/learn): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

examples/MyTVProject/app.json

@@ -0,0 +1,45 @@
+{
+  "expo": {
+    "plugins": [
+      [
+        "@react-native-tvos/config-tv",
+        {
+          "androidTVBanner": "./assets/tv_icons/icon-400x240.png",
+          "appleTVImages": {
+            "icon": "./assets/tv_icons/icon-1280x768.png",
+            "iconSmall": "./assets/tv_icons/icon-400x240.png",
+            "iconSmall2x": "./assets/tv_icons/icon-800x480.png",
+            "topShelf": "./assets/tv_icons/icon-1920x720.png",
+            "topShelf2x": "./assets/tv_icons/icon-3840x1440.png",
+            "topShelfWide": "./assets/tv_icons/icon-2320x720.png",
+            "topShelfWide2x": "./assets/tv_icons/icon-4640x1440.png"
+          }
+        }
+      ],
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "newArchEnabled": false
+          },
+          "android": {
+            "newArchEnabled": false
+          }
+        }
+      ],
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    },
+    "name": "MyTVProject",
+    "slug": "MyTVProject",
+    "android": {
+      "package": "com.tvproject"
+    },
+    "ios": {
+      "bundleIdentifier": "com.tvproject"
+    },
+    "scheme": "tvproject"
+  }
+}

examples/MyTVProject/app/(tabs)/_layout.tsx

@@ -0,0 +1,83 @@
+import {Tabs} from 'expo-router';
+import React from 'react';
+import {Pressable} from 'react-native';
+import {BottomTabBarButtonProps} from '@react-navigation/bottom-tabs';
+import {TabBarIcon} from '@/components/navigation/TabBarIcon';
+import {Colors} from '@/constants/Colors';
+import {useColorScheme} from '@/hooks/useColorScheme';
+import {useTextStyles} from '@/hooks/useTextStyles';
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+  const textStyles = useTextStyles();
+
+  const tabBarButton = (props: BottomTabBarButtonProps) => {
+    const style: any = props.style ?? {};
+    return (
+      <Pressable
+        {...props}
+        style={({pressed, focused}) => [
+          style,
+          {
+            opacity: pressed || focused ? 0.6 : 1.0,
+          },
+        ]}
+      />
+    );
+  };
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarStyle: {
+          height: textStyles.title.lineHeight * 2,
+          marginBottom: 0,
+        },
+        headerShown: false,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarButton,
+          tabBarLabelStyle: textStyles.default,
+          tabBarIcon: ({color, focused}) => (
+            <TabBarIcon
+              name={focused ? 'home' : 'home-outline'}
+              color={color}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Explore',
+          tabBarButton,
+          tabBarLabelStyle: textStyles.default,
+          tabBarIcon: ({color, focused}) => (
+            <TabBarIcon
+              name={focused ? 'code-slash' : 'code-slash-outline'}
+              color={color}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="tv_focus"
+        options={{
+          title: 'TV event demo',
+          tabBarButton,
+          tabBarLabelStyle: textStyles.default,
+          tabBarIcon: ({color, focused}) => (
+            <TabBarIcon
+              name={focused ? 'code-slash' : 'code-slash-outline'}
+              color={color}
+            />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}