style: prettifying

Author: vanGalilea

docusaurus/docs/reactnative/guides/channel_background_customization.mdx

@@ -11,57 +11,62 @@ npx react-native init MyApp --template stream-chat-react-native-template
 ```
 
 ## Basic Custom Background
+
 You can change the background statically by simply wrapping `MessageList` and `MessageInput` by using the `ImageBackground` component.
 
-<img src='https://user-images.githubusercontent.com/25864161/167857632-c0bc9d67-0a84-4cf5-9d75-305e3bcd1f3d.png'
-     width="320px" />
+<img
+  src='https://user-images.githubusercontent.com/25864161/167857632-c0bc9d67-0a84-4cf5-9d75-305e3bcd1f3d.png'
+  width='320px'
+/>
 
 Also make sure you adjust the `theme` correctly.
 
 ```tsx
-import {Channel, MessageInput, MessageList, ThemeProvider, } from 'stream-chat-react-native';
-import {ImageBackground} from 'react-native';
+import { Channel, MessageInput, MessageList, ThemeProvider } from 'stream-chat-react-native';
+import { ImageBackground } from 'react-native';
 
-const IMAGE_URI = 'https://images.unsplash.com/photo-1549125764-91425ca48850?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NjF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60'
+const IMAGE_URI =
+  'https://images.unsplash.com/photo-1549125764-91425ca48850?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NjF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60';
 
-const ChannelScreen = ({channel})=>
+const ChannelScreen = ({ channel }) => (
   <ThemeProvider style={theme}>
     <Channel channel={channel}>
       <ImageBackground
-        style={{flex: 1}}
+        style={{ flex: 1 }}
         source={{
           uri: IMAGE_URI,
-        }}>
+        }}
+      >
         <MessageList />
         <MessageInput />
       </ImageBackground>
     </Channel>
   </ThemeProvider>
+);
 
 export const theme = {
   messageList: {
     container: {
       backgroundColor: 'transparent',
     },
   },
-}
+};
 ```
 
 ---
 
 ## Custom Background With Selection Screen
+
 In this step, we will add a button that will navigate to a separate screen, where the user will be able to select his
 favorite background image for a specific channel.
 
 <table>
   <tr>
     <td align='center' width='50%'>
-      <img
-        src='https://user-images.githubusercontent.com/25864161/168006715-acae4b85-00cb-4b45-a127-aa8f94c13895.png' />
+      <img src='https://user-images.githubusercontent.com/25864161/168006715-acae4b85-00cb-4b45-a127-aa8f94c13895.png' />
     </td>
     <td align='center' width='50%'>
-      <img
-        src='https://user-images.githubusercontent.com/25864161/168006193-8fd4ad85-7553-4956-a7c6-5d6979e15ee4.png' />
+      <img src='https://user-images.githubusercontent.com/25864161/168006193-8fd4ad85-7553-4956-a7c6-5d6979e15ee4.png' />
     </td>
   </tr>
   <tr></tr>
@@ -76,26 +81,26 @@ favorite background image for a specific channel.
 </table>
 
 ### Store and manage channel preferences
+
 To persist the channel preferences (at the moment, only the URI of the selected background), we will need to store some data.
 We will do it by using `react-native-mmkv`, a key-value storage [framework](https://github.com/mrousavy/react-native-mmkv#mmkv).
 
 Follow the [installation steps](https://github.com/mrousavy/react-native-mmkv#installation), and let's get started, shall we?
 
-
 We will start by creating our `ChannelBackgroundView` component.
 This component will be in charge of rendering the custom background by retrieving it from our key-value store.
 We save an object to a key-value store to be scalable and future-proof.
 You'd might want to add other preferences later, such as dimming value, background color, etc.
 
 ```tsx
-import type {ViewProps} from 'react-native';
-import {useMMKVObject} from 'react-native-mmkv'
+import type { ViewProps } from 'react-native';
+import { useMMKVObject } from 'react-native-mmkv';
 
 type ChannelPreferences = {
-  imageUri: string
-}
+  imageUri: string;
+};
 
