Dynamically select channel

Author: madsroskar

projects/twitchCloneExpo/App.tsx

@@ -1,20 +1,15 @@
+import { Pressable, View, Image, StyleSheet } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
-import { Pressable, View,Image } from 'react-native';
-import { NavigationContainer, useNavigation } from "@react-navigation/native";
+import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import MainScreen from './src/screen/mainScreen';
-import LiveScreen from './src/screen/liveStream';
-import { RootStackParamList, SearchScreenProps } from './types';
-import SearchScreen from "./src/screen/main_screens/search";
-
-
-
-
 
+import MainScreen from "./src/screen/mainScreen";
+import LiveScreen from "./src/screen/liveStream";
+import SearchScreen from "./src/screen/main_screens/search";
+import { RootStackParamList } from "./types";
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
-
 export default function App() {
   return (
     <NavigationContainer>
@@ -29,7 +24,7 @@ export default function App() {
                 source={{
                   uri: "https://avatars.githubusercontent.com/u/24194413?s=96&v=4",
                 }}
-                style={{ width: 30, height: 30, borderRadius: 200 / 2 }}
+                style={styles.avatar}
               />
             ),
             headerRight: () => (
@@ -77,7 +72,7 @@ export default function App() {
                 </Pressable>
 
                 <Pressable
-                  onPress={({ }) => {
+                  onPress={({}) => {
                     // const navigation = useNavigation();
                     // navigation.navigate({ key: "Search" });
                   }}
@@ -87,9 +82,9 @@ export default function App() {
                 >
                   <AntDesign
                     name="search1"
-                    size={25}
+                    size={styles.icon.height}
                     color="black"
-                    style={{ marginRight: 15 }}
+                    style={styles.icon}
                   />
                 </Pressable>
               </View>
@@ -108,4 +103,14 @@ export default function App() {
   );
 }
 
-
+const styles = StyleSheet.create({
+  icon: {
+    marginRight: 15,
+    height: 25,
+  },
+  avatar: {
+    width: 30,
+    height: 30,
+    borderRadius: 200 / 2
+  }
+})

projects/twitchCloneExpo/app.json

@@ -13,9 +13,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": false
     },

projects/twitchCloneExpo/babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],

projects/twitchCloneExpo/package.json

@@ -7,7 +7,8 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject"
+    "eject": "expo eject",
+    "lint-fix": "prettier --write ."
   },
   "dependencies": {
     "@react-native-community/netinfo": "7.1.3",
@@ -42,6 +43,7 @@
     "@babel/core": "^7.12.9",
     "@types/react": "~17.0.21",
     "@types/react-native": "~0.64.12",
+    "prettier": "^2.5.1",
     "typescript": "~4.3.5"
   },
   "private": true

projects/twitchCloneExpo/src/components/thumbnail.tsx

@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     paddingVertical: 4,
     paddingLeft: 20,
-    marginVertical:15
+    marginVertical: 15,
   },
   image: {
     resizeMode: "cover",

projects/twitchCloneExpo/src/components/videoComponent.tsx

@@ -3,8 +3,6 @@ import { StyleSheet, Dimensions } from "react-native";
 import { Video, AVPlaybackStatus } from "expo-av";
 
 const VideoComponent = ({ url }: { url: string }) => {
-
-
   return (
     <Video
       isMuted={true}
@@ -24,7 +22,7 @@ const VideoComponent = ({ url }: { url: string }) => {
 
 const styles = StyleSheet.create({
   video: {
-    backgroundColor:"black",
+    backgroundColor: "black",
     flex: 1,
     alignSelf: "auto",
     width: Dimensions.get("window").width,

projects/twitchCloneExpo/src/hooks/channelHook.ts

@@ -2,59 +2,69 @@ import { LiveStreamChannel } from "../models/channel";
 
 const useStreamChannel = () => {
   const stream1 = new LiveStreamChannel(
+    "okey",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
     "Okey"
   );
   const stream2 = new LiveStreamChannel(
+    "mads",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
     "Mads"
   );
 
   const stream3 = new LiveStreamChannel(
+    "vish",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
     "Vish"
   );
 
   const stream4 = new LiveStreamChannel(
+    "khushal",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
     "Kushal"
   );
 
   const stream5 = new LiveStreamChannel(
+    "enigma",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
     "Enigma"
   );
 
   const stream6 = new LiveStreamChannel(
+    "paradox",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
     "Paradox"
   );
 
   const stream7 = new LiveStreamChannel(
+    "knull",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerMeltdowns.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
     "Knull"
   );
 
   const stream8 = new LiveStreamChannel(
+    "moon-knight",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/Sintel.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.jpg",
     "Moon knight"
   );
 
   const stream9 = new LiveStreamChannel(
+    "netflix",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/SubaruOutbackOnStreetAndDirt.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4",
     "Netflix"
   );
 
   const stream10 = new LiveStreamChannel(
+    "mads-two",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/images/TearsOfSteel.jpg",
     "https://storage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
     "Mads"

projects/twitchCloneExpo/src/models/channel.ts

@@ -3,13 +3,16 @@ export class LiveStreamChannel {
   channelStream: string;
 
   channelName: string;
+  ID: string;
 
   constructor(
+    ID: string,
     channelImg: string,
     channelStream: string,
 
     channelName: string
   ) {
+    this.ID = ID;
     this.channelImg = channelImg;
     this.channelStream = channelStream;