### Installing react-native-multiple-modals with NPM or Yarn

Source: https://github.com/paufau/react-native-multiple-modals/blob/main/README.md

Install the library using NPM or Yarn as a dependency in your React Native project. This adds the package to your node_modules and updates package.json. Requires Node.js and a React Native setup; no additional outputs beyond successful installation.

```bash
npm i react-native-multiple-modals

yarn add react-native-multiple-modals
```

--------------------------------

### iOS Pod Installation for react-native-multiple-modals

Source: https://github.com/paufau/react-native-multiple-modals/blob/main/README.md

Run CocoaPods to install iOS dependencies after adding the library via NPM/Yarn. This links native modules for iOS; run in the project root with an ios directory. Outputs installed pods; limited to iOS projects using CocoaPods.

```bash
pod install --project-directory=ios
```

--------------------------------

### Implement Web-Compatible Modals with React Native

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

Demonstrates using ModalView component for web-compatible modal implementation. Features portal-based rendering for proper stacking on web platforms. Includes nested modal example with fade and slide animations. Requires react-native-multiple-modals library and React Native core components.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet, Platform } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';

const WebModalExample = () => {
  const [firstModal, setFirstModal] = useState(false);
  const [secondModal, setSecondModal] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.platform}>
        Platform: {Platform.OS} {Platform.OS === 'web' ? '(Web Support Enabled)' : ''}
      </Text>
      <Button title="Open First Modal" onPress={() => setFirstModal(true)} />

      {/* First modal - works identically on web and native */}
      {firstModal && (
        <ModalView
          modalId="first-modal-web" // Optional: explicit ID for web
          animationType="fade"
          backdropColor="rgba(0, 0, 0, 0.5)"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setFirstModal(false)}
        >
          <View style={styles.box}>
            <Text style={styles.title}>First Modal</Text>
            <Text>This works on web and native platforms</Text>
            <Button
              title="Open Second Modal"
              onPress={() => setSecondModal(true)}
            />
            <Button title="Close" onPress={() => setFirstModal(false)} />
          </View>
        </ModalView>
      )}

      {/* Second modal - stacks on top on web using portal */}
      {secondModal && (
        <ModalView
          modalId="second-modal-web"
          animationType="slide"
          backdropColor="rgba(255, 0, 0, 0.3)"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setSecondModal(false)}
        >
          <View style={[styles.box, styles.secondBox]}>
            <Text style={styles.title}>Second Modal</Text>
            <Text>Stacked on top using React portals on web</Text>
            <Text style={styles.note}>
              Note: Only the topmost modal's backdrop is visible on web
            </Text>
            <Button title="Close" onPress={() => setSecondModal(false)} />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 10,
    padding: 20,
  },
  platform: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 10,
    minWidth: 300,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  secondBox: {
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  note: {
    fontSize: 12,
    color: '#666',
    fontStyle: 'italic',
    marginTop: 5,
  },
});

export default WebModalExample;
```

--------------------------------

### Implement Multiple Modals with ModalView Component

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

Demonstrates the usage of the ModalView component to display multiple, layered modal windows. It shows how to manage modal visibility, handle dismissal events, and customize modal appearance including animations and backdrop colors. This example requires React Native and the react-native-multiple-modals library.

```tsx
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { ModalView, DismissalSource } from 'react-native-multiple-modals';

