Extending Components

The social.dev SDK is designed to allow maximum extensibility of screens and components. You can customize the look and behavior of your application by overriding default components with your own implementations.

Basic Override Example

The simplest way to customize components is by providing your own implementations through the SocialDevProvider. Here's how you can replace any screen or component:

import { SocialDevProvider, SocialDevApp } from "@social.dev/rn-sdk";
import NotificationScreen from "@social.dev/rn-sdk/screens/Notification/NotificationScreen";
import { View, Text } from "react-native";

export default function App() {
  return (
    <SocialDevProvider
      apiBaseUrl="https://demo.social.dev/api"
      components={{
        [NotificationScreen.name]: () => (
          <View>
            <Text>This is an example of how you can extend a component</Text>
          </View>
        ),
      }}
    >
      <SocialDevApp />
    </SocialDevProvider>
  );
}

In this example, we're replacing the default NotificationScreen with a custom implementation. The SDK will use your custom component wherever the notification screen would normally appear.

How Component Extension Works

Components in the SDK are wrapped with the withComponent higher-order component (HOC). This wrapper checks if a custom implementation has been provided in the components prop of SocialDevProvider. If a custom component is found matching the function name, it renders that instead of the default component. This allows you to selectively override any component while keeping the rest of the SDK intact.

Extending Multiple Components

You can override multiple components at once by importing them and using their function names as keys:

import NotificationScreen from "@social.dev/rn-sdk/screens/Notification/NotificationScreen";
import ProfileScreen from "@social.dev/rn-sdk/screens/ProfileScreen/ProfileScreen";
import HomeScreen from "@social.dev/rn-sdk/screens/HomeScreen/HomeScreen";

export default function App() {
  return (
    <SocialDevProvider
      apiBaseUrl="https://demo.social.dev/api"
      components={{
        [NotificationScreen.name]: MyCustomNotificationScreen,
        [ProfileScreen.name]: MyCustomProfileScreen,
        [HomeScreen.name]: MyCustomHomeScreen,
      }}
    >
      <SocialDevApp />
    </SocialDevProvider>
  );
}

Customizing Tab Navigation

You can customize the tab navigation by creating your own tab stack navigator. This allows you to control which tabs appear, their order, icons, and add new screens:

// CustomTabStackNavigator.tsx
import {
  ChatTabNavigator,
  CommunityTabNavigator,
  HomeTabNavigator,
  NotificationTabNavigator,
  ProfileTabNavigator,
  TabStack,
} from "@social.dev/rn-sdk/navigation/TabNavigator";
import { Spacing } from "@social.dev/rn-sdk/theme/tokens";
import Icon from "@social.dev/rn-sdk/components/Core/Icon";

export const CustomTabStackNavigator = () => {
  return (
    <TabStack.Navigator
      screenOptions={{
        headerTitle: () => undefined,
        headerShown: false,
        tabBarShowLabel: false,
        tabBarItemStyle: { paddingTop: Spacing[2] },
      }}
    >
      {/* Reorder tabs or remove ones you don't need */}
      <TabStack.Screen
        name="CommunityTab"
        getComponent={() => CommunityTabNavigator}
        options={{
          title: "Community",
          tabBarIcon: ({ focused, color, size }) => (
            <Icon name="group" size={size} color={color} />
          ),
        }}
      />

      <TabStack.Screen
        name="ChatTab"
        getComponent={() => ChatTabNavigator}
        options={{
          title: "Chat",
          tabBarIcon: ({ focused, color, size }) => (
            <Icon name="chat" size={size} color={color} />
          ),
        }}
      />

      <TabStack.Screen
        name="HomeTab"
        getComponent={() => HomeTabNavigator}
        options={{
          title: "Home",
          tabBarIcon: ({ focused, color, size }) => (
            <Icon name="home" size={size} color={color} />
          ),
        }}
      />

      {/* Add your own custom tab */}
      <TabStack.Screen
        name="CustomTab"
        getComponent={() => CustomTabNavigator}
        options={{
          title: "Custom",
          tabBarIcon: ({ focused, color, size }) => (
            <Icon name="star" size={size} color={color} />
          ),
        }}
      />

      <TabStack.Screen
        name="ProfileTab"
        getComponent={() => ProfileTabNavigator}
        options={{
          title: "Profile",
          tabBarIcon: ({ focused, color, size }) => (
            <Icon name="user" size={size} color={color} />
          ),
        }}
      />

      <TabStack.Screen
        name="NotificationTab"
        getComponent={() => NotificationTabNavigator}
        options={{
          title: "Notification",
          tabBarIcon: ({ focused, color, size }) => (
            <Icon name="notification" size={size} color={color} />
          ),
        }}
      />
    </TabStack.Navigator>
  );
};

Using Your Custom Tab Navigator

To use your custom tab navigator in your app, override the TabStackNavigator component:

// App.tsx
import { CustomTabStackNavigator } from "./CustomTabStackNavigator";
import { SocialDevProvider, SocialDevApp } from "@social.dev/rn-sdk";
import TabStackNavigator from "@social.dev/rn-sdk/navigation/TabNavigator";

export default function App() {
  return (
    <SocialDevProvider
      apiBaseUrl="https://demo.social.dev/api"
      components={{
        [TabStackNavigator.name]: CustomTabStackNavigator,
      }}
    >
      <SocialDevApp />
    </SocialDevProvider>
  );
}

Key Points for Tab Customization

• Reorder Tabs: Simply change the order of TabStack.Screen components
• Remove Tabs: Comment out or delete the tabs you don't need
• Add New Tabs: Create new TabStack.Screen components with custom navigators
• Custom Icons: Import the Icon component directly and use different icon names
• Tab Bar Options: Customize appearance with screenOptions and individual options

Best Practices

1. Maintain Consistency

When creating custom components, try to maintain visual consistency with the rest of your app. Consider using the same styling patterns and UI conventions.

2. Handle Props Correctly

Make sure your custom components accept and handle any props that the SDK might pass:

function CustomScreen(props) {
  // The SDK might pass navigation, route, or other props
  const { navigation, route } = props;

  return <View>{/* Your custom implementation */}</View>;
}

3. Use SDK Components Where Possible

When customizing navigation or screens, leverage existing SDK components by importing them directly:

import Feed from "@social.dev/rn-sdk/components/Feed/Feed";
import CreatePostInline from "@social.dev/rn-sdk/components/CreatePost/CreatePostInline";

function CustomTab() {
  return (
    <View>
      <CreatePostInline />
      <Feed />
    </View>
  );
}