tessl/npm-react-native-elements

React Native Elements is a comprehensive cross-platform UI toolkit providing highly customizable and accessible components for React Native applications.

—

Pending

Overview

Eval results

Files

Feedback Components

Name: tessl/npm-react-native-elements
Author: tessl

User feedback mechanisms including tooltips, overlays, dialogs, and bottom sheets for enhanced user experience and interaction feedback.

Capabilities

Overlay

Modal overlay component for creating dialogs, popups, and modal interfaces with backdrop handling and customizable presentation styles.

/**
 * Modal overlay for dialogs and popups
 */
interface OverlayProps {
  /** Overlay visibility state */
  isVisible: boolean;
  /** Children components to display in overlay */
  children: React.ReactNode;
  /** Backdrop press handler */
  onBackdropPress?(): void;
  /** Backdrop styles */
  backdropStyle?: StyleProp<ViewStyle>;
  /** Overlay styles */
  overlayStyle?: StyleProp<ViewStyle>;
  /** Fullscreen overlay */
  fullScreen?: boolean;
  /** Animation type */
  animationType?: 'slide' | 'fade' | 'none';
  /** Support orientation changes */
  supportedOrientations?: ('portrait' | 'landscape')[];
  /** Window level (iOS) */
  windowLevel?: number;
}

Usage Examples:

import React, { useState } from 'react';
import { Overlay, Button, Text } from 'react-native-elements';

// Basic overlay
const [visible, setVisible] = useState(false);

<View>
  <Button title="Show Overlay" onPress={() => setVisible(true)} />
  
  <Overlay 
    isVisible={visible} 
    onBackdropPress={() => setVisible(false)}
  >
    <View style={{ padding: 20 }}>
      <Text h4>Overlay Content</Text>
      <Text>This is content inside the overlay.</Text>
      <Button 
        title="Close" 
        onPress={() => setVisible(false)} 
        buttonStyle={{ marginTop: 10 }}
      />
    </View>
  </Overlay>
</View>

// Custom styled overlay
<Overlay
  isVisible={modalVisible}
  onBackdropPress={closeModal}
  backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
  overlayStyle={{
    backgroundColor: '#fff',
    borderRadius: 15,
    padding: 25,
    width: '80%',
    maxHeight: '60%',
  }}
  animationType="fade"
>
  <Text h3 style={{ textAlign: 'center', marginBottom: 20 }}>
    Confirmation
  </Text>
  <Text style={{ textAlign: 'center', marginBottom: 30 }}>
    Are you sure you want to delete this item?
  </Text>
  <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
    <Button
      title="Cancel"
      type="outline"
      onPress={closeModal}
      buttonStyle={{ width: 100 }}
    />
    <Button
      title="Delete"
      buttonStyle={{ backgroundColor: '#f44336', width: 100 }}
      onPress={handleDelete}
    />
  </View>
</Overlay>

// Fullscreen overlay
<Overlay
  isVisible={fullscreenVisible}
  fullScreen
  animationType="slide"
>
  <View style={{ flex: 1, backgroundColor: '#fff' }}>
    <Header
      centerComponent={{ text: 'Fullscreen Modal' }}
      rightComponent={{
        icon: 'close',
        onPress: () => setFullscreenVisible(false)
      }}
    />
    <View style={{ flex: 1, padding: 20 }}>
      <Text>Fullscreen overlay content goes here...</Text>
    </View>
  </View>
</Overlay>

// Loading overlay
<Overlay
  isVisible={isLoading}
  backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
  overlayStyle={{
    backgroundColor: 'transparent',
    elevation: 0,
    shadowOpacity: 0,
  }}
>
  <View style={{
    backgroundColor: '#fff',
    padding: 30,
    borderRadius: 10,
    alignItems: 'center',
  }}>
    <ActivityIndicator size="large" color="#007AFF" />
    <Text style={{ marginTop: 15, fontSize: 16 }}>Loading...</Text>
  </View>
</Overlay>

Tooltip

Contextual information popup component that displays helpful information when users interact with UI elements.

/**
 * Contextual information popup
 */