-const DEFAULT_BACKGROUND_URI = 'https://i.redd.it/3jfjc53fsyb61.jpg'
+const DEFAULT_BACKGROUND_URI = 'https://i.redd.it/3jfjc53fsyb61.jpg';
 
 const ChannelBackgroundView = ({
   channelId,
@@ -104,98 +109,96 @@ const ChannelBackgroundView = ({
   channelId: string;
 } & ViewProps) => {
   const [channelPreferences] = useMMKVObject<ChannelPreferences>(channelId);
-  let uri: string | undefined =
-    channelPreferences?.imageUri || DEFAULT_BACKGROUND_URI;
+  let uri: string | undefined = channelPreferences?.imageUri || DEFAULT_BACKGROUND_URI;
 
-  return <ImageBackground {...props} source={{uri}} />;
+  return <ImageBackground {...props} source={{ uri }} />;
 };
-````
+```
 
 We will then use it in our previously built `ChannelScreen`.
 Replace the static `ImageBackground` with `ChannelBackgroundView` and pass the `channelId`
 
 ```tsx
-const ChannelScreen = ({channel})=> {
+const ChannelScreen = ({ channel }) => {
   return (
     <ThemeProvider style={theme}>
       <Channel channel={channel}>
-        <ChannelBackgroundView channelId={channel?.id} style={{flex: 1}}>
+        <ChannelBackgroundView channelId={channel?.id} style={{ flex: 1 }}>
           <MessageList />
           <MessageInput />
         </ChannelBackgroundView>
       </Channel>
     </ThemeProvider>
-  )
-}
+  );
+};
 ```
 
 ---
 
 ### Wallpaper overview screen
+
 Let's now add a screen where the user can choose a wallpaper from a particular predefined list of images.
 
 ```tsx
-import {StackNavigationProp} from '@react-navigation/stack';
-import {RouteProp} from '@react-navigation/native';
-import {useMMKVObject} from 'react-native-mmkv'
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
+import { useMMKVObject } from 'react-native-mmkv';
 import { View, SafeAreaView, Pressable, Image, StyleSheet } from 'react-native';
 
 const WallpaperOverviewScreen = ({
-  navigation: {navigate},
+  navigation: { navigate },
   route: {
-    params: {channelId},
+    params: { channelId },
   },
 }: WallpaperOverviewScreenProps) => {
-  const [_, setChannelPreferences] =
-    useMMKVObject<ChannelPreferences>(channelId)
+  const [_, setChannelPreferences] = useMMKVObject<ChannelPreferences>(channelId);
   return (
     <SafeAreaView
       style={{
         flex: 1,
         justifyContent: 'center',
-      }}>
+      }}
+    >
       <View style={styles.container}>
-        {BRIGHT_IMAGES?.map(({imageUri = ''}, i) => {
+        {BRIGHT_IMAGES?.map(({ imageUri = '' }, i) => {
           const handleOnPress = () => {
-            setChannelPreferences({imageUri})
-            navigate('Channel')
-          }
+            setChannelPreferences({ imageUri });
+            navigate('Channel');
+          };
           return (
             <Pressable
               key={i}
               onPress={handleOnPress}
               style={{
                 margin: 1,
                 width: GRID_ITEM_WIDTH,
-              }}>
-              <Image style={styles.image} source={{uri: imageUri}} />
+              }}
+            >
+              <Image style={styles.image} source={{ uri: imageUri }} />
             </Pressable>
-          )
+          );
         })}
       </View>
     </SafeAreaView>
-  )
-}
+  );
+};
 
 type StackNavigatorParamList = {
   WallpaperOverviewScreen: {
-    channelId: string
-  }
-}
+    channelId: string;
+  };
+};
 
 type WallpaperOverviewScreenProps = {
-  navigation: StackNavigationProp<
-    StackNavigatorParamList,
-    'WallpaperOverviewScreen'
-  >
-  route: RouteProp<StackNavigatorParamList, 'WallpaperOverviewScreen'>
-}
+  navigation: StackNavigationProp<StackNavigatorParamList, 'WallpaperOverviewScreen'>;
+  route: RouteProp<StackNavigatorParamList, 'WallpaperOverviewScreen'>;
+};
 
 type ChannelPreferences = {
-  imageUri: string
-}
+  imageUri: string;
+};
 
