├── _config.yml
├── .gitignore
├── src
    ├── index.ts
    ├── Utils.ts
    ├── Defaults.ts
    ├── Timeline.tsx
    ├── Types.ts
    ├── Components.tsx
    └── Presets.tsx
├── .babelrc
├── .eslintrc
├── .prettierrc
├── examples
    ├── simple.md
    └── custom.md
├── tsconfig.json
├── CHANGELOG.md
├── LICENSE
├── package.json
├── README.md
└── docs
    ├── timeline.md
    └── components.md


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | lib
5 | .vscode
6 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 | 
3 | export { default } from './Timeline';
4 | 


--------------------------------------------------------------------------------
/src/Utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * @format
3 |  **/
4 | 
5 | export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": [
3 |     "transform-class-properties"
4 |   ],
5 |   "presets": [
6 |     "flow",
7 |     "react-native"
8 |   ]
9 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "universe/native",
 3 |   "plugins": ["prettier"],
 4 |   "rules": {
 5 |     "prettier/prettier": "error"
 6 |   },
 7 |   "parserOptions": {
 8 |     "sourceType": "module"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 100,
 3 |   "tabWidth": 2,
 4 |   "singleQuote": true,
 5 |   "jsxBracketSameLine": true,
 6 |   "trailingComma": "none",
 7 |   "semicolons": true,
 8 |   "insertPragma": true
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/Defaults.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * @format
3 |  **/
4 | 
5 | export const DEFAULT_LINE_WIDTH = 2;
6 | export const DEFAULT_LINE_COLOR = '#000';
7 | export const DEFAULT_CIRCLE_COLOR = '#000';
8 | export const DEFAULT_DOT_COLOR = '#FFF';
9 | 


--------------------------------------------------------------------------------
/examples/simple.md:
--------------------------------------------------------------------------------
 1 | <!-- @format -->
 2 | 
 3 | You'll need the following imports
 4 | 
 5 | ```
 6 | import Timeline from 'react-native-timeline-feed';
 7 | import { Preset } from 'react-native-timeline-feed/lib/Types';
 8 | ```
 9 | 
10 | ### Minimum
11 | 
12 | ```
13 | <Timeline data={data} />
14 | ```
15 | 
16 | ### Presets
17 | 
18 | ```
19 | <Timeline
20 |   data={data}
21 |   preset={Preset.SingleColumnLeft} />
22 | ```
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "declaration": true,
 4 |     "outDir": "./lib",
 5 |     "strict": true,
 6 |     "jsx": "react-native",
 7 |     "target": "es6",
 8 |     "module": "es6",
 9 |     "moduleResolution": "node",
10 |     "allowSyntheticDefaultImports": true,
11 |     "noImplicitAny": true,
12 |     "experimentalDecorators": true,
13 |     "preserveConstEnums": true,
14 |     "sourceMap": true,
15 |     "strictNullChecks": true,
16 |     "lib": ["es6"],
17 |     "typeRoots": ["./node_modules/@types", "./@types"]
18 |   },
19 |   "include": ["src"],
20 |   "exclude": ["node_modules"]
21 | }
22 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | <!-- @format -->
 2 | 
 3 | # Changelog
 4 | 
 5 | ## [2.0.0]
 6 | 
 7 | _[BREAKING]_
 8 | 
 9 | - Complete rebuild of the timeline (use V1.x.x if you're migrating)
10 |   - Replaced Flow with TypeScript
11 | 
12 | ## [1.0.1]
13 | 
14 | ### Changes: existing functionality that is now different
15 | 
16 | - item properties (i.e. lineColor, lineWidth, circleSize, etc.) now take preference over timeline properties.
17 |   - i.e. `const lineColorToUse = item.lineColor || lineColor || DEFAULT_LINE_COLOR`
18 | 
19 | ## [1.0.0]
20 | 
21 | ### Changes: existing functionality that is now different
22 | 
23 | _[BREAKING]_
24 | 
25 | - Replace `<Image>` Tag with provided component (item.icon or icon) in `renderCircle()` ([a428c3c](https://github.com/Johan-dutoit/react-native-timeline-feed/commit/a428c3c) & [175b8e2](https://github.com/Johan-dutoit/react-native-timeline-feed/commit/175b8e2) by [@creambyemute](https://github.com/creambyemute))
26 |   - i.e. You no longer pass in an image source as the icon
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Johan du Toit
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-timeline-feed",
 3 |   "version": "2.0.0",
 4 |   "description": "Timeline component for React Native",
 5 |   "main": "lib/index.js",
 6 |   "types": "lib/index.d.ts",
 7 |   "files": [
 8 |     "lib",
 9 |     "LICENSE",
10 |     "Readme.md",
11 |     "CHANGELOG.md"
12 |   ],
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/Johan-dutoit/react-native-timeline-feed.git"
16 |   },
17 |   "keywords": [
18 |     "react-native",
19 |     "timeline",
20 |     "listview",
21 |     "schedule",
22 |     "react native component",
23 |     "ios",
24 |     "android",
25 |     "component",
26 |     "flatlist",
27 |     "flat list"
28 |   ],
29 |   "author": "Johan du Toit (https://github.com/Johan-dutoit)",
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/Johan-dutoit/react-native-timeline-feed/issues"
33 |   },
34 |   "homepage": "https://github.com/Johan-dutoit/react-native-timeline-feed#readme",
35 |   "scripts": {
36 |     "build": "rm -rf lib/ && tsc",
37 |     "prepare": "npm run build"
38 |   },
39 |   "devDependencies": {
40 |     "@types/jest": "^24.0.12",
41 |     "@types/react": "^16.8.15",
42 |     "@types/react-native": "^0.57.51",
43 |     "react": "^16.8.6",
44 |     "react-native": "^0.59.5",
45 |     "typescript": "^3.4.5"
46 |   },
47 |   "peerDependencies": {
48 |     "react-native": ">= 0.44"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/examples/custom.md:
--------------------------------------------------------------------------------
 1 | <!-- @format -->
 2 | 
 3 | You'll need the following imports
 4 | 
 5 | ```
 6 | import Timeline from 'react-native-timeline-feed';
 7 | import { Preset } from 'react-native-timeline-feed/lib/Types';
 8 | ```
 9 | 
10 | ### Using statics on Timeline
11 | 
12 | ```
13 | <Timeline.Row>
14 |   <Timeline.Time>{item.time}</Timeline.Time>
15 |   <Timeline.VerticalSeparator>
16 |     {!hideCircle && (
17 |       <Timeline.Circle color="black">
18 |         <Timeline.Dot color="white" />
19 |       </Timeline.Circle>
20 |     )}
21 |     <Timeline.Line color={item.lineColor} width={3} />
22 |   </Timeline.VerticalSeparator>
23 |   <Timeline.Event style={{ marginBottom: 16 }}>
24 |     <Text>{item.title}</Text>
25 |     <Text>{item.description}</Text>
26 |   </Timeline.Event>
27 | </Timeline.Row>
28 | ```
29 | 
30 | ### Using named imports
31 | 
32 | ```
33 | import Timeline, { Row, Time, VerticalSeparator, Circle, Dot, Line, Event } from 'react-native-timeline-feed';
34 | ```
35 | 
36 | The following will render a line on the left, with the event body next to it and the time on the right.
37 | 
38 | ```
39 | <Row>
40 |   <VerticalSeparator>
41 |     {!hideCircle && (
42 |       <Circle>
43 |         <Dot />
44 |       </Circle>
45 |     )}
46 |     <Line color={item.lineColor}/>
47 |   </VerticalSeparator>
48 |   <Event style={{ marginBottom: 16 }}>
49 |     <Text>{item.title}</Text>
50 |     <Text>{item.description}</Text>
51 |   </Event>
52 |   <Time>{item.time}</Timeline.Time>
53 | </Row>
54 | ```
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!-- @format -->
 2 | 
 3 | # React Native Timeline feed
 4 | 
 5 | Highly customizable Timeline component for React Native (Android and iOS) and works with Expo.
 6 | 
 7 | ![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)
 8 | [![NPM Version](https://img.shields.io/npm/v/react-native-timeline-feed.svg?style=flat)](https://www.npmjs.com/package/react-native-timeline-feed)
 9 | 
10 | [![NPM Downloads](https://img.shields.io/npm/dt/react-native-timeline-feed.svg?style=flat)](https://www.npmjs.com/package/react-native-timeline-feed)
11 | 
12 | # Migrating from react-native-timeline-listview
13 | 
14 | If you're coming from `react-native-listview` and simply want to use a `FlatList` instead, then use the latest [v1.x.x](https://github.com/Johan-dutoit/react-native-timeline-feed/tree/1.0.1) package instead. It'll be the path of least resistance.
15 | 
16 | # Demo
17 | 
18 | A demo can be found on [expo](https://snack.expo.io/@johan-dev/react-native-timeline-feed@2.0.1).
19 | 
20 | # Getting Started
21 | 
22 | `yarn add react-native-timeline-feed` or your favorite way...
23 | 
24 | You'll need the following imports
25 | 
26 | ```
27 | import Timeline from 'react-native-timeline-feed';
28 | 
29 | // only needed if you're going to select a non-default preset
30 | import { Preset } from 'react-native-timeline-feed/lib/Types';
31 | ```
32 | 
33 | ### Minimum
34 | 
35 | ```
36 | <Timeline data={data} />
37 | ```
38 | 
39 | or one of the presets
40 | 
41 | ```
42 | <Timeline
43 |   data={data}
44 |   preset={Preset.SingleColumnRight} />
45 | ```
46 | 
47 | ## Configuration
48 | 
49 | ```
50 | Note. Color/Width specificity is as follows (highest priority to lowest): ItemProps -> TimelineProps -> defaults.
51 | ```
52 | 
53 | [`<Timeline />` Component API](docs/timeline.md)
54 | 
55 | [Other Component APIs](docs/components.md)
56 | 
57 | ## Other Examples
58 | 
59 | [Custom Setup](examples/custom.md)
60 | 


--------------------------------------------------------------------------------
/src/Timeline.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @format
 3 |  **/
 4 | 
 5 | import * as React from 'react';
 6 | import { FlatList, ListRenderItemInfo } from 'react-native';
 7 | 
 8 | import {
 9 |   Row,
10 |   Time,
11 |   Event,
12 |   Title,
13 |   Description,
14 |   VerticalSeparator,
15 |   Line,
16 |   Circle,
17 |   Dot
18 | } from './Components';
19 | 
20 | import {
21 |   DEFAULT_CIRCLE_COLOR,
22 |   DEFAULT_DOT_COLOR,
23 |   DEFAULT_LINE_COLOR,
24 |   DEFAULT_LINE_WIDTH
25 | } from './Defaults';
26 | 
27 | import Presets from './Presets';
28 | 
29 | import { TimelineProps, Preset, ItemProps, RenderProps } from './Types';
30 | 
31 | class Timeline extends React.PureComponent<TimelineProps> {
32 |   static defaultProps = {
33 |     lineWidth: DEFAULT_LINE_WIDTH,
34 |     lineColor: DEFAULT_LINE_COLOR,
35 |     circleColor: DEFAULT_CIRCLE_COLOR,
36 |     dotColor: DEFAULT_DOT_COLOR,
37 |     endWithCircle: false,
38 |     preset: Preset.SingleColumnLeft
39 |   };
40 | 
41 |   static Row = Row;
42 |   static Time = Time;
43 |   static Event = Event;
44 |   static Title = Title;
45 |   static Description = Description;
46 |   static VerticalSeparator = VerticalSeparator;
47 |   static Line = Line;
48 |   static Circle = Circle;
49 |   static Dot = Dot;
50 | 
51 |   render() {
52 |     const { ...otherProps } = this.props;
53 | 
54 |     return (
55 |       <FlatList
56 |         automaticallyAdjustContentInsets={false}
57 |         {...otherProps}
58 |         renderItem={this.renderItem}
59 |       />
60 |     );
61 |   }
62 | 
63 |   renderItem = ({ item, index }: ListRenderItemInfo<ItemProps>) => {
64 |     const { renderItem, preset, data } = this.props;
65 |     const isLast = data.length - 1 === index;
66 | 
67 |     const renderProps: RenderProps = {
68 |       item,
69 |       index,
70 |       isLast,
71 |       props: this.props
72 |     };
73 | 
74 |     if (renderItem) {
75 |       return renderItem(renderProps);
76 |     }
77 | 
78 |     const Component = Presets[preset];
79 |     if (Component == null) {
80 |       console.warn(`Invalid preset (${preset}) specified. See 'Presets' for more options.`);
81 |       return null;
82 |     }
83 | 
84 |     return <Component {...renderProps} />;
85 |   };
86 | }
87 | 
88 | export default Timeline;
89 | 


--------------------------------------------------------------------------------
/src/Types.ts:
--------------------------------------------------------------------------------
  1 | /** @format */
  2 | 
  3 | import * as React from 'react';
  4 | import { ViewStyle, TextStyle, FlatListProps } from 'react-native';
  5 | 
  6 | import { Omit } from './Utils';
  7 | 
  8 | export interface ItemProps {
  9 |   title?: string;
 10 |   time?: string;
 11 |   description?: string;
 12 |   lineWidth?: number;
 13 |   lineColor?: string;
 14 |   circleColor?: string;
 15 |   dotColor?: string;
 16 | 
 17 |   //Allow any custom props to also be included
 18 |   [x: string]: any;
 19 | }
 20 | 
 21 | export interface RenderProps {
 22 |   item: ItemProps;
 23 |   index: number;
 24 |   isLast: boolean;
 25 |   props: TimelineProps;
 26 | }
 27 | 
 28 | type LocalFlatListProps = Omit<FlatListProps<ItemProps>, 'renderItem'>;
 29 | 
 30 | export interface TimelineProps extends LocalFlatListProps {
 31 |   lineWidth: number;
 32 |   lineColor: string;
 33 |   circleColor: string;
 34 |   dotColor: string;
 35 |   endWithCircle: boolean;
 36 |   preset: Preset;
 37 |   data: ReadonlyArray<ItemProps>;
 38 |   renderItem?: (props: RenderProps) => React.ReactElement<any>;
 39 | 
 40 |   // !! WIP
 41 | 
 42 |   rowStyle?: ViewStyle;
 43 |   timeStyle?: ViewStyle;
 44 |   timeTextStyle?: TextStyle;
 45 |   dotStyle?: ViewStyle;
 46 |   lineContainerStyle?: ViewStyle;
 47 |   circleStyle?: ViewStyle;
 48 |   lineStyle?: ViewStyle;
 49 |   eventStyle?: ViewStyle;
 50 |   titleTextStyle?: TextStyle;
 51 |   descriptionTextStyle?: TextStyle;
 52 | }
 53 | 
 54 | export interface RowProps {
 55 |   children: React.ReactNode;
 56 |   style?: ViewStyle;
 57 | }
 58 | 
 59 | export interface TimeProps {
 60 |   children?: string;
 61 |   style?: ViewStyle;
 62 |   textStyle?: TextStyle;
 63 | }
 64 | 
 65 | export interface EventProps {
 66 |   children?: React.ReactNode;
 67 |   style?: ViewStyle;
 68 | }
 69 | 
 70 | export interface TitleProps {
 71 |   children?: string;
 72 |   textStyle?: TextStyle;
 73 | }
 74 | 
 75 | export interface DescriptionProps {
 76 |   children?: string;
 77 |   textStyle?: TextStyle;
 78 | }
 79 | 
 80 | export interface VerticalProps {
 81 |   children: React.ReactNode;
 82 |   style?: ViewStyle;
 83 | }
 84 | 
 85 | export interface LineProps {
 86 |   width: number;
 87 |   color: string;
 88 |   style?: ViewStyle;
 89 | }
 90 | 
 91 | export interface DotProps {
 92 |   color: string;
 93 |   style?: ViewStyle;
 94 | }
 95 | 
 96 | export interface CircleProps {
 97 |   color: string;
 98 |   children?: React.ReactNode;
 99 |   style?: ViewStyle;
100 | }
101 | 
102 | export enum Preset {
103 |   'SingleColumnLeft',
104 |   'SingleColumnRight'
105 | }
106 | 


--------------------------------------------------------------------------------
/docs/timeline.md:
--------------------------------------------------------------------------------
 1 | <!-- @format -->
 2 | 
 3 | #### TimelineProps
 4 | 
 5 | All [FlatList](https://facebook.github.io/react-native/docs/flatlist) Props (however renderItem is replaced with our own)
 6 | 
 7 | | Property       | Type                                              | Default                   |
 8 | | -------------- | ------------------------------------------------- | ------------------------- |
 9 | | lineWidth?     | number                                            | `2`                       |
10 | | lineColor?     | string                                            | `#000`                    |
11 | | circleColor?   | string                                            | `#000`                    |
12 | | dotColor?      | string                                            | `#FFF`                    |
13 | | endWithCircle? | boolean                                           | `false`                   |
14 | | preset?        | Preset                                            | `Preset.SingleColumnLeft` |
15 | | renderItem?    | `(props: RenderProps) => React.ReactElement<any>` | undefined                 |
16 | 
17 | Additional Props for styling when using a preset
18 | 
19 | | Property              | Type      | Default   | Description                                                               |
20 | | --------------------- | --------- | --------- | ------------------------------------------------------------------------- |
21 | | rowStyle?             | ViewStyle | undefined | Container for the entire row (last dot has it's own row)                  |
22 | | timeStyle?            | ViewStyle | undefined | Container for the time                                                    |
23 | | timeTextStyle?        | TextStyle | undefined | Time text                                                                 |
24 | | lineContainerStyle?   | ViewStyle | undefined | Container for the vertical separator (consists of the line, circle & dot) |
25 | | circleStyle?          | ViewStyle | undefined | Circle for each row                                                       |
26 | | dotStyle?             | ViewStyle | undefined | Dot within the circle                                                     |
27 | | lineStyle?            | ViewStyle | undefined | Vertical line                                                             |
28 | | eventStyle?           | ViewStyle | undefined | Event container (consists of the title & description)                     |
29 | | titleTextStyle?       | TextStyle | undefined | Title text                                                                |
30 | | descriptionTextStyle? | TextStyle | undefined | description text                                                          |
31 | 


--------------------------------------------------------------------------------
/src/Components.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @format
  3 |  **/
  4 | 
  5 | import * as React from 'react';
  6 | import { StyleSheet, View, Text } from 'react-native';
  7 | 
  8 | import {
  9 |   RowProps,
 10 |   TimeProps,
 11 |   EventProps,
 12 |   TitleProps,
 13 |   DescriptionProps,
 14 |   VerticalProps,
 15 |   LineProps,
 16 |   CircleProps,
 17 |   DotProps
 18 | } from './Types';
 19 | 
 20 | import {
 21 |   DEFAULT_LINE_WIDTH,
 22 |   DEFAULT_LINE_COLOR,
 23 |   DEFAULT_CIRCLE_COLOR,
 24 |   DEFAULT_DOT_COLOR
 25 | } from './Defaults';
 26 | 
 27 | export function Row({ children, style }: RowProps) {
 28 |   return <View style={[styles.rowContainer, style]}>{children}</View>;
 29 | }
 30 | 
 31 | export function Time({ children, style, textStyle }: TimeProps) {
 32 |   return (
 33 |     <View style={[styles.timeContainer, style]}>
 34 |       <Text style={textStyle}>{children}</Text>
 35 |     </View>
 36 |   );
 37 | }
 38 | 
 39 | export function Event({ children, style }: EventProps) {
 40 |   return <View style={[styles.eventContainer, style]}>{children}</View>;
 41 | }
 42 | 
 43 | export function Title({ children, textStyle }: TitleProps) {
 44 |   return (
 45 |     <>
 46 |       <Text style={[styles.titleText, textStyle]}>{children}</Text>
 47 |     </>
 48 |   );
 49 | }
 50 | 
 51 | export function Description({ children, textStyle }: DescriptionProps) {
 52 |   return (
 53 |     <>
 54 |       <Text style={[styles.descriptionText, textStyle]}>{children}</Text>
 55 |     </>
 56 |   );
 57 | }
 58 | 
 59 | export function VerticalSeparator({ children, style }: VerticalProps) {
 60 |   return <View style={[styles.separatorContainer, style]}>{children}</View>;
 61 | }
 62 | 
 63 | export function Line({ width = DEFAULT_LINE_WIDTH, color = DEFAULT_LINE_COLOR, style }: LineProps) {
 64 |   return <View style={[styles.line, style, { width: width, backgroundColor: color }]} />;
 65 | }
 66 | 
 67 | export function Circle({ color = DEFAULT_CIRCLE_COLOR, children, style }: CircleProps) {
 68 |   return (
 69 |     <View style={[styles.circleContainer, style, { backgroundColor: color }]}>{children}</View>
 70 |   );
 71 | }
 72 | 
 73 | export function Dot({ color = DEFAULT_DOT_COLOR, style }: DotProps) {
 74 |   return <View style={[styles.dotContainer, style, { backgroundColor: color }]} />;
 75 | }
 76 | 
 77 | const styles = StyleSheet.create({
 78 |   rowContainer: {
 79 |     flex: 12,
 80 |     flexDirection: 'row'
 81 |   },
 82 |   timeContainer: {
 83 |     flex: 0.1,
 84 |     minWidth: 45
 85 |   },
 86 |   separatorContainer: {
 87 |     minHeight: 60,
 88 |     alignItems: 'center'
 89 |   },
 90 |   line: {
 91 |     flex: 1,
 92 |     backgroundColor: 'black',
 93 |     marginHorizontal: 8
 94 |   },
 95 |   circleContainer: {
 96 |     width: 16,
 97 |     height: 16,
 98 |     borderRadius: 8,
 99 |     alignItems: 'center',
100 |     justifyContent: 'center'
101 |   },
102 |   dotContainer: {
103 |     width: 8,
104 |     height: 8,
105 |     borderRadius: 4
106 |   },
107 |   eventContainer: {
108 |     flex: 12
109 |   },
110 |   titleText: {
111 |     fontSize: 16,
112 |     fontWeight: 'bold'
113 |   },
114 |   descriptionText: {
115 |     fontSize: 14,
116 |     fontWeight: 'normal'
117 |   }
118 | });
119 | 


--------------------------------------------------------------------------------
/docs/components.md:
--------------------------------------------------------------------------------
 1 | <!-- @format -->
 2 | 
 3 | #### ItemProps
 4 | 
 5 | | Property     | Type   | Default   |
 6 | | ------------ | ------ | --------- |
 7 | | title?       | string | undefined |
 8 | | time?        | string | undefined |
 9 | | description? | string | undefined |
10 | | lineWidth?   | number | `2`       |
11 | | lineColor?   | string | `#000`    |
12 | | circleColor? | string | `#000`    |
13 | | dotColor?    | string | `#FFF`    |
14 | 
15 | #### Preset
16 | 
17 | | Preset            | Description            |
18 | | ----------------- | ---------------------- |
19 | | SingleColumnLeft  | Left aligned timeline  |
20 | | SingleColumnRight | Right aligned timeline |
21 | 
22 | ### Configuration for custom timeline
23 | 
24 | #### RenderProps
25 | 
26 | | Property | Type          | Description                        |
27 | | -------- | ------------- | ---------------------------------- |
28 | | item     | ItemProps     | Props of the item                  |
29 | | index    | number        | Position of the item               |
30 | | isLast   | ItemProps     | Is the item last                   |
31 | | Props    | TimelineProps | All props passed into the timeline |
32 | 
33 | #### RowProps
34 | 
35 | | Property | Type            | Default   |
36 | | -------- | --------------- | --------- |
37 | | children | React.ReactNode | undefined |
38 | | style?   | ViewStyle       | undefined |
39 | 
40 | #### TimeProps
41 | 
42 | | Property   | Type      | Default   |
43 | | ---------- | --------- | --------- |
44 | | children?  | string    | undefined |
45 | | style?     | ViewStyle | undefined |
46 | | TextStyle? | TextStyle | undefined |
47 | 
48 | #### EventProps
49 | 
50 | | Property  | Type            | Default   |
51 | | --------- | --------------- | --------- |
52 | | children? | React.ReactNode | undefined |
53 | | style?    | ViewStyle       | undefined |
54 | 
55 | #### TitleProps
56 | 
57 | | Property   | Type            | Default   |
58 | | ---------- | --------------- | --------- |
59 | | children?  | React.ReactNode | undefined |
60 | | textStyle? | TextStyle       | undefined |
61 | 
62 | #### DescriptionProps
63 | 
64 | | Property   | Type            | Default   |
65 | | ---------- | --------------- | --------- |
66 | | children?  | React.ReactNode | undefined |
67 | | textStyle? | TextStyle       | undefined |
68 | 
69 | #### VerticalProps
70 | 
71 | | Property  | Type            | Default   |
72 | | --------- | --------------- | --------- |
73 | | children? | React.ReactNode | undefined |
74 | | style?    | ViewStyle       | undefined |
75 | 
76 | #### LineProps
77 | 
78 | | Property | Type      | Default   |
79 | | -------- | --------- | --------- |
80 | | width    | number    | `2`       |
81 | | color    | string    | `#000`    |
82 | | style?   | ViewStyle | undefined |
83 | 
84 | #### DotProps
85 | 
86 | | Property | Type      | Default   |
87 | | -------- | --------- | --------- |
88 | | color    | string    | `#FFF`    |
89 | | style?   | ViewStyle | undefined |
90 | 
91 | #### CircleProps
92 | 
93 | | Property  | Type            | Default   |
94 | | --------- | --------------- | --------- |
95 | | color     | string          | `#000`    |
96 | | children? | React.ReactNode | undefined |
97 | | style?    | ViewStyle       | undefined |
98 | 


--------------------------------------------------------------------------------
/src/Presets.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @format
  3 |  **/
  4 | 
  5 | import * as React from 'react';
  6 | import { StyleSheet } from 'react-native';
  7 | 
  8 | import { RenderProps, Preset } from './Types';
  9 | 
 10 | import {
 11 |   DEFAULT_CIRCLE_COLOR,
 12 |   DEFAULT_DOT_COLOR,
 13 |   DEFAULT_LINE_COLOR,
 14 |   DEFAULT_LINE_WIDTH
 15 | } from './Defaults';
 16 | 
 17 | import {
 18 |   Row,
 19 |   Time,
 20 |   Event,
 21 |   Title,
 22 |   Description,
 23 |   VerticalSeparator,
 24 |   Line,
 25 |   Circle,
 26 |   Dot
 27 | } from './Components';
 28 | 
 29 | const getItemProps = ({ item, props }: RenderProps) => {
 30 |   const lineColor = item.lineColor || props.lineColor || DEFAULT_LINE_COLOR;
 31 |   const lineWidth = item.lineWidth || props.lineWidth || DEFAULT_LINE_WIDTH;
 32 | 
 33 |   const circleColor = item.circleColor || props.circleColor || DEFAULT_CIRCLE_COLOR;
 34 | 
 35 |   const dotColor = item.dotColor || props.dotColor || DEFAULT_DOT_COLOR;
 36 | 
 37 |   return {
 38 |     lineColor,
 39 |     lineWidth,
 40 |     circleColor,
 41 |     dotColor
 42 |   };
 43 | };
 44 | 
 45 | export const SingleColumnLeft = ({ item, index, isLast, props }: RenderProps) => {
 46 |   const { lineColor, lineWidth, circleColor, dotColor } = getItemProps({
 47 |     item,
 48 |     index,
 49 |     isLast,
 50 |     props
 51 |   });
 52 | 
 53 |   const {
 54 |     endWithCircle,
 55 |     rowStyle,
 56 |     timeStyle,
 57 |     timeTextStyle,
 58 |     lineContainerStyle,
 59 |     circleStyle,
 60 |     dotStyle,
 61 |     lineStyle,
 62 |     eventStyle,
 63 |     titleTextStyle,
 64 |     descriptionTextStyle
 65 |   } = props;
 66 | 
 67 |   return (
 68 |     <React.Fragment>
 69 |       <Row style={rowStyle}>
 70 |         <Time style={timeStyle} textStyle={timeTextStyle}>
 71 |           {item.time}
 72 |         </Time>
 73 |         <VerticalSeparator style={lineContainerStyle}>
 74 |           <Circle style={circleStyle} color={circleColor}>
 75 |             <Dot style={dotStyle} color={dotColor} />
 76 |           </Circle>
 77 |           <Line style={lineStyle} color={lineColor} width={lineWidth} />
 78 |         </VerticalSeparator>
 79 |         <Event style={eventStyle}>
 80 |           <Title textStyle={titleTextStyle}>{item.title}</Title>
 81 |           <Description textStyle={descriptionTextStyle}>{item.description}</Description>
 82 |         </Event>
 83 |       </Row>
 84 |       {isLast && endWithCircle && (
 85 |         <Row key={`${index}_last`} style={rowStyle}>
 86 |           <Time />
 87 |           <VerticalSeparator>
 88 |             <Circle style={circleStyle} color={circleColor}>
 89 |               <Dot style={dotStyle} color={dotColor} />
 90 |             </Circle>
 91 |           </VerticalSeparator>
 92 |           <Event />
 93 |         </Row>
 94 |       )}
 95 |     </React.Fragment>
 96 |   );
 97 | };
 98 | 
 99 | export const SingleColumnRight = ({ item, index, isLast, props }: RenderProps) => {
100 |   const { lineColor, lineWidth, circleColor, dotColor } = getItemProps({
101 |     item,
102 |     index,
103 |     isLast,
104 |     props
105 |   });
106 | 
107 |   const {
108 |     endWithCircle,
109 |     rowStyle,
110 |     timeStyle,
111 |     timeTextStyle,
112 |     lineContainerStyle,
113 |     circleStyle,
114 |     dotStyle,
115 |     lineStyle,
116 |     eventStyle,
117 |     titleTextStyle,
118 |     descriptionTextStyle
119 |   } = props;
120 | 
121 |   return (
122 |     <React.Fragment>
123 |       <Row style={rowStyle}>
124 |         <Event style={{ ...eventStyle, ...styles.rightAlign }}>
125 |           <Title textStyle={titleTextStyle}>{item.title}</Title>
126 |           <Description textStyle={descriptionTextStyle}>{item.description}</Description>
127 |         </Event>
128 |         <VerticalSeparator style={lineContainerStyle}>
129 |           <Circle style={circleStyle} color={circleColor}>
130 |             <Dot style={dotStyle} color={dotColor} />
131 |           </Circle>
132 |           <Line style={lineStyle} color={lineColor} width={lineWidth} />
133 |         </VerticalSeparator>
134 |         <Time style={timeStyle} textStyle={timeTextStyle}>
135 |           {item.time}
136 |         </Time>
137 |       </Row>
138 |       {isLast && endWithCircle && (
139 |         <Row key={`${index}_last`} style={rowStyle}>
140 |           <Event />
141 |           <VerticalSeparator>
142 |             <Circle style={circleStyle} color={circleColor}>
143 |               <Dot style={dotStyle} color={dotColor} />
144 |             </Circle>
145 |           </VerticalSeparator>
146 |           <Time />
147 |         </Row>
148 |       )}
149 |     </React.Fragment>
150 |   );
151 | };
152 | 
153 | /*
154 | if (index % 2 === 0) {
155 |   return (
156 |     <Timeline.Row key={index}>
157 |       <Timeline.Time {...renderProps} style={styles.time} />
158 |       <Timeline.VerticalSeparator {...renderProps}>
159 |         <Timeline.Line {...renderProps} />
160 |         <Timeline.Circle {...renderProps}>
161 |           <Timeline.Dot {...renderProps} />
162 |         </Timeline.Circle>
163 |       </Timeline.VerticalSeparator>
164 |       <Timeline.Event {...renderProps} style={styles.event}>
165 |         <Timeline.Title {...renderProps} />
166 |         <Timeline.Description {...renderProps} />
167 |       </Timeline.Event>
168 |     </Timeline.Row>
169 |   );
170 | } else {
171 |   return (
172 |     <Timeline.Row key={index}>
173 |       <Timeline.Event {...renderProps} style={styles.event}>
174 |         <Timeline.Title {...renderProps} />
175 |         <Timeline.Description {...renderProps} />
176 |       </Timeline.Event>
177 |       <Timeline.VerticalSeparator {...renderProps} >
178 |         <Timeline.Line {...renderProps} />
179 |         <Timeline.Circle {...renderProps}>
180 |           <Timeline.Dot {...renderProps} />
181 |         </Timeline.Circle>
182 |       </Timeline.VerticalSeparator>
183 |       <Timeline.Time {...renderProps} style={styles.time} />
184 |     </Timeline.Row>
185 |   );
186 | }
187 | */
188 | 
189 | const styles = StyleSheet.create({
190 |   rightAlign: {
191 |     alignItems: 'flex-end'
192 |   },
193 |   leftAlign: {
194 |     alignItems: 'flex-start'
195 |   }
196 | });
197 | 
198 | export default {
199 |   [Preset.SingleColumnLeft]: SingleColumnLeft,
200 |   [Preset.SingleColumnRight]: SingleColumnRight
201 | };
202 | 


--------------------------------------------------------------------------------