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

Theming System

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

Comprehensive theming engine with context providers, hooks, and HOCs for consistent design across your React Native Elements application with support for dark mode, custom colors, and component-specific overrides.

Capabilities

ThemeProvider

Context provider component for theme management that wraps your application to provide theme context to all React Native Elements components.

/**
 * Context provider for theme management
 */
interface ThemeProviderProps {
  /** Theme configuration */
  theme: Partial<FullTheme>;
  /** Enable dark mode */
  useDark?: boolean;
  /** Children components */
  children: React.ReactNode;
}

/**
 * Complete theme configuration interface
 */
interface FullTheme {
  /** Color palette */
  colors: Colors;
  /** Component-specific theme overrides */
  Button: Partial<ButtonProps>;
  Input: Partial<InputProps>;
  Header: Partial<HeaderProps>;
  Card: Partial<CardProps>;
  ListItem: Partial<ListItemProps>;
  Text: Partial<TextProps>;
  Icon: Partial<IconProps>;
  CheckBox: Partial<CheckBoxProps>;
  Avatar: Partial<AvatarProps>;
  Badge: Partial<BadgeProps>;
  Divider: Partial<DividerProps>;
  SearchBar: Partial<SearchBarProps>;
  Slider: Partial<SliderProps>;
  ButtonGroup: Partial<ButtonGroupProps>;
  Overlay: Partial<OverlayProps>;
  Tooltip: Partial<TooltipProps>;
  BottomSheet: Partial<BottomSheetProps>;
  PricingCard: Partial<PricingCardProps>;
  Tile: Partial<TileProps>;
  Image: Partial<ImageProps>;
}

/**
 * Color palette interface
 */
interface Colors {
  /** Primary brand color */
  primary: string;
  /** Secondary brand color */
  secondary: string;
  /** Success state color */
  success: string;
  /** Warning state color */
  warning: string;
  /** Error state color */
  error: string;
  /** White color */
  white: string;
  /** Black color */
  black: string;
  /** Grey scale colors (darkest to lightest) */
  grey0: string;
  grey1: string;
  grey2: string;
  grey3: string;
  grey4: string;
  grey5: string;
  /** Border/outline grey */
  greyOutline: string;
  /** Search background color */
  searchBg: string;
  /** Disabled element color */
  disabled: string;
  /** Divider line color */
  divider: string;
  /** Platform-specific color overrides */
  platform: {
    ios: Partial<Colors>;
    android: Partial<Colors>;
    web: Partial<Colors>;
  };
}

Usage Examples:

import React from 'react';
import { ThemeProvider } from 'react-native-elements';

// Basic theme setup
const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
    success: '#34C759',
    warning: '#FF9500',
    error: '#FF3B30',
  }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyAppContent />
    </ThemeProvider>
  );
}

// Dark mode theme
const darkTheme = {
  colors: {
    primary: '#0A84FF',
    secondary: '#5E5CE6',
    white: '#000000',
    black: '#FFFFFF',
    grey0: '#FFFFFF',
    grey1: '#F2F2F7',
    grey2: '#E5E5EA',
    grey3: '#D1D1D6',
    grey4: '#C7C7CC',
    grey5: '#AEAEB2',
    searchBg: '#1C1C1E',
    divider: '#38383A',
  }
};

// Component-specific theme overrides
const customTheme = {
  colors: {
    primary: '#6366F1',
    secondary: '#8B5CF6',
  },
  Button: {
    buttonStyle: {
      borderRadius: 25,
      paddingHorizontal: 30,
    },
    titleStyle: {
      fontWeight: 'bold',
    },
  },
  Input: {
    inputContainerStyle: {
      borderBottomWidth: 2,
      borderRadius: 5,
      paddingHorizontal: 10,
    },
  },
  Header: {
    backgroundColor: '#6366F1',
    centerComponent: {
      style: { 
        color: '#fff', 
        fontSize: 20, 
        fontWeight: 'bold' 
      }
    },
  },
};

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

// Platform-specific theming
const platformTheme = {
  colors: {
    primary: '#007AFF',
    platform: {
      ios: {
        primary: '#007AFF',
        searchBg: '#E5E5EA',
      },
      android: {
        primary: '#2196F3',
        searchBg: '#F5F5F5',
      },
      web: {
        primary: '#0066CC',
        searchBg: '#FAFAFA',
      },
    },
  },
};

