Granite Documentation

The router plugin automatically generates type definitions in a file (typically src/router.gen.ts) that augments the @granite-js/react-native module. It populates the RegisterScreenInput and RegisterScreen interfaces with your specific paths and their corresponding input/output types. This ensures that if you attempt to navigate to a non-existent path or provide incorrect parameters, TypeScript will throw an error during development.

// src/router.gen.ts

/* eslint-disable */
// This file is auto-generated by @granite-js/react-native. DO NOT EDIT.
import { Route as _PageARoute } from '../pages/page-a';
import { Route as _PageBRoute } from '../pages/page-b';
import { Route as _PageCRoute } from '../pages/page-c';

declare module '@granite-js/react-native' {
  interface RegisterScreenInput {
    '/page-a': (typeof _PageARoute)['_inputType'];
    '/page-b': (typeof _PageBRoute)['_inputType'];
    '/page-c': (typeof _PageCRoute)['_inputType'];
  }

  interface RegisterScreen {
    '/page-a': (typeof _PageARoute)['_outputType'];
    '/page-b': (typeof _PageBRoute)['_outputType'];
    '/page-c': (typeof _PageCRoute)['_outputType'];
  }
}

The ImpressionArea component detects when its child component becomes visible on the screen and triggers callbacks. This is useful for logging impressions, triggering animations, or managing resource usage when a component enters or leaves the viewport.

Important Requirements:

• By default, ImpressionArea must be used inside an IOScrollView to function correctly.
• If you use it outside of IOScrollView, you must set the UNSAFE__impressFallbackOnMount prop to true to detect visibility based on the component's mount time. Failing to do this while outside an IOScrollView will result in an IOProviderMissingError.

import { ImpressionArea, IOScrollView } from '@granite-js/react-native';

<IOScrollView>
  <ImpressionArea
    onImpressionStart={() => console.log('Visible!')}
    onImpressionEnd={() => console.log('Hidden!')}
  >
    <MyComponent />
  </ImpressionArea>
</IOScrollView>