interface TooltipProps {
  /** Tooltip content */
  popover: React.ReactElement;
  /** Children element that triggers tooltip */
  children: React.ReactElement;
  /** Tooltip height */
  height?: number;
  /** Tooltip width */
  width?: number;
  /** Background color */
  backgroundColor?: string;
  /** Highlight color */
  highlightColor?: string;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Popover styles */
  popoverStyle?: StyleProp<ViewStyle>;
  /** Overlay color */
  overlayColor?: string;
  /** Pointer events */
  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
  /** Toggle tooltip on press */
  toggleOnPress?: boolean;
  /** Action type */
  toggleAction?: 'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut';
  /** Close on backdrop press */
  closeOnlyOnBackdropPress?: boolean;
  /** With pointer */
  withPointer?: boolean;
  /** Pointer color */
  pointerColor?: string;
  /** With overlay */
  withOverlay?: boolean;
  /** Skip iOS modal */
  skipAndroidStatusBar?: boolean;
}

Usage Examples:

import React from 'react';
import { Tooltip, Button, Text, Icon } from 'react-native-elements';

// Basic tooltip
<Tooltip
  popover={<Text>This is a helpful tooltip message</Text>}
  height={40}
  width={200}
  backgroundColor="#333"
>
  <Button title="Hover for tooltip" />
</Tooltip>

// Tooltip with custom styling
<Tooltip
  popover={
    <View>
      <Text style={{ color: '#fff', fontSize: 14 }}>
        Click here to save your changes
      </Text>
    </View>
  }
  backgroundColor="#007AFF"
  highlightColor="rgba(0, 122, 255, 0.2)"
  height={60}
  width={220}
  containerStyle={{
    borderRadius: 8,
  }}
  pointerColor="#007AFF"
  withPointer={true}
>
  <Icon
    name="save"
    type="material"
    color="#007AFF"
    size={30}
  />
</Tooltip>

// Tooltip with long press trigger
<Tooltip
  popover={
    <Text style={{ color: '#fff' }}>
      Long press activated tooltip with detailed information
      about this feature.
    </Text>
  }
  height={80}
  width={250}
  backgroundColor="#333"
  toggleAction="onLongPress"
  withOverlay={true}
  overlayColor="rgba(0,0,0,0.3)"
>
  <Text style={{ color: '#007AFF', textDecorationLine: 'underline' }}>
    Long press me for info
  </Text>
</Tooltip>

// Tooltip with rich content
<Tooltip
  popover={
    <View style={{ padding: 10 }}>
      <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 16 }}>
        Pro Feature
      </Text>
      <Text style={{ color: '#fff', marginTop: 5 }}>
        This feature is available in the Pro version.
      </Text>
      <Button
        title="Upgrade"
        buttonStyle={{
          backgroundColor: '#4caf50',
          marginTop: 10,
          paddingHorizontal: 20,
        }}
        titleStyle={{ fontSize: 12 }}
      />
    </View>
  }
  height={120}
  width={200}
  backgroundColor="#333"
  containerStyle={{
    borderRadius: 10,
  }}
>
  <View style={{
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  }}>
    <Icon name="star" color="#ffc107" />
    <Text style={{ marginLeft: 5 }}>Premium Feature</Text>
  </View>
</Tooltip>

Dialog

Modal dialog component for displaying important information, confirmations, and user interactions with various content layouts.

/**
 * Modal dialog component
 */
interface DialogProps {
  /** Dialog visibility */
  isVisible: boolean;
  /** Dialog title */
  title?: string;
  /** Dialog message */
  message?: string;
  /** Children components */
  children?: React.ReactNode;
  /** Actions array */
  actions?: DialogAction[];
  /** Backdrop press handler */
  onBackdropPress?(): void;
  /** Overlay styles */
  overlayStyle?: StyleProp<ViewStyle>;
  /** Dialog styles */
  dialogStyle?: StyleProp<ViewStyle>;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle>;
  /** Message styles */
  messageStyle?: StyleProp<TextStyle>;
}

/**
 * Dialog loading component
 */