useTheme Hook

React hook for accessing theme context in functional components, providing theme values and update functions.

/**
 * React hook for accessing theme context
 * @returns Theme context object with theme values and update functions
 */
function useTheme(): ThemeContextValue;

/**
 * Theme context value interface
 */
interface ThemeContextValue {
  /** Current theme configuration */
  theme: FullTheme;
  /** Update theme partially */
  updateTheme: UpdateTheme;
  /** Replace entire theme */
  replaceTheme: ReplaceTheme;
}

/**
 * Function type for updating theme partially
 */
type UpdateTheme = (updates: Partial<FullTheme>) => void;

/**
 * Function type for replacing entire theme
 */
type ReplaceTheme = (theme: FullTheme) => void;

Usage Examples:

import React from 'react';
import { useTheme } from 'react-native-elements';
import { View, Text, Button } from 'react-native';

// Basic theme usage
function MyComponent() {
  const { theme } = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.primary, padding: 20 }}>
      <Text style={{ color: theme.colors.white }}>
        Themed Component
      </Text>
    </View>
  );
}

// Theme updates
function ThemeControls() {
  const { theme, updateTheme, replaceTheme } = useTheme();
  
  const switchToDarkMode = () => {
    updateTheme({
      colors: {
        ...theme.colors,
        white: '#000000',
        black: '#FFFFFF',
        grey0: '#FFFFFF',
        grey5: '#1C1C1E',
      }
    });
  };
  
  const resetTheme = () => {
    replaceTheme({
      colors: {
        primary: '#007AFF',
        secondary: '#5856D6',
        // ... full theme object
      },
      // ... other theme properties
    });
  };
  
  return (
    <View>
      <Button title="Dark Mode" onPress={switchToDarkMode} />
      <Button title="Reset Theme" onPress={resetTheme} />
    </View>
  );
}

// Dynamic styling with theme
function DynamicComponent() {
  const { theme } = useTheme();
  
  const dynamicStyles = {
    container: {
      backgroundColor: theme.colors.white,
      borderColor: theme.colors.greyOutline,
      borderWidth: 1,
    },
    text: {
      color: theme.colors.black,
      fontSize: 16,
    },
    button: {
      backgroundColor: theme.colors.primary,
      borderRadius: 8,
    },
  };
  
  return (
    <View style={dynamicStyles.container}>
      <Text style={dynamicStyles.text}>Dynamic Theme Content</Text>
      <TouchableOpacity style={dynamicStyles.button}>
        <Text style={{ color: theme.colors.white }}>Action</Text>
      </TouchableOpacity>
    </View>
  );
}

makeStyles Hook

Creates dynamic styles based on theme and props, providing a powerful way to create responsive and theme-aware stylesheets.

/**
 * Creates dynamic styles based on theme and props
 * @param styles - Style object or function that returns style object
 * @returns Hook function that returns computed styles
 */
function makeStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
  styles: T | ((theme: FullTheme, props?: any) => T)
): (props?: any) => T;

Usage Examples:

import React from 'react';
import { makeStyles } from 'react-native-elements';
import { View, Text } from 'react-native';

// Basic makeStyles usage
const useStyles = makeStyles((theme) => ({
  container: {
    backgroundColor: theme.colors.white,
    padding: 20,
    borderRadius: 10,
    shadowColor: theme.colors.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  title: {
    color: theme.colors.black,
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  primaryButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 24,
  },
}));

function StyledComponent() {
  const styles = useStyles();
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Styled Component</Text>
      <TouchableOpacity style={styles.primaryButton}>
        <Text style={{ color: 'white' }}>Action</Text>
      </TouchableOpacity>
    </View>
  );
}

// makeStyles with props
const useCardStyles = makeStyles((theme, props) => ({
  card: {
    backgroundColor: props.highlighted ? theme.colors.primary : theme.colors.white,
    borderColor: props.highlighted ? theme.colors.primary : theme.colors.greyOutline,
    borderWidth: props.highlighted ? 2 : 1,
    borderRadius: props.rounded ? 15 : 5,
    padding: 20,
    margin: 10,
  },
  text: {
    color: props.highlighted ? theme.colors.white : theme.colors.black,
    fontSize: props.large ? 18 : 14,
    fontWeight: props.bold ? 'bold' : 'normal',
  },
}));

