Add prettier and update video styling

Author: satya164

.github/workflows/autofix.yml

@@ -24,5 +24,8 @@ jobs:
       - name: Fix lint issues
         run: yarn markdownlint-cli2-fix
 
+      - name: Prettify code
+        run: yarn prettier --write .
+
       - name: Autofix
         uses: autofix-ci/action@8106fde54b877517c9af2c3d68918ddeaa7bed64

.prettierignore

@@ -0,0 +1,2 @@
+build
+.yarn

.prettierrc.json

@@ -3,4 +3,4 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false
-}
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.codeActionsOnSave": ["source.organizeImports", "source.fixAll"]
+}

blog/2018-04-06-react-navigation-2.0-rc.md

@@ -55,7 +55,7 @@ In 1.x, functions on the `navigation` were not contextual - they would be the sa
 
 Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers specific to the stack in 1.x, this would only impact you if you attempted to use the stack helpers from outside of a stack. For example, if you had a tab navigator with a stack in tab A and just a plain screen in tab B, then tried to `push` a route from the screen in tab B, `push` would not be available. Keep this in mind when you update your app if it follows this type of structure.
 
-One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop!  Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md).
+One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md).
 
 ## Deprecations
 

blog/2018-05-07-react-navigation-2.0.md

@@ -51,7 +51,7 @@ The following changes are considered “trivial” because you will only need ma
 
 ### Drawer routes have been replaced with actions
 