-const GRID_ITEM_WIDTH = '32.7%'
+const GRID_ITEM_WIDTH = '32.7%';
 
 // Some random images that will get you started
 const BRIGHT_IMAGES = [
@@ -213,7 +216,7 @@ const BRIGHT_IMAGES = [
   'https://images.unsplash.com/photo-1553526777-5ffa3b3248d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTk4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60',
 ].map(imageUri => ({
   imageUri,
-}))
+}));
 
 const styles = StyleSheet.create({
   container: {
@@ -226,8 +229,8 @@ const styles = StyleSheet.create({
   image: {
     flex: 1,
     width: '100%',
-  }
-})
+  },
+});
 ```
 
 :::note
@@ -236,32 +239,32 @@ There are alternative approaches to achieve the same goal, for example by saving
 :::
 
 ### Add a configuration button
+
 We will add now a button that will take the user from the Channel screen to our new WallpaperOverview screen
 
 ```tsx
-import {useNavigation} from '@react-navigation/native';
-import {Channel, MessageInput, MessageList, ThemeProvider} from 'stream-chat-react-native';
-import {Pressable, Text, StyleSheet} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Channel, MessageInput, MessageList, ThemeProvider } from 'stream-chat-react-native';
+import { Pressable, Text, StyleSheet } from 'react-native';
 
-const ChannelScreen = ({channel})=> {
-    const {navigate} = useNavigation()
-  const handleMenuOnPress = () =>
-    navigate('WallpaperOverviewScreen', {channelId: channel?.id})
+const ChannelScreen = ({ channel }) => {
+  const { navigate } = useNavigation();
+  const handleMenuOnPress = () => navigate('WallpaperOverviewScreen', { channelId: channel?.id });
 
   return (
     <ThemeProvider style={theme}>
       <Channel channel={channel}>
-        <ChannelBackgroundView channelId={channel?.id} style={{flex: 1}}>
-            <Pressable style={styles.menuButton} onPress={handleMenuOnPress}>
-              <Text>🎨</Text>
-            </Pressable>
+        <ChannelBackgroundView channelId={channel?.id} style={{ flex: 1 }}>
+          <Pressable style={styles.menuButton} onPress={handleMenuOnPress}>
+            <Text>🎨</Text>
+          </Pressable>
           <MessageList />
           <MessageInput />
         </ChannelBackgroundView>
       </Channel>
     </ThemeProvider>
-  )
-}
+  );
+};
 
 const styles = StyleSheet.create({
   menuButton: {
@@ -275,49 +278,41 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     zIndex: 10,
   },
-})
+});
 
 export const theme = {
   messageList: {
     container: {
       backgroundColor: 'transparent',
     },
   },
-}
+};
 ```
 
 ---
 
 ### Optional: Connect all screens by navigation
+
 If applicable to your use case, add our screens to a Navigation Stack by doing the following.
 
 ```tsx
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {NavigationContainer, } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
 
-const Stack = createNativeStackNavigator()
+const Stack = createNativeStackNavigator();
 
 export default () => {
   return (
     <SafeAreaProvider>
       <ThemeProvider style={theme}>
         <NavigationContainer>
-          <Stack.Navigator initialRouteName="Channel">
-            <Stack.Screen
-              component={ChannelScreen}
-              name="Channel"
-              options={noHeaderOptions}
-            />
-            <Stack.Screen
-              component={WallpaperOverviewScreen}
-              name="WallpaperOverviewScreen"
-            />
+          <Stack.Navigator initialRouteName='Channel'>
+            <Stack.Screen component={ChannelScreen} name='Channel' options={noHeaderOptions} />
+            <Stack.Screen component={WallpaperOverviewScreen} name='WallpaperOverviewScreen' />
           </Stack.Navigator>
         </NavigationContainer>
       </ThemeProvider>
     </SafeAreaProvider>
-  )
-}
+  );
+};
 ```
-
-