function Card({ title, highlighted, rounded, large, bold }) {
  const styles = useCardStyles({ highlighted, rounded, large, bold });
  
  return (
    <View style={styles.card}>
      <Text style={styles.text}>{title}</Text>
    </View>
  );
}

// Responsive styles with makeStyles
const useResponsiveStyles = makeStyles((theme) => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.white,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  gridItem: {
    width: '48%',
    backgroundColor: theme.colors.grey5,
    borderRadius: 8,
    padding: 15,
    marginBottom: 15,
  },
  // Platform-specific styles
  ...(Platform.OS === 'ios' && {
    iosSpecific: {
      shadowColor: theme.colors.black,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
    },
  }),
  ...(Platform.OS === 'android' && {
    androidSpecific: {
      elevation: 4,
    },
  }),
}));

withTheme HOC

Higher-Order Component that injects theme props into components, useful for class components or when you need theme props injected directly.

/**
 * Higher-Order Component that injects theme props into components
 * @param Component - Component to wrap with theme
 * @param themeKey - Optional theme key for component-specific overrides
 * @returns Enhanced component with theme props
 */
function withTheme<P, T = {}>(
  Component: React.ComponentType<P & ThemeProps<T>>,
  themeKey?: keyof FullTheme
): React.ComponentType<P>;

/**
 * Props injected by withTheme HOC
 */
interface ThemeProps<T = {}> {
  /** Current theme configuration */
  theme: FullTheme;
  /** Update theme partially */
  updateTheme: UpdateTheme;
  /** Replace entire theme */
  replaceTheme: ReplaceTheme;
}

Usage Examples:

import React from 'react';
import { withTheme } from 'react-native-elements';
import { View, Text } from 'react-native';

// Basic withTheme usage
class MyClassComponent extends React.Component {
  render() {
    const { theme } = this.props;
    
    return (
      <View style={{ backgroundColor: theme.colors.primary, padding: 20 }}>
        <Text style={{ color: theme.colors.white }}>
          Themed Class Component
        </Text>
      </View>
    );
  }
}

const ThemedComponent = withTheme(MyClassComponent);

// withTheme with component-specific overrides
class CustomButton extends React.Component {
  render() {
    const { theme, title, ...props } = this.props;
    
    // Component gets theme.Button overrides automatically merged
    return (
      <TouchableOpacity
        style={[
          {
            backgroundColor: theme.colors.primary,
            borderRadius: 8,
            paddingVertical: 12,
            paddingHorizontal: 24,
          },
          theme.Button?.buttonStyle, // Merged automatically
          props.buttonStyle,
        ]}
        {...props}
      >
        <Text
          style={[
            { color: theme.colors.white, fontSize: 16 },
            theme.Button?.titleStyle, // Merged automatically
            props.titleStyle,
          ]}
        >
          {title}
        </Text>
      </TouchableOpacity>
    );
  }
}

const ThemedButton = withTheme(CustomButton, 'Button');

// Functional component with withTheme
const FunctionalComponent = ({ theme, updateTheme }) => {
  const togglePrimaryColor = () => {
    updateTheme({
      colors: {
        ...theme.colors,
        primary: theme.colors.primary === '#007AFF' ? '#FF3B30' : '#007AFF',
      },
    });
  };
  
  return (
    <View>
      <Text style={{ color: theme.colors.black }}>
        Current primary: {theme.colors.primary}
      </Text>
      <Button title="Toggle Color" onPress={togglePrimaryColor} />
    </View>
  );
};

const ThemedFunctionalComponent = withTheme(FunctionalComponent);

ThemeConsumer & ThemeContext

Context consumer component and direct context access for advanced theming scenarios and render props pattern usage.

/**
 * Context consumer for accessing theme in render props pattern
 */
interface ThemeConsumerProps {
  children: (themeContext: ThemeContextValue) => React.ReactElement;
}

/**
 * React context for theme state
 */
const ThemeContext: React.Context<ThemeContextValue>;

Usage Examples:

import React, { useContext } from 'react';
import { ThemeConsumer, ThemeContext } from 'react-native-elements';

// Using ThemeConsumer with render props
function RenderPropsComponent() {
  return (
    <ThemeConsumer>
      {({ theme, updateTheme }) => (
        <View style={{ backgroundColor: theme.colors.white, padding: 20 }}>
          <Text style={{ color: theme.colors.black }}>
            Consumer Component
          </Text>
          <Button
            title="Update Theme"
            onPress={() => updateTheme({
              colors: { primary: '#FF6B6B' }
            })}
          />
        </View>
      )}
    </ThemeConsumer>
  );
}

// Direct context access
function DirectContextComponent() {
  const themeContext = useContext(ThemeContext);
  
  if (!themeContext) {
    throw new Error('Component must be wrapped with ThemeProvider');
  }
  
  const { theme, updateTheme, replaceTheme } = themeContext;
  
  return (
    <View style={{ backgroundColor: theme.colors.white }}>
      <Text style={{ color: theme.colors.black }}>
        Direct Context Access
      </Text>
    </View>
  );
}

// Advanced theme management component
class ThemeManager extends React.Component {
  render() {
    return (
      <ThemeConsumer>
        {({ theme, updateTheme, replaceTheme }) => (
          <View style={{ padding: 20 }}>
            <Text style={{ fontSize: 18, marginBottom: 15 }}>
              Theme Manager
            </Text>
            
            <Button
              title="Light Theme"
              onPress={() => replaceTheme(lightTheme)}
            />
            
            <Button
              title="Dark Theme"
              onPress={() => replaceTheme(darkTheme)}
            />
            
            <Button
              title="Custom Primary"
              onPress={() => updateTheme({
                colors: { primary: '#9C27B0' }
              })}
            />
          </View>
        )}
      </ThemeConsumer>
    );
  }
}

Default Colors

Built-in color palette providing the default theme colors for React Native Elements components.

/**
 * Default color palette for the theme
 */
const colors: Colors = {
  primary: '#2089dc',
  secondary: '#ca71eb',
  white: '#ffffff',
  black: '#242424',
  grey0: '#393e42',
  grey1: '#43484d',
  grey2: '#5e6977',
  grey3: '#86939e',
  grey4: '#bdc6cf',
  grey5: '#e1e8ed',
  greyOutline: '#bbb',
  searchBg: '#303337',
  success: '#52c41a',
  error: '#ff190c',
  warning: '#faad14',
  disabled: 'hsl(208, 8%, 90%)',
  divider: '#bcbbc1',
  platform: {
    ios: {
      primary: '#007aff',
      secondary: '#5856d6',
      grey: '#7d7d7d',
      searchBg: '#dcdce1',
      success: '#4cd964',
      error: '#ff3b30',
      warning: '#ffcc00',
    },
    android: {
      primary: '#2196f3',
      secondary: '#9c27b0',
      grey: '#737373',
      searchBg: '#dcdce1',
      success: '#4caf50',
      error: '#f44336',
      warning: '#ffeb3b',
    },
    web: {
      primary: '#2089dc',
      secondary: '#ca71eb',
      grey: '#393e42',
      searchBg: '#303337',
      success: '#52c41a',
      error: '#ff190c',
      warning: '#faad14',
    },
  },
};

Usage Examples:

import { colors } from 'react-native-elements';

// Use default colors directly
const customTheme = {
  colors: {
    ...colors,
    primary: '#6366F1', // Override primary while keeping others
    custom: '#FF6B6B', // Add custom colors
  },
};

// Platform-specific color access
const platformPrimary = colors.platform.ios.primary;
const androidSuccess = colors.platform.android.success;

// Create variations of default colors
const lightTheme = {
  colors: {
    ...colors,
    white: '#ffffff',
    black: '#000000',
  },
};

const darkTheme = {
  colors: {
    ...colors,
    white: '#000000',
    black: '#ffffff',
    grey0: '#ffffff',
    grey5: '#1c1c1e',
    searchBg: '#1c1c1e',
  },
};

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

theming.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Theming System

Capabilities

ThemeProvider

useTheme Hook

makeStyles Hook

withTheme HOC

ThemeConsumer & ThemeContext

Default Colors

theming.mddocs/