Created BottomModal with helpfer dismiss, User Screen created and Charts are added

Author: anwersolangi

.prettierrc.js

@@ -4,4 +4,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
+  endOfLine: 'auto',
 };

.vscode/settings.json

@@ -5,4 +5,4 @@
     "search.exclude": {
         "**/node_modules": false
     },
-    }
+}

App.js

@@ -1,111 +1,247 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow strict-local
- */
-
-import React from 'react';
-import type {Node} from 'react';
 import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
+  Image,
   StyleSheet,
-  Text,
-  useColorScheme,
+  TouchableOpacity,
   View,
+  Text,
+  Pressable,
 } from 'react-native';
 
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import HomeScreen from './src/Screens/HomeScreen';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {NavigationContainer} from '@react-navigation/native';
+import React, {useState} from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createStackNavigator} from '@react-navigation/stack';
+import SplashScreen from './src/Screens/SplashScreen';
+import Explore from './src/Screens/Explore';
+import Player from './src/Screens/Player';
+import ChannelScreen from './src/Screens/Channel';
+import AboutScreen from './src/Screens/About';
+import Videos from './src/Screens/Videos';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+import UserScreen from './src/Screens/User';
+import UserData from './src/Utils/User.json';
+import TopScreen from './src/Screens/TopScreen';
+import VideosScreen from './src/Screens/Videos';
 
-const Section = ({children, title}): Node => {
-  const isDarkMode = useColorScheme() === 'dark';
+const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+const TopBar = createMaterialTopTabNavigator();
+
+const MainTabs = () => {
   return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
+    <Tab.Navigator
+      tabBarOptions={{
+        style: {
+          position: 'absolute',
+          elevation: 0,
+          shadowOpacity: 0,
+          borderTopWidth: 0.5,
+          bottom: 0,
+          height: 48,
+        },
+        labelStyle: {
+          fontFamily: 'Roboto-Light',
+          fontSize: 12,
+        },
+        activeTintColor: '#000',
+      }}
+      initialRouteName="SplashScreen"
+      backBehavior="history">
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: tabInfo => (
+            <Icon
+              name={tabInfo.focused ? 'home' : 'home-outline'}
+              size={25}
+              color="#282828"
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Explore"
+        component={Explore}
+        options={{
+          tabBarLabel: 'Explore',
+          tabBarIcon: tabInfo => (
+            <Icon
+              name={tabInfo.focused ? 'compass' : 'compass-outline'}
+              size={25}
+              color="#282828"
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="User"
+        component={UserChannel}
+        options={{
+          tabBarLabel: 'User',
+          tabBarIcon: tabInfo => (
+            <Image source={{uri: UserData?.avtar}} style={styles.tabAvtar} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
   );
 };
 
-const App: () => Node = () => {
-  const isDarkMode = useColorScheme() === 'dark';
+const ChannelStack = () => {
+  return (
+    <TopBar.Navigator
+      backBehavior="history"
+      tabBarOptions={{
+        activeTintColor: '#040201',
+        labelStyle: {
+          fontFamily: 'Roboto-Medium',
+          fontSize: 16,
+        },
+        indicatorStyle: {
+          backgroundColor: '#040201',
+        },
+      }}>
+      <TopBar.Screen name="Home" component={ChannelScreen} />
+      <TopBar.Screen name="Videos" component={Videos} />
+      <TopBar.Screen name="About" component={AboutScreen} />
+    </TopBar.Navigator>
+  );
+};
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+function UserChannel() {
+  return (
+    <TopBar.Navigator
+      lazy
+      removeClippedSubviews={false}
+      backBehavior="history"
+      tabBarOptions={{
+        style: {
+          borderBottomWidth: 0,
+        },
+      }}>
+      <TopBar.Screen name="User" component={UserScreen} />
+      <TopBar.Screen name="Video" component={VideosScreen} />
+      <TopBar.Screen name="About" component={AboutScreen} />
+    </TopBar.Navigator>
+  );
+}
 
+const App = props => {
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.js</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Main">
+        <Stack.Screen
+          name="SplashScreen"
+          component={SplashScreen}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="Main"
+          component={MainTabs}
+          options={({navigation, roue}) => ({
+            headerStyle: {
+              height: 45,
+            },
+            headerTitleAlign: 'left',
+            headerTitle: () => (
+              <Image
+                source={require('./assets/logo.png')}
+                style={styles.logo}
+                resizeMode="contain"
+              />
+            ),
+            headerRight: () => (
+              <View style={styles.homeRight}>
+                <TouchableOpacity style={styles.rightButton}>
+                  <Icon
+                    name="notifications-outline"
+                    color="#282828"
+                    size={26}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.rightButton}>
+                  <Icon name="search-outline" color="#282828" size={26} />
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.rightButton}>
+                  <Image
+                    source={{
+                      uri: 'https://avatars.githubusercontent.com/u/37410529?v=4',
+                    }}
+                    style={styles.channelAvtar}
+                  />
+                </TouchableOpacity>
+              </View>
+            ),
+          })}
+        />
+        <Stack.Screen
+          name="Player"
+          component={Player}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="ChannelScreen"
+          initialParams={{optionsModal: false}}
+          component={ChannelStack}
+          options={({navigation, route}) => ({
+            headerStyle: {
+              height: 45,
+            },
+            headerTitleAlign: 'left',
+            headerTitle: () => (
+              <Text style={styles.channelName}>
+                {route?.params.channelName}
+              </Text>
+            ),
+          })}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 };
 
 const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
+  logo: {
+    width: 90,
+  },
+  homeRight: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 10,
+    justifyContent: 'space-around',
+  },
+  channelAvtar: {
+    width: 28,
+    height: 28,
+    borderRadius: 28 / 2,
+  },
+  rightButton: {
+    marginHorizontal: 8,
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
   },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
+  channelName: {
+    fontFamily: 'Roboto-Medium',
+    fontSize: 17.5,
+    color: '#040201',
   },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
+  channelButton: {
+    marginHorizontal: 3,
+    alignSelf: 'center',
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
   },
-  highlight: {
-    fontWeight: '700',
+  tabAvtar: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
   },
 });
 

android/app/src/main/assets/fonts/AntDesign.ttf

@@ -1,13 +1,24 @@
 package com.youtubeclone;
 
 import com.facebook.react.ReactActivity;
+import android.content.Intent;
+import android.content.res.Configuration;
 
 public class MainActivity extends ReactActivity {
 
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.
    */
+
+   @Override
+   public void onConfigurationChanged(Configuration newConfig) {
+       super.onConfigurationChanged(newConfig);
+       Intent intent = new Intent("onConfigurationChanged");
+       intent.putExtra("newConfig", newConfig);
+       this.sendBroadcast(intent);
+   }
+
   @Override
   protected String getMainComponentName() {
     return "youtubeClone";

android/app/src/main/assets/fonts/Entypo.ttf

@@ -10,6 +10,7 @@
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
+import org.wonday.orientation.OrientationActivityLifecycle;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -45,6 +46,7 @@ public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    registerActivityLifecycleCallbacks(OrientationActivityLifecycle.getInstance());
   }
 
   /**

android/app/src/main/assets/fonts/EvilIcons.ttf

@@ -1,3 +1,5 @@
 rootProject.name = 'youtubeClone'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
 include ':app'