Basic Components

/**
 * Scrollable container component with theme integration
 * @param props - ScrollView component props
 * @returns JSX element representing a scrollable container
 */
function ScrollView(props: IScrollViewProps): JSX.Element;

interface IScrollViewProps extends ScrollViewProps, StyledProps {
  children?: React.ReactNode;
  _contentContainerStyle?: Partial<IScrollViewProps>;
}

import { ScrollView, Box, Text } from "native-base";

// Basic scrollable content
<ScrollView>
  <Box p={4}>
    <Text>Scrollable content goes here...</Text>
    {/* More content */}
  </Box>
</ScrollView>

// ScrollView with styled system props
<ScrollView 
  bg="gray.50" 
  p={4}
  _contentContainerStyle={{ flexGrow: 1 }}
>
  <Text>Content with custom styling</Text>
</ScrollView>

// Horizontal scroll
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
  <Box flexDirection="row">
    <Box w={200} h={100} bg="blue.500" mr={4} />
    <Box w={200} h={100} bg="green.500" mr={4} />
    <Box w={200} h={100} bg="red.500" />
  </Box>
</ScrollView>

/**
 * Performant list component with theme integration
 * @param props - FlatList component props
 * @returns JSX element representing a performant list
 */
function FlatList<ItemT>(props: IFlatListProps<ItemT>): JSX.Element;

interface IFlatListProps<ItemT> extends FlatListProps<ItemT>, StyledProps {
  _contentContainerStyle?: Partial<IFlatListProps<ItemT>>;
  ref?: MutableRefObject<any>;
}

import { FlatList, Box, Text } from "native-base";

const data = [
  { id: '1', title: 'First Item' },
  { id: '2', title: 'Second Item' },
  { id: '3', title: 'Third Item' },
];

// Basic FlatList
<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <Box p={4} borderBottomWidth={1} borderColor="gray.200">
      <Text>{item.title}</Text>
    </Box>
  )}
/>

// FlatList with styling and custom content container
<FlatList
  data={data}
  bg="white"
  _contentContainerStyle={{ p: 4 }}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <Box bg="gray.100" p={4} mb={2} rounded="md">
      <Text fontWeight="bold">{item.title}</Text>
    </Box>
  )}
/>

/**
 * Sectioned list component with theme integration
 * @param props - SectionList component props
 * @returns JSX element representing a sectioned list
 */
function SectionList<ItemT, SectionT>(props: ISectionListProps<ItemT, SectionT>): JSX.Element;

interface ISectionListProps<ItemT, SectionT> extends SectionListProps<ItemT, SectionT>, StyledProps {
  _contentContainerStyle?: Partial<ISectionListProps<ItemT, SectionT>>;
}

import { SectionList, Box, Text, Heading } from "native-base";

const sections = [
  {
    title: 'Fruits',
    data: ['Apple', 'Banana', 'Orange'],
  },
  {
    title: 'Vegetables',
    data: ['Carrot', 'Broccoli', 'Spinach'],
  },
];

<SectionList
  sections={sections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => (
    <Box p={3} borderBottomWidth={1} borderColor="gray.200">
      <Text>{item}</Text>
    </Box>
  )}
  renderSectionHeader={({ section: { title } }) => (
    <Box bg="gray.100" p={2}>
      <Heading size="sm">{title}</Heading>
    </Box>
  )}
/>

/**
 * View that avoids the keyboard with theme integration
 * @param props - KeyboardAvoidingView component props
 * @returns JSX element that adjusts for keyboard
 */
function KeyboardAvoidingView(props: IKeyboardAvoidingViewProps): JSX.Element;

interface IKeyboardAvoidingViewProps extends KeyboardAvoidingViewProps, StyledProps {
  children?: React.ReactNode;
}

import { KeyboardAvoidingView, Box, Input, Button } from "native-base";
import { Platform } from "react-native";

<KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  flex={1}
>
  <Box flex={1} p={4} justifyContent="flex-end">
    <Input placeholder="Enter your message" mb={4} />
    <Button>Send</Button>
  </Box>
</KeyboardAvoidingView>

/**
 * Status bar component with theme integration
 * @param props - StatusBar component props
 * @returns JSX element representing the status bar
 */
function StatusBar(props: IStatusBarProps): JSX.Element;

interface IStatusBarProps extends StatusBarProps, StyledProps {
  // Inherits all StatusBar props from React Native
}

import { StatusBar, Box } from "native-base";

// Basic status bar
<Box flex={1}>
  <StatusBar barStyle="dark-content" backgroundColor="white" />
  {/* App content */}
</Box>

// Status bar with color mode integration
<Box flex={1}>
  <StatusBar 
    barStyle="light-content" 
    backgroundColor="primary.600"
    translucent={false}
  />
  {/* App content */}
</Box>

/**
 * Basic view component with theme integration
 * @param props - View component props
 * @returns JSX element representing a basic view
 */
function View(props: IViewProps): JSX.Element;

interface IViewProps extends ViewProps, StyledProps {
  children?: React.ReactNode;
}

import { View, Text } from "native-base";

// Basic view with styled system
<View bg="blue.500" p={4} rounded="md">
  <Text color="white">Content in styled view</Text>
</View>

// View with accessibility
<View
  accessible
  accessibilityLabel="Custom container"
  bg="gray.100"
  p={4}
>
  <Text>Accessible content</Text>
</View>

// React Native base component props
interface ScrollViewProps {
  horizontal?: boolean;
  showsHorizontalScrollIndicator?: boolean;
  showsVerticalScrollIndicator?: boolean;
  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
  scrollEnabled?: boolean;
  // ... additional React Native ScrollView props
}

interface FlatListProps<ItemT> {
  data: ReadonlyArray<ItemT>;
  renderItem: (info: { item: ItemT; index: number }) => React.ReactElement;
  keyExtractor?: (item: ItemT, index: number) => string;
  horizontal?: boolean;
  numColumns?: number;
  // ... additional React Native FlatList props
}

interface SectionListProps<ItemT, SectionT> {
  sections: ReadonlyArray<SectionListData<ItemT, SectionT>>;
  renderItem: (info: { item: ItemT; index: number; section: SectionT }) => React.ReactElement;
  renderSectionHeader?: (info: { section: SectionT }) => React.ReactElement;
  keyExtractor?: (item: ItemT, index: number) => string;
  // ... additional React Native SectionList props
}

interface KeyboardAvoidingViewProps extends ViewProps {
  behavior?: 'height' | 'position' | 'padding';
  keyboardVerticalOffset?: number;
}

interface ViewProps {
  style?: ViewStyle;
  accessible?: boolean;
  accessibilityLabel?: string;
  testID?: string;
  // ... additional React Native View props
}

interface StatusBarProps {
  barStyle?: 'default' | 'light-content' | 'dark-content';
  backgroundColor?: string;
  translucent?: boolean;
  hidden?: boolean;
}