> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# ScreenContainer

> Compose scrollable screens with keyboard and refresh behavior

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`ScreenContainer` wraps an animated scroll view around [`Container`](/ui/components/container). It can also add keyboard avoidance and pull-to-refresh.

<LocalUiPlayground component="screen-container" title="Interactive ScreenContainer example" />

## Usage

```tsx theme={null}
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`.