Modal - Uniwind

Overview

The Modal component presents content above the rest of your app. Uniwind provides className prop support for styling this component.

Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").For non-style props (like color): Use the accent- prefix (e.g., colorClassName="accent-blue-500").

Since 1.6.2: Passing a className without the accent- prefix to a color prop will log a warning to the development console.

Uniwind Bindings

className

string

Maps to the style prop. Use any Tailwind utility classes.

backdropColorClassName

string

Maps to the backdropColor prop. Requires accent- prefix for color values.

Usage Example

import { Modal, View, Text, Button } from 'react-native'

<Modal
  visible={isVisible}
  transparent
  animationType="slide"
  backdropColorClassName="accent-black/50"
>
  <View className="flex-1 justify-center items-center">
    <View className="bg-white rounded-lg p-6 w-4/5">
      <Text className="text-xl font-bold mb-4">Modal Title</Text>
      <Button title="Close" onPress={() => setIsVisible(false)} />
    </View>
  </View>
</Modal>

KeyboardAvoidingView Pressable

⌘I

​Overview

​Styling Convention

​Uniwind Bindings

​Usage Example

Overview

Styling Convention

Uniwind Bindings

Usage Example