Timeline component is one of the most popular custom components used in many e-commerce mobile applications and web applications. Timeline component is used to show a particular activity with each step on mobile screen. We have seen in many eCommerce apps to show each activity to their users like where product is packed, product is ready to be shipped, product is shipped, product is near your delivery location etc. In react native there is no inbuilt Timeline component is available but using the Custom component known as react-native-timeline-flatlist we can easily setup Timeline component in our react native app. So in this tutorial we would create React Native Timeline ListView FlatList Android iOS Component Example Tutorial. Show Timeline component in react native app.
Contents in this project React Native Timeline ListView FlatList Android iOS Component Example Tutorial:
1. Before getting started with code we have to install the react-native-timeline-flatlist package in our react native project. So Open your react native project root folder in Command Prompt or Terminal and execute below command to install the NPM package.
|
1
|
npm i react–native–timeline–flatlist —save
|
Screenshot of CMD:
Screenshot of CMD after done installation:
2. Open your projects main App.js file and import StyleSheet, View and Text component.
|
1
2
3
|
import React, {Component} from ‘react’;
import {StyleSheet, View, Text} from ‘react-native’;
|
3. Import Timeline package form react-native-timeline-flatlist.
|
1
|
import Timeline from ‘react-native-timeline-flatlist’
|
4. Creating our main export default class App extends Component. This is our main class.
|
1
2
3
4
|
export default class App extends Component {
}
|
5. Creating constructor(), Now we would make a this type class type variable named as data. Using this variable we would assign multiple type of data like time stamp, title and description. We would use this data to make the Timeline component with different values.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super()
this.data = [
{time: ’09:00′, title: ‘Event 1’, description: ‘Event 1 Description’, },
{time: ’10:45′, title: ‘Event 2’, description: ‘Event 2 Description’},
{time: ’12:00′, title: ‘Event 3’, description: ‘Event 3 Description’},
{time: ’14:00′, title: ‘Event 4’, description: ‘Event 4 Description’},
{time: ’16:30′, title: ‘Event 5’, description: ‘Event 5 Description’}
]
}
|
6. Creating render’s return block in your app, Now we would make a Root parent view.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>React Native Timeline ListView Component</Text>
</View>
);
}
|
7. Creating Timeline component in Root View component.
- data : Is used to hold the data shown in Timeline component.
- separator : Used to show a horizontal separator line between each data.
- circleSize : Used to set the Timeline circle size.
- circleColor : Used to set the timeline circle color.
- lineColor : Used to set the Timeline color.
- timeStyle : Used to set the Time stamp styling.
- style : To apply style on Timeline component.
- descriptionStyle : Used to set the timeline description text styling.
|
1
2
3
4
5
6
7
8
9
10
|
<Timeline
data={this.data}
//separator={true}
circleSize={20}
circleColor=‘#0091EA’
lineColor=‘grey’
timeStyle={{textAlign: ‘center’, backgroundColor:‘#ff9797’, color:‘white’, padding:5, borderRadius:15}}
style={styles.listStyle}
descriptionStyle={{color:‘gray’}}
/>
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
},
listStyle: {
flex: 1,
marginTop: 20,
marginLeft: 20
},
text:{
textAlign: ‘center’,
fontSize: 24,
marginTop: 20
}
});
|
9. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import React, {Component} from ‘react’;
import {StyleSheet, View, Text} from ‘react-native’;
import Timeline from ‘react-native-timeline-flatlist’
export default class App extends Component {
constructor(){
super()
this.data = [
{time: ’09:00′, title: ‘Event 1’, description: ‘Event 1 Description’, },
{time: ’10:45′, title: ‘Event 2’, description: ‘Event 2 Description’},
{time: ’12:00′, title: ‘Event 3’, description: ‘Event 3 Description’},
{time: ’14:00′, title: ‘Event 4’, description: ‘Event 4 Description’},
{time: ’16:30′, title: ‘Event 5’, description: ‘Event 5 Description’}
]
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>React Native Timeline ListView Component</Text>
<Timeline
data={this.data}
//separator={true}
circleSize={20}
circleColor=‘#0091EA’
lineColor=‘grey’
timeStyle={{textAlign: ‘center’, backgroundColor:‘#ff9797’, color:‘white’, padding:5, borderRadius:15}}
style={styles.listStyle}
descriptionStyle={{color:‘gray’}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
},
listStyle: {
flex: 1,
marginTop: 20,
marginLeft: 20
},
text:{
textAlign: ‘center’,
fontSize: 24,
marginTop: 20
}
});
|
Screenshots:
Also Read :
React Native Integrate Google Maps in Android iOS App Example Tutorial
React Native Create Custom Component with custom user define Props
React Native Simple FlatList Component Android iOS Example Tutorial
React Native Convert Text to Upper Case Lower Case on Button Click
React Native TranslateY Position Animation Android iOS Tutorial
