Add LWC to Salesforce mobile record page

Steps to add Lightning web component to Salesforce Mobile Record Page

1. Build your Lwc component with the desired functionality. For example purpose, I will use a hello world component.
2. Make your component compatible with Salesforce mobile app record pages by adding the below code to its meta.xml file.
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>55.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__RecordPage</target>
           <target>lightning__AppPage</target>
           <target>lightning__HomePage</target>
       </targets>
       <targetConfigs>
           <!-- Applying this config to all types of pages like record page, app page etc. -->
           <targetConfig targets="lightning__RecordPage,lightning__AppPage, lightning__HomePage">
               <supportedFormFactors>
                   <!-- Remove the below line if you want component to show onlyu on mobile devices. -->
                   <supportedFormFactor type="Large" /> 
                   <supportedFormFactor type="Small" />
               </supportedFormFactors>
           </targetConfig>
       </targetConfigs>
   </LightningComponentBundle>
   

3. Deploy the component.
4. Edit the record page where you want to add your component. Setup -> Object Manager -> Object -> Lightning Record Pages -> Edit the page. For example, I will go to the Contact's Lightning Record Page.
   
5. Click edit on the record page and it will open Lightning App Builder.
6. Switch the view to Phone from the top left section of App builder.
   
7. Search your component in the components list. Then drag and drop it onto the mobile record page.
   
8. Save and activate the layout.
9. Now, log in to Salesforce mobile app and open the record page, you should see the component over there.

Important Notes

* If you don't see the comp*onent in the mobile app make sure that you clear the cache from the mobile app settings. See the below steps.

1. Tap on your avatar from the Salesforce mobile app.
2. Select Settings.
3. Select Advanced.
4. Then tap on Clear Cached Data.

* Note that if you add your component only on the mobile view then it won't be visible on the desktop version of your record page.

* Some of the lightning components like Lightning Datatable are not supported on mobile devices.

I hope this was helpful! Please let me know in the comments if any questions.