In React Native, custom components are reusable UI building blocks that follow React's component-based architecture. They enable you to create modular, maintainable code by encapsulating specific functionality and styling into self-contained units that can be used throughout your application.

Creating Custom Components

  1. Create a components folder in your project to organize custom components
  2. Create new files with .tsx extension
  3. Export components using standard React patterns

Example

import { Image, Text, View } from "react-native";
 
interface CustomCompProps {
  name: string;
  description?: string;
  showImage?: boolean;
}
export default function CustomComponent({
  name,
  description,
  showImage = false,
}: CustomCompProps) {
  return (
    <View>
      {showImage ? (
        <Image
          source={{
            uri: "https://avatars.githubusercontent.com/u/43630417?v=4",
          }}
          width={100}
          height={100}
        />
      ) : null}
      <Text style={{ fontSize: 30 }}>{name}</Text>
      {description ? <Text>{description}</Text> : null}
    </View>
  );
}
🏆 Challenge: Build a Reusable Info Card
  1. Create a custom component named InfoCard.tsx in your components folder. It should accept:
    • title: string
    • subtitle?: string
    • showImage?: boolean
  2. Render a title and optional subtitle. If showImage is true, display an image.
  3. Export and use your InfoCard in a parent screen.
  4. Bonus: Add a button or touchable element that toggles the image's visibility.

Is this lesson useful?

Prev lessonNext lesson