const App = () => {
  const [firstModalVisible, setFirstModalVisible] = useState(false);
  const [secondModalVisible, setSecondModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button
        title="Open First Modal"
        onPress={() => setFirstModalVisible(true)}
      />

      {firstModalVisible && (
        <ModalView
          animationType="fade"
          statusBar={{
            translucent: true,
            barStyle: 'dark-content',
            backgroundColor: 'transparent'
          }}
          backdropColor="rgba(0, 0, 0, 0.5)"
          contentContainerStyle={styles.modalContent}
          onRequestDismiss={(calledBy) => {
            console.log(`First modal dismissed by: ${calledBy}`);
            setFirstModalVisible(false);
          }}
        >
          <View style={styles.modalBox}>
            <Text style={styles.title}>First Modal</Text>
            <Button
              title="Open Second Modal"
              onPress={() => setSecondModalVisible(true)}
            />
            <Button
              title="Close"
              onPress={() => setFirstModalVisible(false)}
            />
          </View>
        </ModalView>
      )}

      {secondModalVisible && (
        <ModalView
          animationType="slide"
          backdropColor="rgba(255, 0, 0, 0.3)"
          contentContainerStyle={styles.modalContent}
          onRequestDismiss={(calledBy) => {
            if (calledBy === DismissalSource.BackButton) {
              console.log('User pressed back button');
            }
            setSecondModalVisible(false);
          }}
        >
          <View style={[styles.modalBox, styles.secondModal]}>
            <Text style={styles.title}>Second Modal (on top)</Text>
            <Button
              title="Close"
              onPress={() => setSecondModalVisible(false)}
            />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    minWidth: 300,
    gap: 10,
  },
  secondModal: {
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

export default App;

```

--------------------------------

### Creating Non-Dismissible Modals in React Native

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

This example shows how to create non-dismissible modals in React Native by omitting the `onRequestDismiss` callback. The NonDismissibleExample component demonstrates two use cases: a loading modal and a critical action modal, both of which prevent user dismissal.

```tsx
import React, { useState, useEffect } from 'react';
import { View, Button, Text, ActivityIndicator, StyleSheet } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';

const NonDismissibleExample = () => {
  const [loadingModal, setLoadingModal] = useState(false);
  const [criticalModal, setCriticalModal] = useState(false);

  useEffect(() => {
    if (loadingModal) {
      // Simulate loading operation
      const timer = setTimeout(() => {
        setLoadingModal(false);
        alert('Operation completed!');
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [loadingModal]);

  return (
    <View style={styles.container}>
      <Button
        title="Show Loading Modal (Auto-dismiss)"
        onPress={() => setLoadingModal(true)}
      />
      <Button
        title="Show Critical Action Modal"
        onPress={() => setCriticalModal(true)}
      />

      {/* Loading modal - no onRequestDismiss, cannot be dismissed by user */}
      {loadingModal && (
        <ModalView
          animationType="fade"
          backdropColor="rgba(0, 0, 0, 0.7)"
          contentContainerStyle={styles.centered}
          // No onRequestDismiss - backdrop and back button do nothing
        >
          <View style={styles.loadingBox}>
            <ActivityIndicator size="large" color="#007AFF" />
            <Text style={styles.loadingText}>Processing...</Text>
            <Text style={styles.subText}>Please wait</Text>
          </View>
        </ModalView>
      )}

      {/* Critical action modal - user must choose an option */}
      {criticalModal && (
        <ModalView
          animationType="fade"
          backdropColor="rgba(0, 0, 0, 0.8)"
          contentContainerStyle={styles.centered}
          // No onRequestDismiss - forces user to choose an option
        >
          <View style={styles.box}>
            <Text style={styles.title}>Critical Action</Text>
            <Text>This action cannot be cancelled.</Text>
            <Text>Please confirm or decline.</Text>
            <View style={styles.buttonRow}>
              <Button
                title="Confirm"
                onPress={() => {
                  setCriticalModal(false);
                  alert('Action confirmed');
                }}
              />
              <Button
                title="Decline"
                color="red"
                onPress={() => {
                  setCriticalModal(false);
                  alert('Action declined');
                }}
              />
            </View>
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 10,
    padding: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 15,
    minWidth: 280,
  },
  loadingBox: {
    backgroundColor: 'white',
    padding: 40,
    borderRadius: 10,
    alignItems: 'center',
    gap: 15,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  loadingText: {
    fontSize: 16,
    fontWeight: '600',
  },
  subText: {
    fontSize: 14,
    color: '#666',
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    gap: 10,
    marginTop: 10,
  },
});

export default NonDismissibleExample;
```

--------------------------------

### Implementing Modal Animations with animationType Prop

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

This example shows how to use the animationType prop on ModalView to create fade, slide, and none animations for modals. It relies on React state to toggle modal visibility and requires the react-native-multiple-modals library. Inputs are button presses to show modals; outputs are animated modal displays with close buttons. Limitations include basic animations only; custom animations may need additional styling.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';

const AnimationExample = () => {
  const [fadeModal, setFadeModal] = useState(false);
  const [slideModal, setSlideModal] = useState(false);
  const [noneModal, setNoneModal] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Fade Animation" onPress={() => setFadeModal(true)} />
      <Button title="Slide Animation" onPress={() => setSlideModal(true)} />
      <Button title="No Animation" onPress={() => setNoneModal(true)} />

      {/* Fade animation - modal fades in/out */}
      {fadeModal && (
        <ModalView
          animationType="fade"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setFadeModal(false)}
        >
          <View style={styles.box}>
            <Text>Fade Animation</Text>
            <Button title="Close" onPress={() => setFadeModal(false)} />
          </View>
        </ModalView>
      )}

      {/* Slide animation - modal slides from bottom */}
      {slideModal && (
        <ModalView
          animationType="slide"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setSlideModal(false)}
        >
          <View style={styles.box}>
            <Text>Slide Animation</Text>
            <Button title="Close" onPress={() => setSlideModal(false)} />
          </View>
        </ModalView>
      )}

      {/* No animation - modal appears instantly */}
      {noneModal && (
        <ModalView
          animationType="none"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setNoneModal(false)}
        >
          <View style={styles.box}>
            <Text>No Animation</Text>
            <Button title="Close" onPress={() => setNoneModal(false)} />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 10,
    padding: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 10,
  },
});

export default AnimationExample;
```

--------------------------------

### CMake Library Build (C++)

Source: https://github.com/paufau/react-native-multiple-modals/blob/main/android/src/main/jni/CMakeLists.txt

This CMake script defines a shared library target for multiple modals. It handles custom source files, generated code, includes, and linking dependencies, with version-specific configurations for React Android.

```cmake
cmake_minimum_required(VERSION 3.13)
set(CMAKE_VERBOSE_MAKEFILE on)

set(LIB_LITERAL multiplemodals)
set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})

set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../common/cpp)
set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})

add_compile_options(
        -fexceptions
        -frtti
        -std=c++20
        -Wall
        -Wpedantic
        -Wno-gnu-zero-variadic-macro-arguments
)

file(
  GLOB 
  LIB_CUSTOM_SRCS 
  CONFIGURE_DEPENDS 
  *.cpp 
  ${LIB_COMMON_DIR}/react/renderer/components/${LIB_LITERAL}/*.cpp
  ${LIB_COMMON_DIR}/react/renderer/components/${LIB_LITERAL}/platform/android/*.cpp
)

file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)

add_library(
  ${LIB_TARGET_NAME}
  SHARED
  ${LIB_CUSTOM_SRCS}
  ${LIB_CODEGEN_SRCS}
)

target_include_directories(
  ${LIB_TARGET_NAME}
  PUBLIC
  .
  ${LIB_COMMON_DIR}
  ${LIB_ANDROID_GENERATED_JNI_DIR}
  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
)

if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 76)
  target_link_libraries(
    ${LIB_TARGET_NAME}
    ReactAndroid::reactnative
    ReactAndroid::jsi
    fbjni::fbjni
  )
else()
  target_link_libraries(
    ${LIB_TARGET_NAME}
    fbjni
    folly_runtime
    glog
    jsi
    react_codegen_rncore
    react_debug
    react_nativemodule_core
    react_render_core
    react_render_debug
    react_render_graphics
    react_render_mapbuffer
    react_render_componentregistry
    react_utils
    rrc_view
    turbomodulejsijni
    yoga
  )
endif()

if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 81)
  target_compile_reactnative_options(${LIB_TARGET_NAME} PRIVATE)
else()
  target_compile_options(
    ${LIB_TARGET_NAME}
    PRIVATE
    -DLOG_TAG="ReactNative"
    -fexceptions
    -frtti
    -std=c++20
    -Wall
  )
endif()

target_include_directories(
 ${CMAKE_PROJECT_NAME}
 PUBLIC
 ${CMAKE_CURRENT_SOURCE_DIR}
)
```

--------------------------------

### Custom Backdrop Rendering with React Native Multiple Modals

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

This snippet shows how to implement custom backdrops for modals using the `renderBackdrop` prop from `react-native-multiple-modals`. It demonstrates using `BlurView` for a blurred effect and a custom `View` for a gradient overlay. Requires `react-native-multiple-modals` and `@react-native-community/blur`.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';
import { BlurView } from '@react-native-community/blur';

const CustomBackdropExample = () => {
  const [blurModalVisible, setBlurModalVisible] = useState(false);
  const [gradientModalVisible, setGradientModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Blur Backdrop" onPress={() => setBlurModalVisible(true)} />
      <Button title="Custom Backdrop" onPress={() => setGradientModalVisible(true)} />

      {/* Modal with blur backdrop */}
      {blurModalVisible && (
        <ModalView
          renderBackdrop={() => (
            <BlurView
              style={StyleSheet.absoluteFill}
              blurType="dark"
              blurAmount={10}
            />
          )}
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setBlurModalVisible(false)}
        >
          <View style={styles.box}>
            <Text style={styles.title}>Blur Backdrop Modal</Text>
            <Button title="Close" onPress={() => setBlurModalVisible(false)} />
          </View>
        </ModalView>
      )}

      {/* Modal with custom gradient backdrop */}
      {gradientModalVisible && (
        <ModalView
          renderBackdrop={() => (
            <View style={styles.customBackdrop}>
              {/* You can add any custom component here */}
              <View style={styles.gradientOverlay} />
            </View>
          )}
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setGradientModalVisible(false)}
        >
          <View style={styles.box}>
            <Text style={styles.title}>Custom Backdrop</Text>
            <Button title="Close" onPress={() => setGradientModalVisible(false)} />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 10,
    padding: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 10,
    minWidth: 250,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  customBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(100, 50, 150, 0.4)',
  },
  gradientOverlay: {
    flex: 1,
    backgroundColor: 'transparent',
  },
});

export default CustomBackdropExample;

```

--------------------------------

### Create Custom Backdrop Pressable Component in React Native (TSX)

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

Defines a haptic pressable component and an untouchable backdrop, then uses them with ModalView to showcase custom backdrop behavior. Requires react-native-gesture-handler for advanced pressables and react-native-multiple-modals for modal handling. The components manage modal state via React useState and demonstrate both interactive and non-interactive backdrops.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet, Pressable } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';

// Custom pressable component with haptic feedback
const HapticPressable = ({ onPress, children, ...props }) => {
  const handlePress = () => {
    // Add haptic feedback or custom behavior
    console.log('Backdrop pressed with custom behavior');
    onPress?.();
  };

  return (
    <Pressable
      {...props}
      onPress={handlePress}
      android_ripple={{ color: 'rgba(255, 255, 255, 0.1)' }}
    >
      {children}
    </Pressable>
  );
};

// Untouchable backdrop component
const UntouchableBackdrop = ({ children, ...props }) => {
  return (
    <View {...props} pointerEvents="none">
      {children}
    </View>
  );
};

const CustomBackdropComponentExample = () => {
  const [hapticModal, setHapticModal] = useState(false);
  const [untouchableModal, setUntouchableModal] = useState(false);

  return (
    <View style={styles.container}>
      <Button
        title="Modal with Custom Pressable"
        onPress={() => setHapticModal(true)}
      />
      <Button
        title="Modal with Untouchable Backdrop"
        onPress={() => setUntouchableModal(true)}
      />

      {/* Modal with custom pressable component */}
      {hapticModal && (
        <ModalView
          BackdropPressableComponent={HapticPressable}
          animationType="fade"
          backdropColor="rgba(0, 100, 200, 0.5)"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setHapticModal(false)}
        >
          <View style={styles.box}>
            <Text style={styles.title}>Custom Pressable</Text>
            <Text>Tap backdrop for custom behavior</Text>
            <Button title="Close" onPress={() => setHapticModal(false)} />
          </View>
        </ModalView>
      )}

      {/* Modal with untouchable backdrop */}
      {untouchableModal && (
        <ModalView
          BackdropPressableComponent={UntouchableBackdrop}
          animationType="fade"
          backdropColor="rgba(0, 0, 0, 0.3)"
          contentContainerStyle={styles.centered}
          // onRequestDismiss won't be called by backdrop
          onRequestDismiss={() => setUntouchableModal(false)}
        >
          <View style={styles.box}>
            <Text style={styles.title}>Untouchable Backdrop</Text>
            <Text>Backdrop cannot be pressed</Text>
            <Text style={styles.note}>Only this button closes the modal</Text>
            <Button title="Close" onPress={() => setUntouchableModal(false)} />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 10,
    padding: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 10,
    minWidth: 250,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  note: {
    fontSize: 12,
    color: '#666',
    fontStyle: 'italic',
  },
});

export default CustomBackdropComponentExample;

```

--------------------------------

### Create Bottom Sheet in React Native

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

This code snippet demonstrates how to create both standard and scrollable bottom sheet modals using React Native and react-native-multiple-modals.  It uses useState to manage modal visibility and contentContainerStyle for positioning.  The scrollable version includes a ScrollView to handle larger content.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet, ScrollView } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';

const BottomSheetExample = () => {
  const [sheetVisible, setSheetVisible] = useState(false);
  const [fullHeightSheet, setFullHeightSheet] = useState(false);

  return (
    <View style={styles.container}>
      <Button\n        title="Open Bottom Sheet"\n        onPress={() => setSheetVisible(true)}
      />
      <Button\n        title="Open Full Height Sheet"\n        onPress={() => setFullHeightSheet(true)}
      />

      {/* Standard bottom sheet */}
      {sheetVisible && (
        <ModalView\n          animationType="slide"\n          backdropColor="rgba(0, 0, 0, 0.5)"\n          contentContainerStyle={styles.bottomSheetContainer}\n          onRequestDismiss={() => setSheetVisible(false)}
        >\n          <View style={styles.bottomSheet}>
            <View style={styles.handle} />\n            <Text style={styles.sheetTitle}>Bottom Sheet</Text>\n            <Text style={styles.sheetText}>
              This is a bottom sheet modal that slides up from the bottom\n            </Text>\n            <View style={styles.sheetButtons}>
              <Button title="Option 1" onPress={() => alert('Option 1')} />\n              <Button title="Option 2" onPress={() => alert('Option 2')} />\n              <Button title="Close" onPress={() => setSheetVisible(false)} />\n            </View>\n          </View>\n        </ModalView>
      )}

      {/* Full height scrollable bottom sheet */}
      {fullHeightSheet && (
        <ModalView\n          animationType="slide"\n          backdropColor="rgba(0, 0, 0, 0.6)"\n          contentContainerStyle={styles.bottomSheetContainer}\n          onRequestDismiss={() => setFullHeightSheet(false)}
        >\n          <View style={styles.fullHeightSheet}>
            <View style={styles.handle} />\n            <Text style={styles.sheetTitle}>Scrollable Bottom Sheet</Text>\n            <ScrollView style={styles.scrollContent}>
              {Array.from({ length: 20 }, (_, i) => (
                <View key={i} style={styles.listItem}>
                  <Text>List Item {i + 1}</Text>\n                </View>
              ))}
            </ScrollView>\n            <View style={styles.footer}>
              <Button\n                title="Close"\n                onPress={() => setFullHeightSheet(false)}
              />\n            </View>\n          </View>\n        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,\n    justifyContent: 'center',\n    gap: 10,\n    padding: 20,\n  },\n  bottomSheetContainer: {
    justifyContent: 'flex-end',\n  },\n  bottomSheet: {
    backgroundColor: 'white',\n    borderTopLeftRadius: 20,\n    borderTopRightRadius: 20,\n    padding: 20,\n    paddingBottom: 40,\n    minHeight: 250,\n  },\n  fullHeightSheet: {
    backgroundColor: 'white',\n    borderTopLeftRadius: 20,\n    borderTopRightRadius: 20,\n    height: '80%',\n    padding: 20,\n  },\n  handle: {
    width: 40,\n    height: 4,\n    backgroundColor: '#ccc',\n    borderRadius: 2,\n    alignSelf: 'center',\n    marginBottom: 20,\n  },\n  sheetTitle: {
    fontSize: 20,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  sheetText: {
    fontSize: 16,\n    color: '#666',\n    marginBottom: 20,\n  },\n  sheetButtons: {
    gap: 10,\n  },\n  scrollContent: {
    flex: 1,\n    marginVertical: 10,\n  },\n  listItem: {
    padding: 15,\n    borderBottomWidth: 1,\n    borderBottomColor: '#eee',\n  },\n  footer: {
    paddingTop: 10,\n    borderTopWidth: 1,\n    borderTopColor: '#eee',\n  },\n});

export default BottomSheetExample;
```

--------------------------------

### Using ModalView Component in React Native TSX

Source: https://github.com/paufau/react-native-multiple-modals/blob/main/README.md

Demonstrates rendering a modal with visibility state, animation, backdrop, and status bar props. Depends on React Native and useState hook; inputs include props like animationType and onRequestDismiss, outputs a dismissible modal view. Limitations: custom backdrop requires renderBackdrop; iOS-specific status bar handling.

```tsx
import { ModalView } from 'react-native-multiple-modals';

const YourComponent = () => {
  const [isVisible, setVisibility] = useState(false);

  return (
    <View>
      <Button text='Open modal' onPress={() => setVisibility(true)} />
      {isVisible && (
        <ModalView
          animationType='fade'
          statusBar={{ translucent: true, barStyle: 'dark-content' }}
          backdropColor='rgba(0,0,0,0.5)'
          contentContainerStyle={{
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onRequestDismiss={() => setVisibility(false)}
        >
          <YourContentView />
        </ModalView>
      )}
    </View>
  );
};
```

--------------------------------

### Modal Above Tab Bar with React Navigation (TypeScript)

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

This code snippet demonstrates how to integrate react-native-multiple-modals with React Navigation's bottom tab navigator. It shows a modal being displayed on top of the tab bar, allowing for overlaying UI elements without obscuring the main navigation. The ModalView component from react-native-multiple-modals is used, configured to render above the tab bar.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ModalView } from 'react-native-multiple-modals';

const Tab = createBottomTabNavigator();

// Screen component with modal
const HomeScreen = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.screen}>
      <Text style={styles.screenTitle}>Home Screen</Text>
      <Button
        title="Open Modal (Above Tab Bar)"
        onPress={() => setModalVisible(true)}
      />

      {modalVisible && (
        <ModalView
          animationType="fade"
          backdropColor="rgba(0, 0, 0, 0.6)"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setModalVisible(false)}
        >
          <View style={styles.modalBox}>
            <Text style={styles.modalTitle}>Modal Above Navigation</Text>
            <Text>This modal displays above the tab bar</Text>
            <Text style={styles.note}>
              The tab bar remains visible underneath
            </Text>
            <Button title="Close" onPress={() => setModalVisible(false)} />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const SettingsScreen = () => {
  return (
    <View style={styles.screen}>
      <Text style={styles.screenTitle}>Settings Screen</Text>
    </View>
  );
};

const NavigationExample = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  screenTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 10,
    minWidth: 280,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  note: {
    fontSize: 12,
    color: '#666',
    fontStyle: 'italic',
    marginVertical: 5,
  },
});

export default NavigationExample;

```

--------------------------------

### React Native: Configure Status Bar in Modals

Source: https://context7.com/paufau/react-native-multiple-modals/llms.txt

This snippet shows how to customize the status bar within React Native modals. It allows setting the bar style (light or dark content), background color, and translucency of the status bar for each modal, enhancing the visual presentation and user experience, particularly on iOS and Android.

```tsx
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet, Platform } from 'react-native';
import { ModalView } from 'react-native-multiple-modals';

const StatusBarExample = () => {
  const [lightModal, setLightModal] = useState(false);
  const [darkModal, setDarkModal] = useState(false);
  const [translucentModal, setTranslucentModal] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Light Status Bar" onPress={() => setLightModal(true)} />
      <Button title="Dark Status Bar" onPress={() => setDarkModal(true)} />
      <Button title="Translucent Status Bar" onPress={() => setTranslucentModal(true)} />

      {/* Modal with light content status bar */}
      {lightModal && (
        <ModalView
          statusBar={{
            barStyle: 'light-content',
            backgroundColor: '#333333',
            translucent: false,
          }}
          backdropColor="rgba(0, 0, 0, 0.8)"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setLightModal(false)}
        >
          <View style={[styles.box, styles.darkBox]}>
            <Text style={styles.lightText}>Light Status Bar</Text>
            <Text style={styles.lightText}>Status bar icons are white</Text>
            <Button title="Close" onPress={() => setLightModal(false)} />
          </View>
        </ModalView>
      )}

      {/* Modal with dark content status bar */}
      {darkModal && (
        <ModalView
          statusBar={{
            barStyle: 'dark-content',
            backgroundColor: '#ffffff',
            translucent: false,
          }}
          backdropColor="rgba(255, 255, 255, 0.9)"
          contentContainerStyle={styles.centered}
          onRequestDismiss={() => setDarkModal(false)}
        >
          <View style={styles.box}>
            <Text style={styles.title}>Dark Status Bar</Text>
            <Text>Status bar icons are dark</Text>
            <Button title="Close" onPress={() => setDarkModal(false)} />
          </View>
        </ModalView>
      )}

      {/* Modal with translucent status bar (Android) */}
      {translucentModal && (
        <ModalView
          statusBar={{
            translucent: true,
            barStyle: 'light-content',
          }}
          backdropColor="rgba(0, 0, 0, 0.7)"
          contentContainerStyle={styles.topAligned}
          onRequestDismiss={() => setTranslucentModal(false)}
        >
          <View style={styles.fullScreenBox}>
            <Text style={styles.lightText}>Translucent Status Bar</Text>
            <Text style={styles.lightText}>Content extends under status bar</Text>
            <Button title="Close" onPress={() => setTranslucentModal(false)} />
          </View>
        </ModalView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 10,
    padding: 20,
  },
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  topAligned: {
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    padding: 30,
    borderRadius: 10,
    gap: 10,
    minWidth: 250,
  },
  darkBox: {
    backgroundColor: '#333333',
  },
  fullScreenBox: {
    backgroundColor: 'rgba(0, 0, 0, 0.9)',
    padding: 30,
    width: '100%',
    paddingTop: Platform.OS === 'android' ? 50 : 30,
    gap: 10,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  lightText: {
    color: 'white',
    fontSize: 16,
  },
});

export default StatusBarExample;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.