Skip to main content
Mapagam

Using UI Component Libraries

1. Using React Native Paper

React Native Paper is a popular UI component library for React Native that follows Google's Material Design guidelines. It provides a set of pre-built, customizable components to help developers build consistent and visually appealing mobile applications.

Component Description Usage Example
Button A Material Design-style button with multiple variants (contained, outlined, text). 
<Button mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>
TextInput A text input field with support for labels, error states, and icons. 
<TextInput
  label="Email"
  value={email}
  onChangeText={setEmail}
/>
Card A container component for displaying content in a structured layout. 
<Card>
  <Card.Title title="Card Title" subtitle="Card Subtitle" />
  <Card.Content>
    <Paragraph>Some text inside the card</Paragraph>
  </Card.Content>
</Card>
Modal A dialog component that appears on top of the current screen. 
<Modal visible={visible} onDismiss={() => setVisible(false)}>
  <View style={styles.modalContent}>
    <Text>Hello from Modal!</Text>
  </View>
</Modal>
Note: React Native Paper requires react-native-paper to be installed. You can install it using npm or yarn.
npm install react-native-paper

Key Features

  • Material Design components
  • Theming support
  • Accessibility features
  • Customizable themes

2. Using React Native Elements

Component Props Description Notes
Button title, onPress, buttonStyle Renders a touchable button Supports custom styling via buttonStyle
Input placeholder, value, onChangeText Renders a text input field Supports validation and error states
Card title, containerStyle Renders a card component Useful for grouping related content

Example: Button Component

<Button
  title="Press Me"
  onPress={() => console.log("Button pressed")}
  buttonStyle={{
    backgroundColor: "#007AFF"
  }}
/>

Example: Input Component

<Input
  placeholder="Enter text"
  value={text}
  onChangeText={(value) => setText(value)}
/>
Note: React Native Elements is built on top of React Native and provides a set of cross-platform UI components.

3. Using NativeBase Components

NativeBase is a popular UI component library for React Native that provides a set of accessible, reusable components built with native performance in mind.

Component Description Props Usage Example
Button A button component with various styles and sizes. variant, size, isDisabled 
<Button variant="solid" size="md">
  Click me
</Button>
Input A text input field with validation support. placeholder, value, onChangeText <Input placeholder="Enter text" />
Card A container component for grouping related content. variant, size 
<Card>
  <Card.Header>Header</Card.Header>
  <Card.Body>Body content</Card.Body>
</Card>

Example: Using NativeBase Button

import { Button } from "native-base";

function MyComponent() {
  return (
    <Button variant="outline" size="lg">
      Press Me
    </Button>
  );
}

Example: Using NativeBase Input

import { Input } from "native-base";

function MyComponent() {
  const [value, setValue] = useState("");

  return (
    <Input
      placeholder="Type here..."
      value={value}
      onChangeText={setValue}
    />
  );
}
Note: NativeBase components are built on top of React Native elements, ensuring native performance and compatibility with existing React Native code.

4. Implementing Theming

Property Description Values Notes
theme Defines the theme object object Contains color, font, and spacing values
ThemeProvider Wrapper component to provide theme React.Component Must wrap app or component tree
useTheme Hook to access current theme function Returns theme object from context

Example: Basic Theme Setup

import { ThemeProvider, useTheme } from 'styled-components';
import { StyleSheet } from 'react-native';

const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#FF9500',
  },
  fonts: {
    regular: 'System',
  },
};

const App = () => (
  <ThemeProvider theme={theme}>
    <MyComponent />
  </ThemeProvider>
);

const MyComponent = () => {
  const { colors } = useTheme();
  return <View style={{ backgroundColor: colors.primary }} />;
};

Example: Custom Theme with Nested Values

const customTheme = {
  colors: {
    primary: '#007AFF',
    secondary: '#FF9500',
    text: {
      primary: '#000000',
      secondary: '#8E8E93',
    },
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
  },
};

const ThemedText = () => {
  const { colors } = useTheme();
  return (
    <Text style={{ color: colors.text.primary }}>
      Themed Text
    </Text>
  );
};
Note: Theme providers are typically used in combination with libraries like styled-components or react-native-paper for consistent theming across components.

Theming Best Practices

  • Define a centralized theme object for consistency
  • Use nested properties for complex themes (e.g., colors.text.primary)
  • Ensure theme values are compatible with React Native's style system
  • Consider using react-native-paper or styled-components for easier theme integration

5. Customizing Component Styles

Property Values Description
backgroundColor string Sets the background color of the component
borderRadius number Rounds the corners of the component
padding number Space inside the component
margin number Space outside the component
flex number Determines how the component grows or shrinks

Example: Applying Custom Styles

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

const CustomComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
    padding: 20,
    margin: 10
  },
  text: {
    fontSize: 18,
    color: '#333'
  }
});

export default CustomComponent;
Note: StyleSheet.create is used to optimize performance by creating a lookup table for styles.
Warning: Avoid inline styles in production as they are less performant than StyleSheet.

6. Using Styled Components

Property Description Example
styled Creates a styled component with specific CSS rules styled.View
css Applies CSS styles to a component styled.View.css`background-color: red;`

Example: Basic Styled Component

import styled from 'styled-components/native';

const StyledButton = styled.TouchableOpacity&#x60;
  background-color: #007AFF;
  padding: 10px 20px;
  border-radius: 5px;
&#x60;;

const StyledText = styled.Text&#x60;
  color: white;
  font-size: 16px;
  text-align: center;
