Page Comparison

...

1. Copy the guide images to the Assets folder of your project, e.g. ...\MobileSource\RNModelHouse\CTModelHouse\assets. 

2. Execute the command, "react-native link asset" in the same Assets folder. 

   Note
   On executing the "react-native link asset" command, the guide images will get moved to the Custom folder of your project, e.g. ...\android\app\src\main\assets\custom.

   
   

3. Add the CoachMarksComponent.js file to the loginComponent folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\Component\loginComponent.
4. Add the appropriate styles for the coach marks in the structure.scss file placed inside the styles folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\styles.

5. Specify the Root Navigator in the router.config.js file placed inside the routing folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\routing, as shown in the following code snippet:

   Code Block
   language js
   export const RootNavigator = createStackNavigator({})

   
   

6. Import the CoachMarksComponent and specify the path of the CoachMarksComponent.js in the same router.config.js file, as shown in the following code snippet:

   Code Block
   language js
   import CoachMarksComponent from "../component/loginComponent/CoachMarksComponent"

   
   

7. Specify the ct.coachMarksRN class in the CT_READY_RN.js file placed inside the module folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\impl\module, as shown in the following code snippet:

   Code Block
   language js
   ct.coachMarksRN();

   
   

8. Specify the ct.util.canvasCoacher class in the RN_CT_VIEW_BASE.js placed inside the viewBase folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\viewBase, as shown in the following code snippet:

   Code Block
   language js
   CANVASCOACHER = ct.util.canvasCoacher;

   
   

9. Import the Async Storage from the React Native environment to the CT_READY_RN.js file, as shown in the following code snippet:

   Code Block
   language js
   import { AsyncStorage } from "react-native";

   
   

10. Ensure that the appropriate values and keys are provided in the CT_READY_RN.js file. The following code snippet serves as a sample reference:

    Note
    The Coach Marks get rendered in your application on the basis of the provided values, which are passed in the CT_READY_RN.js file. The file format of the image needs to be specified for the img class. The CT_READY_RN.js file serves as the pivotal part of the coach marks structure.

    
    

    Code Block
    language js
    var config = { "type": "static", // For native mobile apps "coachMarks": [{ "topMsg": "ORDERS PAGE OF GEM", "bottomMsg": "Here you will get Complete details of your order", "img": "ORDERPAGE.jpg" }, { "topMsg": "ORDERS PAGE OF GEM", "bottomMsg": "Here you will get Complete details of your order", "img": "ORDERDETAILS.jpg" } ]

    
    

    Note

    The topMsg indicates the guide messages, which are to be displayed on the top of the guide image, e.g. ORDERS PAGE OF GEM.  The bottomMsg indicates the guide messages, which are to be displayed on the bottom of the guide image, e.g. Here you will get Complete details of your order.  The img indicates the guide image. It is mandatory for you to specify the appropriate file name of the image with the relevant file format, e.g. ORDERDETAILS.jpg.

    
    The following screen shot showcases the Orders Page in the form of Static Type coach marks in a native mobile application:

...