interface DialogLoadingProps {
  /** Loading visibility */
  isVisible: boolean;
  /** Loading message */
  loadingText?: string;
  /** Activity indicator props */
  activityIndicatorProps?: ActivityIndicatorProps;
  /** Overlay styles */
  overlayStyle?: StyleProp<ViewStyle>;
}

/**
 * Dialog title component
 */
interface DialogTitleProps {
  /** Title text */
  title?: string;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle>;
}

/**
 * Dialog action configuration
 */
interface DialogAction {
  /** Action title */
  title: string;
  /** Action handler */
  onPress: () => void;
  /** Button styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Title styles */
  titleStyle?: StyleProp<TextStyle>;
}

Usage Examples:

import React, { useState } from 'react';
import { Dialog, Button } from 'react-native-elements';

// Basic confirmation dialog
const [dialogVisible, setDialogVisible] = useState(false);

<View>
  <Button title="Show Dialog" onPress={() => setDialogVisible(true)} />
  
  <Dialog
    isVisible={dialogVisible}
    title="Confirm Action"
    message="Are you sure you want to proceed?"
    actions={[
      {
        title: 'Cancel',
        onPress: () => setDialogVisible(false),
        buttonStyle: { backgroundColor: '#ccc' },
      },
      {
        title: 'Confirm',
        onPress: () => {
          handleConfirm();
          setDialogVisible(false);
        },
        buttonStyle: { backgroundColor: '#007AFF' },
      },
    ]}
    onBackdropPress={() => setDialogVisible(false)}
  />
</View>

// Loading dialog
const [loadingVisible, setLoadingVisible] = useState(false);

<Dialog.Loading
  isVisible={loadingVisible}
  loadingText="Processing your request..."
  activityIndicatorProps={{
    size: 'large',
    color: '#007AFF',
  }}
  overlayStyle={{
    backgroundColor: 'rgba(0,0,0,0.7)',
  }}
/>

// Custom content dialog
<Dialog
  isVisible={customDialogVisible}
  onBackdropPress={() => setCustomDialogVisible(false)}
  dialogStyle={{
    borderRadius: 15,
    padding: 0,
    backgroundColor: '#fff',
  }}
>
  <Dialog.Title 
    title="Custom Dialog" 
    titleStyle={{ 
      fontSize: 20, 
      fontWeight: 'bold',
      textAlign: 'center',
      paddingVertical: 20,
    }} 
  />
  
  <View style={{ padding: 20 }}>
    <Text style={{ fontSize: 16, marginBottom: 15 }}>
      This is a custom dialog with rich content.
    </Text>
    
    <Input
      placeholder="Enter your name"
      leftIcon={{ type: 'material', name: 'person' }}
    />
    
    <View style={{
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginTop: 20,
    }}>
      <Button
        title="Cancel"
        type="outline"
        onPress={() => setCustomDialogVisible(false)}
        buttonStyle={{ width: 100 }}
      />
      <Button
        title="Save"
        onPress={handleSave}
        buttonStyle={{ width: 100 }}
      />
    </View>
  </View>
</Dialog>

// Alert dialog with icon
<Dialog
  isVisible={alertVisible}
  title="Success"
  message="Your data has been saved successfully!"
  actions={[
    {
      title: 'OK',
      onPress: () => setAlertVisible(false),
      buttonStyle: { backgroundColor: '#4caf50' },
    },
  ]}
  dialogStyle={{
    alignItems: 'center',
  }}
>
  <Icon
    name="check-circle"
    type="material"
    size={60}
    color="#4caf50"
    style={{ marginBottom: 20 }}
  />
</Dialog>

BottomSheet

Bottom sliding panel component for presenting additional content, actions, or navigation options from the bottom of the screen.

/**
 * Bottom sliding panel component
 */
interface BottomSheetProps {
  /** BottomSheet visibility */
  isVisible: boolean;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Modal props */
  modalProps?: Partial<ModalProps>;
  /** Close handler */
  onBackdropPress?(): void;
  /** Backdrop styles */
  backdropStyle?: StyleProp<ViewStyle>;
  /** Children components */
  children?: React.ReactNode;
}

Usage Examples:

import React, { useState } from 'react';
import { BottomSheet, ListItem, Button } from 'react-native-elements';

// Basic bottom sheet with list options
const [bottomSheetVisible, setBottomSheetVisible] = useState(false);

<View>
  <Button 
    title="Show Options" 
    onPress={() => setBottomSheetVisible(true)} 
  />
  
  <BottomSheet
    isVisible={bottomSheetVisible}
    onBackdropPress={() => setBottomSheetVisible(false)}
  >
    <ListItem onPress={() => handleOption('edit')}>
      <ListItem.Content>
        <ListItem.Title>Edit</ListItem.Title>
      </ListItem.Content>
    </ListItem>
    
    <ListItem onPress={() => handleOption('share')}>
      <ListItem.Content>
        <ListItem.Title>Share</ListItem.Title>
      </ListItem.Content>
    </ListItem>
    
    <ListItem onPress={() => handleOption('delete')}>
      <ListItem.Content>
        <ListItem.Title style={{ color: '#f44336' }}>
          Delete
        </ListItem.Title>
      </ListItem.Content>
    </ListItem>
    
    <ListItem onPress={() => setBottomSheetVisible(false)}>
      <ListItem.Content>
        <ListItem.Title>Cancel</ListItem.Title>
      </ListItem.Content>
    </ListItem>
  </BottomSheet>
</View>

// Bottom sheet with custom content
<BottomSheet
  isVisible={customSheetVisible}
  onBackdropPress={() => setCustomSheetVisible(false)}
  containerStyle={{
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  }}
>
  <View style={{ padding: 20 }}>
    <Text h4 style={{ textAlign: 'center', marginBottom: 20 }}>
      Filter Options
    </Text>
    
    <CheckBox
      title="Show completed items"
      checked={showCompleted}
      onPress={() => setShowCompleted(!showCompleted)}
    />
    
    <CheckBox
      title="Show archived items"
      checked={showArchived}
      onPress={() => setShowArchived(!showArchived)}
    />
    
    <Slider
      value={priceRange}
      onValueChange={setPriceRange}
      minimumValue={0}
      maximumValue={1000}
      thumbStyle={{ backgroundColor: '#007AFF' }}
      minimumTrackTintColor="#007AFF"
      style={{ marginVertical: 20 }}
    />
    <Text>Price range: $0 - ${priceRange}</Text>
    
    <View style={{
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginTop: 30,
    }}>
      <Button
        title="Clear"
        type="outline"
        onPress={clearFilters}
        buttonStyle={{ width: 100 }}
      />
      <Button
        title="Apply"
        onPress={applyFilters}
        buttonStyle={{ width: 100 }}
      />
    </View>
  </View>
</BottomSheet>

// Bottom sheet with icons and descriptions
<BottomSheet
  isVisible={actionSheetVisible}
  onBackdropPress={() => setActionSheetVisible(false)}
>
  <ListItem onPress={() => handleAction('camera')}>
    <Icon name="camera-alt" type="material" color="#007AFF" />
    <ListItem.Content>
      <ListItem.Title>Take Photo</ListItem.Title>
      <ListItem.Subtitle>Use device camera</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
  
  <ListItem onPress={() => handleAction('gallery')}>
    <Icon name="photo-library" type="material" color="#4caf50" />
    <ListItem.Content>
      <ListItem.Title>Choose from Gallery</ListItem.Title>
      <ListItem.Subtitle>Select existing photo</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
  
  <ListItem onPress={() => handleAction('remove')}>
    <Icon name="delete" type="material" color="#f44336" />
    <ListItem.Content>
      <ListItem.Title style={{ color: '#f44336' }}>
        Remove Photo
      </ListItem.Title>
      <ListItem.Subtitle>Delete current photo</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
</BottomSheet>

Install with Tessl CLI

npx tessl i tessl/npm-react-native-elements

docs

core-components.md

display-components.md

feedback-components.md

specialized-components.md

theming.md

tile.json

tessl/npm-react-native-elements