ScreenContainer - AMiSi Mobile Starter

ScreenContainer wraps an animated scroll view around Container. It can also add keyboard avoidance and pull-to-refresh.

Usage

import { useState } from 'react';

import { ScreenContainer, Text } from '@amisi-mobile-starter/ui';

export const FeedScreen = () => {
  const [isRefreshing, setIsRefreshing] = useState(false);

  const refresh = async () => {
    setIsRefreshing(true);
    await Promise.resolve();
    setIsRefreshing(false);
  };

  return (
    <ScreenContainer
      isRefreshEnabled
      isRefreshing={isRefreshing}
      onRefresh={refresh}
      contentContainerClassName="pb-8"
    >
      <Text variant="heading">Feed</Text>
    </ScreenContainer>
  );
};

Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Scrollable screen content.
`className`	`string`	`undefined`	Utility classes passed to the inner `Container`.
`contentContainerClassName`	`string`	`undefined`	Utility classes for the scroll view content container.
`isKeyboardAware`	`boolean`	`false`	Wraps the scroll view in `KeyboardAvoidingView`.
`keyboardVerticalOffset`	`number`	`0`	Keyboard avoidance offset.
`isRefreshEnabled`	`boolean`	`false`	Enables refresh only when `onRefresh` also exists.
`isRefreshing`	`boolean`	`false`	Controlled refresh indicator state.
`onRefresh`	`() => void \| Promise<void>`	`undefined`	Runs from pull-to-refresh.
`refreshTintColor`	`string`	Current primary color	Refresh indicator color.
`keyboardShouldPersistTaps`	`ScrollViewProps['keyboardShouldPersistTaps']`	`'handled'`	Keyboard tap behavior.
`showsVerticalScrollIndicator`	`boolean`	`false`	Shows the vertical scrollbar.

It accepts ScrollViewProps except contentContainerStyle and refreshControl.