Skip to content

Latest commit

 

History

History
80 lines (60 loc) · 1.82 KB

add_a_visual_clue.md

File metadata and controls

80 lines (60 loc) · 1.82 KB

Adding a New Visual Clue

To add a visual clue to the app, you will need to do the following:

  1. In the file visualClues.ts add your new visual clue.
   // ExampleClueName: {
   //   description: "Lorem ipsum dolor sit amet,  consectetur adipiscing elit",
   // },
+  NewVisualClue: {
+    description: "My New Visual Clue",
+  },
  1. Add the visual clue dot to the correct bottom tab in BottomTabs.tsx.
-   <BottomTabsButton tab="home" />
+   <BottomTabsButton tab="home" visualClue="NewVisualClue" />
  1. Add the visuel clue text to the correct StickyTabPage tab.
<StickyTabPage
  tabs={[
    {
      title: "Tab Title",
      content: <TabContent />,
+     visualClues: [
+       {
+         jsx: <VisualClueText />,
+         visualClueName: "NewVisualClue",
+       },
+     ],
    },

  ]}
/>

Alternatively, you can add the visual clue to a text element and programmatically mark the hint as seen.

  const { showVisualClue } = useVisualClue()

return(
  <Text>Some Text</Text>
+ {!!showVisualClue("NewVisualClue") && <VisualClueText style={{ top: 14, right: -36 }} />}
)
  // The component that renders the new feature
+ useEffect(() => {
+    setVisualClueAsSeen("NewVisualClue")
+ }, [])
)

Session Clues

Session clues are visual cues that can be shown when an event happened. They are not supposed to be added to visualClues.ts and can show up multiple times. To show a session clue you can add them with addClue("SessionClue") anywhere in the code and mark them as seen with setVisualClueAsSeen("SessionClue").

  const { showVisualClue } = useVisualClue()

  {!!showVisualClue("MyNewVisualClue") && <JSXComponent />}

  // show visual cue
  ...
  addClue("MyNewVisualClue")
  ...

  // mark visual cue as seen
  setVisualClueAsSeen("MyNewVisualClue")