-Rather than opening a drawer with `navigation.navigate(‘DrawerOpen’)`, you can now call `navigation.openDrawer()`. Other methods are `closeDrawer()` and `toggleDrawer()`.  See [pull 3618](https://github.com/react-navigation/react-navigation/pull/3618).
+Rather than opening a drawer with `navigation.navigate(‘DrawerOpen’)`, you can now call `navigation.openDrawer()`. Other methods are `closeDrawer()` and `toggleDrawer()`. See [pull 3618](https://github.com/react-navigation/react-navigation/pull/3618).
 
 ### Navigation actions API overhaul
 
@@ -61,7 +61,7 @@ In 1.x, functions on the `navigation` were not contextual - they would be the sa
 
 Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers specific to the stack in 1.x, this would only impact you if you attempted to use the stack helpers from outside of a stack. For example, if you had a tab navigator with a stack in tab A and just a plain screen in tab B, then tried to `push` a route from the screen in tab B, `push` would not be available. Keep this in mind when you update your app if it follows this type of structure.
 
-One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop!  Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md) and in [pull 3392](https://github.com/react-navigation/react-navigation/pull/3392).
+One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md) and in [pull 3392](https://github.com/react-navigation/react-navigation/pull/3392).
 
 ### NavigationActions no longer have `toString()` implementations ([related](https://github.com/react-navigation/react-navigation/issues/4072))
 
@@ -85,24 +85,24 @@ It is worth noting additionally that `createBottomTabNavigator` is different fro
 
 ## Enhancements
 
-* dangerouslyGetParent and dismiss helpers on navigation prop ([3669](https://github.com/react-navigation/react-navigation/pull/3669))
-* State persistence - automatically save state and reload it when the app restarts ([3716](https://github.com/react-navigation/react-navigation/pull/3716))
-* Smoothly transition header visibility in Stack ([3821](https://github.com/react-navigation/react-navigation/pull/3821))
-* Add initialRouteKey for StackRouter ([3540](https://github.com/react-navigation/react-navigation/pull/3540))
-* Make StackNavigator keyboard aware -- it hides automatically when you start to swipe back, and refocuses if you cancel the swipe back gesture ([3951](https://github.com/react-navigation/react-navigation/pull/3951))
-* Allow modification of SafeAreaView props in header ([3496](https://github.com/react-navigation/react-navigation/pull/3496))
-* Add `createMaterialBottomTabNavigator` for a material design style tab bar. (see [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs)).
-* Use findIndex instead of map/indexOf in StateUtils ([commit](https://github.com/react-navigation/react-navigation/commit/47fe858d4ec339d2b1f4b96f3a5444aed8f6f900)
-* Warn when users have multiple stateful navigation containers ([commit](https://github.com/react-navigation/react-navigation/commit/68a2a106f370003dc1d46385fd8b5992be189ee2))
-* Remove almost all uses of React 16 deprecated lifecycle methods ([commit](https://github.com/react-navigation/react-navigation/commit/3f837c895e823de4d528b55fd70ee7ba167480d8))
-* Add `activeLabelStyle` and `inactiveLabelStyle` for `DrawerItem` ([commit](https://github.com/react-navigation/react-navigation/commit/7c488c8d4974028f85a4c5171d27209fa099170f))
+- dangerouslyGetParent and dismiss helpers on navigation prop ([3669](https://github.com/react-navigation/react-navigation/pull/3669))
+- State persistence - automatically save state and reload it when the app restarts ([3716](https://github.com/react-navigation/react-navigation/pull/3716))
+- Smoothly transition header visibility in Stack ([3821](https://github.com/react-navigation/react-navigation/pull/3821))
+- Add initialRouteKey for StackRouter ([3540](https://github.com/react-navigation/react-navigation/pull/3540))
+- Make StackNavigator keyboard aware -- it hides automatically when you start to swipe back, and refocuses if you cancel the swipe back gesture ([3951](https://github.com/react-navigation/react-navigation/pull/3951))
+- Allow modification of SafeAreaView props in header ([3496](https://github.com/react-navigation/react-navigation/pull/3496))
+- Add `createMaterialBottomTabNavigator` for a material design style tab bar. (see [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs)).
+- Use findIndex instead of map/indexOf in StateUtils ([commit](https://github.com/react-navigation/react-navigation/commit/47fe858d4ec339d2b1f4b96f3a5444aed8f6f900)
+- Warn when users have multiple stateful navigation containers ([commit](https://github.com/react-navigation/react-navigation/commit/68a2a106f370003dc1d46385fd8b5992be189ee2))
+- Remove almost all uses of React 16 deprecated lifecycle methods ([commit](https://github.com/react-navigation/react-navigation/commit/3f837c895e823de4d528b55fd70ee7ba167480d8))
+- Add `activeLabelStyle` and `inactiveLabelStyle` for `DrawerItem` ([commit](https://github.com/react-navigation/react-navigation/commit/7c488c8d4974028f85a4c5171d27209fa099170f))
 
 ## Bugfixes
 
-* Avoid unnecessary navigation completion dispatches ([3902](https://github.com/react-navigation/react-navigation/pull/3902))
-* Use Header.HEIGHT instead of measuring to avoid flicker ([3940](https://github.com/react-navigation/react-navigation/pull/3940))
-* Implement paths on `SwitchRouter` ([commit](https://github.com/react-navigation/react-navigation/commit/5e4512f3ebef587bf90e4ec4d660708b72a0a865)).
-* `SwitchRouter` now returns `null` on idempotent navigation ([commit](https://github.com/react-navigation/react-navigation/commit/577d99c1658ef85c061c82d55bf349c38e161e97)).
+- Avoid unnecessary navigation completion dispatches ([3902](https://github.com/react-navigation/react-navigation/pull/3902))
+- Use Header.HEIGHT instead of measuring to avoid flicker ([3940](https://github.com/react-navigation/react-navigation/pull/3940))
+- Implement paths on `SwitchRouter` ([commit](https://github.com/react-navigation/react-navigation/commit/5e4512f3ebef587bf90e4ec4d660708b72a0a865)).
+- `SwitchRouter` now returns `null` on idempotent navigation ([commit](https://github.com/react-navigation/react-navigation/commit/577d99c1658ef85c061c82d55bf349c38e161e97)).
 
 ## Final notes
 

blog/2018-11-01-react-navigation-3.0-rc.md

@@ -46,40 +46,46 @@ const App = createAppContainer(MainNavigator);
 
 This should be an easy change - import `createAppContainer` in the root of your app and use it to wrap the root navigator.
 
-> **Warning**: if you have any custom navigators, you may have used  `createNavigationContainer`, you can remove this now because it’s only used at the root of the app and provided by the user.
+> **Warning**: if you have any custom navigators, you may have used `createNavigationContainer`, you can remove this now because it’s only used at the root of the app and provided by the user.
 
 ### Renamed navigationOptions in navigator configuration
 
 When configuring navigators it’s often useful to pass in default navigation options for the screens inside of that navigator. For example in a stack you might want to set a background color and tint color for each screen. Previously, you would write something like this:
 
 ```js
-const Home = createStackNavigator({
-  Feed: ExampleScreen,
-  Profile: ExampleScreen,
-}, {
-  navigationOptions: {
-    headerTintColor: '#fff',
-    headerStyle: {
-      backgroundColor: '#000',
+const Home = createStackNavigator(
+  {
+    Feed: ExampleScreen,
+    Profile: ExampleScreen,
+  },
+  {
+    navigationOptions: {
+      headerTintColor: '#fff',
+      headerStyle: {
+        backgroundColor: '#000',
+      },
     },
   }
-});
+);
 ```
 
 As of this release, `navigationOptions` in navigator configuration like this has been renamed to `defaultNavigationOptions`.
 
 ```js
-const Home = createStackNavigator({
-  Feed: ExampleScreen,
-  Profile: ExampleScreen,
-}, {
-  defaultNavigationOptions: {
-    headerTintColor: '#fff',
-    headerStyle: {
-      backgroundColor: '#000',
-    },
+const Home = createStackNavigator(
+  {
+    Feed: ExampleScreen,
+    Profile: ExampleScreen,
   },
-});
+  {
+    defaultNavigationOptions: {
+      headerTintColor: '#fff',
+      headerStyle: {
+        backgroundColor: '#000',
+      },
+    },
+  }
+);
 ```
 
 Sometimes you need to configure the `navigationOptions` for a navigator itself. Typically you’d do something like this:
@@ -91,20 +97,23 @@ Home.navigationOptions = { tabBarLabel: 'Home!' };
 As of this release, you can use `navigationOptions` in the navigator config for this instead.
 
 ```js
-const Home = createStackNavigator({
-  Feed: ExampleScreen,
-  Profile: ExampleScreen,
-}, {
-  defaultNavigationOptions: {
-    headerTintColor: '#fff',
-    headerStyle: {
-      backgroundColor: '#000',
-    },
+const Home = createStackNavigator(
+  {
+    Feed: ExampleScreen,
+    Profile: ExampleScreen,
   },
-  navigationOptions: {
-    tabBarLabel: 'Home!',
-  },
-});
+  {
+    defaultNavigationOptions: {
+      headerTintColor: '#fff',
+      headerStyle: {
+        backgroundColor: '#000',
+      },
+    },
+    navigationOptions: {
+      tabBarLabel: 'Home!',
+    },
+  }
+);
 
 const Tabs = createBottomTabNavigator({ Home });
 ```
@@ -132,7 +141,7 @@ const Store = createStackNavigator({
 
 - Basic support for hooks in `react-navigation-hooks`
 - `headerBackgroundTransitionPreset: 'toggle' | 'fade' | 'translate'` lets you choose how to transition your custom `headerBackground` components between screens.
-- Add options to opt in/out of the stack card overlay and shadow that are visible during transitions: `cardShadowEnabled` defaults to `true` and  `cardOverlayEnabled` defaults to `false`.
+- Add options to opt in/out of the stack card overlay and shadow that are visible during transitions: `cardShadowEnabled` defaults to `true` and `cardOverlayEnabled` defaults to `false`.
 - Export `StackGestureContext` and `DrawerGestureContext` from react-navigation-stack and react-navigation-drawer, so you can use the ref from the corresponding gestures with other gesture handlers (eg: [GestureInteraction.js](https://github.com/react-navigation/react-navigation-drawer/blob/bf4bdba7f6a4fbc12192f5d5ba2285f6280431b7/example/src/GestureInteraction.js)).
 
 ## Assorted fixes & improvements
@@ -171,7 +180,7 @@ To keep the experience as simple as possible the `react-navigation` package will
 
 Now that the core of React Navigation can be used outside of React Native, we can provide first-class web support to anyone using React.js on the web, including those who do not want to use `react-native-web`.
 
-Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in  `Link` component:
+Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in `Link` component:
 
 ```js
 import { createSwitchNavigator } from "@react-navigation/core";
@@ -209,10 +218,10 @@ export default App;
 ```
 
 The above `Link` tag will render to:
- `<a href=``"``/profile/Brent?view=photos``"``>Brent's Photos</a>`
+`<a href=``"``/profile/Brent?view=photos``"``>Brent's Photos</a>`
 
 See a simple web app with Create React App [here](https://github.com/react-navigation/example-web). Or take a look at [this razzle app](https://github.com/react-navigation/web-server-example) for a more complicated example including server rendering.
 
-----------
+---
 
 Thanks for reading, please post any issues you encounter to [react-navigation/issues](https://github.com/react-navigation/react-navigation/issues)!

blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

@@ -366,8 +366,8 @@ const Header = ({ scene, previous, navigation }) => {
     options.headerTitle !== undefined
       ? options.headerTitle
       : options.title !== undefined
-      ? options.title
-      : scene.route.name;
+        ? options.title
+        : scene.route.name;
 
   return (
     <Appbar.Header theme={{ colors: { primary: theme.colors.surface } }}>
@@ -385,8 +385,7 @@ const Header = ({ scene, previous, navigation }) => {
           <Avatar.Image
             size={40}
             source={{
-              uri:
-                'https://pbs.twimg.com/profile_images/952545910990495744/b59hSXUd_400x400.jpg',
+              uri: 'https://pbs.twimg.com/profile_images/952545910990495744/b59hSXUd_400x400.jpg',
             }}
           />
         </TouchableOpacity>
@@ -688,7 +687,7 @@ import { Notifications } from './notifications';
 
 const Tab = createMaterialBottomTabNavigator();
 
-export const BottomTabs = props => {
+export const BottomTabs = (props) => {
   // Get a name of current screen
   const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
   const isFocused = useIsFocused();
@@ -874,7 +873,7 @@ export default function Main() {
 
   function toggleTheme() {
     // We will pass this function to Drawer and invoke it on theme switch press
-    setIsDarkTheme(isDark => !isDark);
+    setIsDarkTheme((isDark) => !isDark);
   }
 
   return (

blog/2020-02-06-react-navigation-5.0.md

@@ -7,7 +7,7 @@ author_image_url: https://avatars1.githubusercontent.com/u/29647600?s=200&v=4
 tags: [release, announcement]
 ---
 
-Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding  many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape.
+Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape.
 
 <!--truncate-->
 
@@ -68,7 +68,7 @@ navigation.setOptions({
       }}
     />
   ),
-})
+});
 ```
 
 It can be used for things like adding a button in the header which needs to interact with the screen state.

blog/2020-05-16-web-support.md

@@ -25,6 +25,7 @@ The first step for web support is to have proper URL integration. This means:
 - Buttons that navigate to other screens in the app should be links, and users should be able use standard shortcuts with them
 
 <video playsInline autoPlay muted loop style={{ maxWidth: '100%', marginBottom: 32 }}>
+
   <source src="/assets/blog/web-support/url-integration.mp4" type="video/mp4" />
 </video>
 
@@ -42,7 +43,7 @@ const linking = {
       Home: '',
       Profile: ':id/profile',
       Settings: ':id/blog',
-    }
+    },
   },
 };
 
@@ -96,6 +97,7 @@ Phones have small screens, so it's important to maximize the use of available sc
 It's especially important in case of the [stack navigator](/docs/stack-navigator) because not only we have the browser's address bar, but also the header at the top which is taking vertical space. Now we'll automatically adjust the styles of the stack navigator to get this behavior without you having to write any special code.
 
 <video playsInline autoPlay muted loop style={{ maxWidth: '100%' }}>
+
   <source src="/assets/blog/web-support/hide-addressbar.mp4" type="video/mp4" />
 </video>
 
@@ -104,6 +106,7 @@ It's especially important in case of the [stack navigator](/docs/stack-navigator
 Another way we can make maximum use of the available screen size is by making our UIs adapt to different screen sizes. For example, we may want to show a sidebar for navigation on large screens while switching to a drawer on smaller screens. You can now specify `drawerType` as `permanent` to show an always visible sidebar. See the [documentation for `drawerType`](/docs/drawer-navigator#drawertype) for example code on how to achieve it.
 
 <video playsInline autoPlay muted loop style={{ maxWidth: '100%' }}>
+
   <source src="/assets/blog/web-support/permanent-drawer.mp4" type="video/mp4" />
 </video>
 

blog/2021-03-12-react-navigation-6.0-next.md

@@ -7,7 +7,7 @@ author_image_url: https://avatars2.githubusercontent.com/u/1174278?s=200&v=4
 tags: [release, announcement]
 ---
 
-We're excited to announce that we finally have a prerelease version  of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation.
+We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation.
 
 <!--truncate-->