How to make a horizontal timeline in a React Native project? - react-native

Question

I have an array of objects. Each object has time and status. Also, I have a range of time with a specific value and I needed to display that on the timeline:
I want the result something like that
I suppose need to use "react-native-svg" and "react-native-svg-charts", but I can't understand how to make the timeline.
If you can, suggest a solution, please.

Answer 1

I've resolved this:
import React from "react";
import PropTypes from "prop-types";
import {StyleSheet, View} from "react-native";
import Icons from "react-native-vector-icons/MaterialIcons";
import {LineChart, Path} from "react-native-svg-charts";
import {ClipPath, Defs, ForeignObject, G, Rect} from "react-native-svg";
import {connect} from "react-redux";
import * as shape from "d3-shape";
import colors from "../../../styles/colors";
const TimeLine = (props) => {
// props.info.distractions - the array of red lines on the timeline (green line)
const startTime = props.info.startTs; // the start value of the timeline (GREEN line)
const endTime = props.info.endTs; // the end time value of the timeline (GREEN line)
const data = [0, 0];
const line = shape.curveBasis;
// Get coefficients to scale the array of red lines into the timeline (green line)
const getCoefficients = (distraction) => {
const wholeTime = endTime - startTime;
const dZone = distraction;
const a1 = dZone.start - startTime;
const a2 = dZone.end - endTime;
const startCoefficient = a1 / wholeTime;
const endCoefficient = a2 / wholeTime;
return {startCoefficient, endCoefficient};
};
// To render a red line on the timeline (green line)
const RenderLine = ({width, distraction, index}) => {
const {startCoefficient, endCoefficient} = getCoefficients(distraction);
return (
<ClipPath id={`clip-path-${index + 1}`}>
<Rect
x={startCoefficient * width}
y={"0"}
width={endCoefficient * width}
height={"100%"}
/>
</ClipPath>
);
};
// To render a red line on the timeline (green line)
const DistractionLine = ({line, index}) => {
return (
<G key={index}>
<Path
key={`line-${index + 1}`}
d={line}
stroke={colors.red}
strokeWidth={6}
fill={"none"}
clipPath={`url(#clip-path-${index + 1})`}
/>
</G>
);
};
// To render an icon
const ChartPoint = ({width, distraction, index}) => {
const {startCoefficient, endCoefficient} = getCoefficients(distraction);
return (
<ForeignObject
x={(startCoefficient * width + endCoefficient * width) / 2}
y={40}
width={100}
height={40}>
<Icons name={"touch-app"} color={colors.red} size={24} />
</ForeignObject>
);
};
// To render the timeline (green line)
const Clips = ({x, y, width}) => {
return (
<Defs key={"clips"}>
<ClipPath id="clip-path-0">
<Rect x={"0"} y={"0"} width={width} height={"100%"} />
</ClipPath>
{props.info.distractions.map((distraction, index) => (
<RenderLine
key={index}
index={index}
distraction={distraction}
width={width}
/>
))}
</Defs>
);
};
return (
<View style={styles.chartContainer}>
<Icons
name={"radio-button-checked"}
size={24}
color={colors.red}
style={{marginRight: -2, marginBottom: 10}}
/>
<LineChart
style={{height: 70, width: "90%"}}
data={data}
contentInset={{top: 0, bottom: 40}}
curve={line}
svg={{
stroke: colors.green,
strokeWidth: 6,
clipPath: "url(#clip-path-0)",
}}>
<Clips />
{props.info.distractions.map((distraction, index) => (
<ChartPoint
key={index}
index={index}
distraction={distraction}
/>
))}
{props.info.distractions.map((distraction, index) => (
<DistractionLine
key={index}
index={index}
distraction={distraction}
/>
))}
</LineChart>
<Icons
name={"place"}
size={24}
color={colors.red}
style={{marginLeft: -6, marginBottom: 10}}
/>
</View>
);
};
TimeLine.defaultProps = {
info: {},
};
TimeLine.propTypes = {
info: PropTypes.object,
};
const styles = StyleSheet.create({
chartContainer: {
marginTop: 20,
flexDirection: "row",
padding: 20,
paddingVertical: 20,
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center",
},
});
const mapStateToProps = (state) => {
const { infoReducer } = state;
return {
info: infoReducer.info,
};
};
export default connect(mapStateToProps)(TimeLine);