Skip to content

Add TypeScript Support to react-native-just-timeline #28

Description

@Nmk78

Solution:
To enable TypeScript support, I have prepared a .d.ts type declaration file that can be added to the project. Here’s how it can be integrated:

  • Path: Add the file at /@types/react-native-just-timeline.d.ts.

--File content:

declare module 'react-native-just-timeline' {
  import { ComponentType, ReactNode } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';

  // Define content that can be a string, JSX element, or ReactNode
  export interface EventContent {
    content: string | ReactNode;
    style?: TextStyle | ViewStyle; // TextStyle for text-related elements, ViewStyle for containers
  }

  // Extend the TimelineEvent to support ReactNode and functions
  export interface TimelineEvent {
    title?: EventContent | ((style?: TextStyle) => JSX.Element); // Use 'style' singular here
    description?: EventContent;
    time?: EventContent;
    icon?: { 
      content: string | (() => JSX.Element); 
      style?: ViewStyle | TextStyle;  // Allow both ViewStyle and TextStyle for flexibility
    };
    pressAction?: () => void;
  }

  // Props for the Timeline component
  export interface TimelineProps {
    data: TimelineEvent[];
    eventStyle?: ViewStyle;
    timeContainerStyle?: ViewStyle;
    iconContainerStyle?: ViewStyle;
    lineStyle?: ViewStyle;
    contentContainerStyle?: ViewStyle;
    TimelineFooter?: ComponentType<any>;
    TimelineHeader?: ComponentType<any>;
    onEndReached?: () => void;
    onEndReachedThreshold?: number;
  }

  // Export the Timeline component
  export const Timeline: ComponentType<TimelineProps>;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions