library-conventions

Library Conventions

Component Structure

Every component lives in its own folder under src/components/:

src/components/MyComponent/
├── MyComponent.tsx          # Implementation
├── MyComponent.types.ts     # Props interface
└── index.ts                 # Barrel: re-exports default + named + types

Props Interface Pattern

// MyComponent.types.ts
import type { StyleProp, ViewStyle } from "react-native";

/**
 * Props for the {@link MyComponent} component.
 */
export interface MyComponentProps {
  /** Required title — always document every prop with TSDoc. */
  title: string;

  /** Optional. Always mark optional props with `?`. */
  style?: StyleProp<ViewStyle>;

  /** @defaultValue false */
  enabled?: boolean;
}

Component Implementation Pattern

// MyComponent.tsx
import React from "react";
import { StyleSheet, View } from "react-native";
import type { MyComponentProps } from "./MyComponent.types";

/**
 * TSDoc summary line.
 *
 * @example
 * ```tsx
 * <MyComponent title="Hello" />
 * ```
 */
const MyComponent: React.FC<MyComponentProps> = ({
  title,
  style,
  enabled = false,
  testID = "my-component",
}) => {
  return (
    <View style={[styles.container, style]} testID={testID}>
      {/* implementation */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {},
});

export default MyComponent;

Barrel Pattern

// index.ts
export { default } from "./MyComponent";
export { default as MyComponent } from "./MyComponent";
export type { MyComponentProps } from "./MyComponent.types";

Hook Pattern

// src/hooks/useMyHook.ts
export interface UseMyHookOptions {
  /** TSDoc every option. */
  initialValue?: number;
}

export interface UseMyHookReturn {
  /** TSDoc every returned value. */
  value: number;
  setValue: (v: number) => void;
}

/**
 * @example
 * const { value, setValue } = useMyHook({ initialValue: 0 });
 */
export function useMyHook(options: UseMyHookOptions = {}): UseMyHookReturn {
  // implementation
}