Made image proper size and changed the font family

Author: Kartikeyyadav7

android/app/src/main/assets/fonts/SourceSerifPro-Light.ttf

@@ -44,6 +44,7 @@ const styles = StyleSheet.create({
 		color: "#000",
 		fontSize: 19,
 		// paddingTop: 20,
+		fontFamily: "SourceSerifPro-Regular",
 		height: 28,
 	},
 	category: {

android/app/src/main/assets/fonts/SourceSerifPro-Regular.ttf

@@ -78,6 +78,8 @@ const ListBookmarks = ({ navigation, id }: any) => {
 		</View>
 	);
 };
+const { height } = Dimensions.get("screen");
+const height_logo = height * 0.1;
 
 const styles = StyleSheet.create({
 	container: {
@@ -120,16 +122,17 @@ const styles = StyleSheet.create({
 	},
 
 	cardImage: {
-		height: 150,
 		width: undefined,
+		height: height_logo * 2.5,
 		marginTop: 15,
 	},
 	title: {
-		fontSize: 18,
+		fontSize: 19,
 		color: "#000",
+		fontFamily: "SourceSerifPro-SemiBold",
 	},
 	description: {
-		fontSize: 15,
+		fontSize: 16,
 		borderTopLeftRadius: 1,
 		borderTopRightRadius: 1,
 		flexDirection: "row",
@@ -140,12 +143,14 @@ const styles = StyleSheet.create({
 		marginTop: 5,
 		marginBottom: 5,
 		width: undefined,
+		fontFamily: "SourceSerifPro-Regular",
 	},
 	time: {
-		fontSize: 13,
+		fontSize: 14,
 		color: "#808080",
 		// color: "#000",
 		marginTop: 5,
+		fontFamily: "SourceSerifPro-Regular",
 	},
 
 	timeContainer: {

android/app/src/main/assets/fonts/SourceSerifPro-SemiBold.ttf

@@ -13,12 +13,27 @@ const Stack = createNativeStackNavigator();
 export const HomeScreenNavigator = () => {
 	return (
 		<Stack.Navigator initialRouteName="Home">
-			<Stack.Screen name="Home" component={HomeScreen} />
+			<Stack.Screen
+				name="Home"
+				component={HomeScreen}
+				options={{
+					headerTitleStyle: {
+						fontFamily: "SourceSerifPro-Regular",
+						fontSize: 20,
+					},
+				}}
+			/>
 			<Stack.Screen
 				name="Category"
 				component={CategoryScreen}
 				//TODO: If you want to render each category header based on params passed then you have to do typescript typing into the params to access them here
-				// options={({ route }) => ({ title: route.params?.category ? route.params.category : "" })}
+				options={({ route }) => ({
+					title: route.params?.category,
+					headerTitleStyle: {
+						fontFamily: "SourceSerifPro-Regular",
+						fontSize: 20,
+					},
+				})}
 			/>
 			<Stack.Screen
 				name="Blog"
@@ -32,22 +47,49 @@ export const HomeScreenNavigator = () => {
 export const ExploreScreenNavigator = () => {
 	return (
 		<Stack.Navigator>
-			<Stack.Screen name="Explore" component={ExploreScreen} />
+			<Stack.Screen
+				name="Explore"
+				component={ExploreScreen}
+				options={{
+					headerTitleStyle: {
+						fontFamily: "SourceSerifPro-Regular",
+						fontSize: 20,
+					},
+				}}
+			/>
 		</Stack.Navigator>
 	);
 };
 
 export const BookmarkScreenNavigator = () => {
 	return (
 		<Stack.Navigator>
-			<Stack.Screen name="Bookmark" component={BookmarkScreen} />
+			<Stack.Screen
+				name="Bookmark"
+				component={BookmarkScreen}
+				options={{
+					headerTitleStyle: {
+						fontFamily: "SourceSerifPro-Regular",
+						fontSize: 20,
+					},
+				}}
+			/>
 		</Stack.Navigator>
 	);
 };
 export const ProfileScreenNavigator = () => {
 	return (
 		<Stack.Navigator>
-			<Stack.Screen name="Profile" component={ProfileScreen} />
+			<Stack.Screen
+				name="Profile"
+				component={ProfileScreen}
+				options={{
+					headerTitleStyle: {
+						fontFamily: "SourceSerifPro-Regular",
+						fontSize: 20,
+					},
+				}}
+			/>
 		</Stack.Navigator>
 	);
 };

assets/fonts/SourceSerifPro-Light.ttf

@@ -12,6 +12,16 @@ import {
 const Tab = createMaterialBottomTabNavigator();
 
 function AppStack() {
+	const getTabBarVisibility = (route: any) => {
+		const routeName = route.state
+			? route.state.routes[route.state.index].name
+			: "";
+
+		if (routeName === "Blog") {
+			return false;
+		}
+		return true;
+	};
 	return (
 		<Tab.Navigator
 			initialRouteName="HomeScreen"
@@ -30,13 +40,14 @@ function AppStack() {
 			<Tab.Screen
 				name="HomeScreen"
 				component={HomeScreenNavigator}
-				options={{
+				options={({ route }) => ({
+					//? The feature of tab bar visibility is not available in react native material bottom tabs navigator
+					// tabBarVisible: getTabBarVisibility(route),
 					tabBarLabel: "Home",
 					tabBarIcon: ({ color }) => (
 						<MaterialIcons name="home" color={color} size={26} />
 					),
-					title: "Home",
-				}}
+				})}
 			/>
 			<Tab.Screen
 				name="ExploreScreen"

assets/fonts/SourceSerifPro-Regular.ttf

@@ -23,20 +23,8 @@ const AuthStack: React.FC<AuthStackProps> = ({}) => {
 			}}
 			initialRouteName="SignupScreen"
 		>
-			<Stack.Screen
-				// options={{
-				//   headerTitle: "Sign In"
-				// }}
-				name="LoginScreen"
-				component={LoginScreen}
-			/>
-			<Stack.Screen
-				// options={{
-				//   headerTitle: "Sign Up"
-				// }}
-				name="SignupScreen"
-				component={SignupScreen}
-			/>
+			<Stack.Screen name="LoginScreen" component={LoginScreen} />
+			<Stack.Screen name="SignupScreen" component={SignupScreen} />
 		</Stack.Navigator>
 	);
 };

assets/fonts/SourceSerifPro-SemiBold.ttf

@@ -15,6 +15,7 @@
 		"@react-native-firebase/auth": "^12.7.3",
 		"@react-native-firebase/firestore": "^12.7.3",
 		"@react-native-google-signin/google-signin": "^6.0.1",
+		"@react-native-masked-view/masked-view": "^0.2.6",
 		"@react-navigation/material-bottom-tabs": "^6.0.5",
 		"@react-navigation/native": "^6.0.2",
 		"@react-navigation/native-stack": "^6.0.6",
@@ -28,11 +29,13 @@
 		"react-native-bootsplash": "^3.2.4",
 		"react-native-dotenv": "^3.2.0",
 		"react-native-fbsdk-next": "^4.3.0",
+		"react-native-linear-gradient": "^2.5.6",
 		"react-native-markdown-display": "^7.0.0-alpha.2",
 		"react-native-paper": "^4.9.2",
 		"react-native-popup-confirm-toast": "^2.0.2",
 		"react-native-safe-area-context": "^3.3.0",
 		"react-native-screens": "^3.5.0",
+		"react-native-skeleton-placeholder": "^5.0.0",
 		"react-native-status-bar-height": "^2.6.0",
 		"react-native-vector-icons": "^8.1.0",
 		"react-native-windows": "^0.64.0-0",