&#x60;;

export default function App() {
  return (
    <StyledButton>
      <StyledText>Press Me</StyledText>
    </StyledButton>
  );
}

Example: Dynamic Styles with Props

import styled from 'styled-components/native';

const DynamicContainer = styled.View&#x60;
  background-color: ${props => props.bgColor || '#ffffff'};
  padding: ${props => props.padding || '10px'};
  margin: ${props => props.margin || '0'};
&#x60;;

export default function App() {
  return (
    <DynamicContainer bgColor="#ff6b6b" padding="20px">
      <Text>Dynamic Styled Component</Text>
    </DynamicContainer>
  );
}
Note: Styled Components require the styled-components library to be installed and configured in your React Native project.
Warning: Ensure that you are using the correct version of styled-components compatible with React Native (v5+).
Feature Description Status
Theming Supports theming with ThemeProvider NEW
Media Queries Supports responsive design with media queries DEPRECATED
Server-side Rendering Not supported in React Native EXPERIMENTAL

7. Implementing Design Systems

Example: Using a Design System Component

import { Button } from '@my-design-system/react';

function App() {
  return (
    <Button
      variant="primary"
      size="medium"
      onPress={() => console.log('Button pressed!')}
    >
      Click me
    </Button>
  );
}
Property Description Values Notes
variant Style variant of the button "primary", "secondary", "outline" Defines color scheme and styling
size Size of the button "small", "medium", "large" Controls padding and font size
disabled Disables the button interaction true, false Prevents user interaction
onPress Callback function on press Function Handles user interaction
Note: Design system components should be consistent with the overall design language and accessible.

Comparison: Design Systems vs Custom Components

  • Design Systems: Provide reusable, consistent components with predefined styles and behaviors
  • Custom Components: Offer more flexibility but require more maintenance and consistency efforts

Workflow: Integrating a Design System

  1. Install the design system package (e.g., npm install @my-design-system/react)
  2. Import components from the design system
  3. Use components in your app with consistent props and styles
  4. Customize theme or overrides if needed (e.g., color palette, spacing)

8. Creating Reusable Components

Example: Basic Reusable Component

{`import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Card = ({ title, content }) => (
  <View style={styles.card}>
    <Text style={styles.title}>{title}</Text>
    <Text style={styles.content}>{content}</Text>
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    padding: 16,
    margin: 8,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  content: {
    fontSize: 14,
    color: '#333',
  },
});

export default Card;`}
Property Description Default
title Text to display as the card title null
content Text to display as the card content null
Note: Reusable components should be designed with flexibility in mind, allowing for customization through props.

Example: Component with Default Props

{`const CardWithDefaults = ({ title, content }) => (
  <View style={styles.card}>
    <Text style={styles.title}>{title || 'Default Title'}</Text>
    <Text style={styles.content}>{content || 'Default Content'}</Text>
  </View>
);

CardWithDefaults.defaultProps = {
  title: 'Default Title',
  content: 'Default Content',
};`}

Example: Component with Validation

{`import PropTypes from 'prop-types';

const ValidatedCard = ({ title, content }) => (
  <View style={styles.card}>
    <Text style={styles.title}>{title}</Text>
    <Text style={styles.content}>{content}</Text>
  </View>
);

ValidatedCard.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
};`}

9. Using Tamagui for Cross-Platform UI

Tamagui is a cross-platform UI library for React Native and web that allows you to write components once and deploy them across multiple platforms with consistent styling and behavior.

Feature Description Support
Cross-Platform Build once, run on iOS, Android, Web Good
Theming Theme-based design system with tokens Good
Performance Optimized rendering for native and web Good

Example: Basic Tamagui Component

import { Button } from "@tamagui/core";

export default function App() {
  return (
    <Button>
      Press me
    </Button>
  );
}

Example: Using Theme Tokens

import { Button, Text } from "@tamagui/core";

export default function ThemedComponent() {
  return (
    <Button>
      <Text color="$color">Themed Text</Text>
    </Button>
  );
}
Note: Tamagui requires a setup with create-tamagui or manual configuration to work properly in React Native projects.

Key Features

  • Consistent UI across platforms
  • Theming engine with design tokens
  • High performance rendering
  • Extensible component system

10. Choosing UI Library

  • React Native Elements: Comprehensive set of cross-platform UI components with a focus on Material Design. Offers good documentation and community support.
  • NativeBase: Highly customizable library with a strong emphasis on accessibility and responsive design. Includes extensive theming capabilities.
  • React Native Paper: Implements Material Design guidelines strictly, providing a consistent look and feel across platforms. Known for its clean and modern aesthetic.
  • Ant Design Mobile: Based on Ant Design principles, offering a rich set of components tailored for mobile applications. Strong integration with React.
Library Design System Customization Documentation Community Support
React Native Elements Material Design High Good Strong
NativeBase Accessible, Responsive Very High Good Strong
React Native Paper Material Design Medium Excellent Good
Ant Design Mobile Ant Design Medium Good Good

Key Considerations When Choosing a UI Library

  • Design Consistency: Ensure the library aligns with your app's design language and branding.
  • Customization Needs: Evaluate how much flexibility you need in styling and layout.
  • Performance: Some libraries may introduce overhead; consider the impact on app performance.
  • Ecosystem: Check for compatibility with other tools and libraries in your tech stack.
  • Maintenance: Assess the library's activity level and community engagement to ensure long-term viability.

Was this article helpful?

Related Cheat Sheets