Adapted previous work on the News screen during creative day

src/components/Menu/Menu.tsx

@@ -341,6 +341,21 @@ const Menu = ( ) => {
         </View>
       </View>
 
+      <View className="bg-red">
+        <MenuItem
+          item={{
+            label: t( "NEWS" ),
+            icon: "news",
+          }}
+          onPress={() => navigation.navigate( "TabNavigator", {
+            screen: "MenuTab",
+            params: {
+              screen: "News",
+            },
+          } )}
+        />
+      </View>
+
       {modalState === MenuModalState.ConfirmLogout && (
         <WarningSheet
           onPressClose={() => setModalState( null )}

src/components/News/News.tsx

@@ -0,0 +1,10 @@
+import { View } from "components/styledComponents";
+import React from "react";
+
+const News = ( ) => (
+  <View className="flex-1">
+    {null}
+  </View>
+);
+
+export default News;

src/i18n/l10n/en.ftl

@@ -786,6 +786,7 @@ Needs-ID--quality-grade = Needs ID
 New-Observation = New Observation
 # Sort order, refers to newest or oldest date
 Newest-to-oldest = Newest to oldest
+NEWS = NEWS
 Next-observation = Next observation
 # Accessibility label for a button that goes to the next slide on onboarding cards
 Next-slide = Next slide

src/i18n/l10n/en.ftl.json

@@ -459,6 +459,7 @@
   "Needs-ID--quality-grade": "Needs ID",
   "New-Observation": "New Observation",
   "Newest-to-oldest": "Newest to oldest",
+  "NEWS": "NEWS",
   "Next-observation": "Next observation",
   "Next-slide": "Next slide",
   "No-Camera-Available": "No Camera Available",

src/i18n/strings.ftl

@@ -789,6 +789,7 @@ Newest-to-oldest = Newest to oldest
 Next-observation = Next observation
 # Accessibility label for a button that goes to the next slide on onboarding cards
 Next-slide = Next slide
+NEWS = NEWS
 # Error message when no camera can be found
 No-Camera-Available = No Camera Available
 # Alert dialog title when attempting to send email but no email is installed

src/navigation/StackNavigators/TabStackNavigator.tsx

@@ -13,6 +13,7 @@ import RootExploreContainer from "components/Explore/RootExploreContainer";
 import Help from "components/Help/Help";
 import Menu from "components/Menu/Menu";
 import MyObservationsContainer from "components/MyObservations/MyObservationsContainer";
+import News from "components/News/News";
 import Notifications from "components/Notifications/Notifications";
 import DQAContainer from "components/ObsDetails/DQAContainer";
 import ObsDetailsContainer from "components/ObsDetails/ObsDetailsContainer";
@@ -64,6 +65,11 @@ const helpTitle = () => (
     {t( "HELP" )}
   </Heading4>
 );
+const newsTitle = () => (
+  <Heading4 accessibilityRole="header" numberOfLines={1}>
+    {t( "NEWS" )}
+  </Heading4>
+);
 const dqaTitle = () => (
   <Heading4 accessibilityRole="header" numberOfLines={1}>
     {t( "DATA-QUALITY-ASSESSMENT" )}
@@ -112,6 +118,7 @@ const FadeInSettings = ( ) => fadeInComponent( <Settings /> );
 const FadeInHelp = ( ) => fadeInComponent( <Help /> );
 const FadeInAbout = ( ) => fadeInComponent( <About /> );
 const FadeInDonate = ( ) => fadeInComponent( <Donate /> );
+const FadeInNews = ( ) => fadeInComponent( <News /> );
 const FadeInProjectList = ( ) => fadeInComponent( <ProjectListContainer /> );
 const FadeInFollowersList = ( ) => fadeInComponent( <FollowersList /> );
 const FadeInFollowingList = ( ) => fadeInComponent( <FollowingList /> );
@@ -358,6 +365,13 @@ const TabStackNavigator = ( { route }: BottomTabProps ) => {
             headerTitle: helpTitle,
           }}
         />
+        <Stack.Screen
+          name="News"
+          component={FadeInNews}
+          options={{
+            headerTitle: newsTitle,
+          }}
+        />
       </Stack.Group>
     </Stack.Navigator>
   );