Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1ffe590

Browse files
auserauser
committed
Added ordering example
1 parent eededca commit 1ffe590

File tree

5 files changed

+288
-0
lines changed

5 files changed

+288
-0
lines changed

‎app/utils/getColor.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const colors = {
2+
'googleBlue100': {
3+
'color': '#c6dafc'
4+
},
5+
'googleBlue300': {
6+
'color': '#7baaf7'
7+
},
8+
'googleBlue500': {
9+
'color': '#4285f4'
10+
},
11+
'googleBlue700': {
12+
'color': '#3367d6'
13+
}
14+
}
15+
16+
const PRIMARY = 'googleBlue'
17+
18+
// helper function to get colors
19+
export function getColor(string) {
20+
if (string) {
21+
if (string.indexOf('#') > -1 || string.indexOf('rgba') > -1
22+
|| string.indexOf('rgb') > -1) {
23+
return string
24+
}
25+
if (colors[string]) {
26+
return colors[string].color
27+
}
28+
if (colors[`${string}500`]) {
29+
return colors[`${string}500`].color
30+
}
31+
}
32+
return colors[`${PRIMARY}500`].color
33+
}

‎app/views/Database/Demos/Ordering.js

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/**
2+
* the universal timeline
3+
*/
4+
5+
import React, { Component } from 'react'
6+
import {
7+
Text,
8+
View,
9+
StyleSheet,
10+
ScrollView,
11+
LayoutAnimation,
12+
Platform,
13+
UIManager,
14+
RefreshControl
15+
} from 'react-native'
16+
import _ from 'lodash'
17+
import moment from 'moment'
18+
19+
import { getColor } from '../../../utils/getColor'
20+
import Post from '../components/Post'
21+
22+
// Make a common query
23+
const firebaseRefName = 'posts/';
24+
const query = (firestack, ordering='first') => {
25+
let ref = firestack.database
26+
.ref(firebaseRefName)
27+
.orderByChild('timestamp');
28+
29+
if (ordering === 'first') {
30+
ref = ref.limitToFirst(3)
31+
} else {
32+
ref = ref.limitToLast(3)
33+
}
34+
return ref.once('value');
35+
}
36+
37+
const getPostsFromSnapshot = (snapshot) => {
38+
// Trick for getting ordering
39+
return snapshot.reverseMap(i => i);
40+
}
41+
42+
class Timeline extends Component {
43+
constructor(props) {
44+
super(props)
45+
46+
if (Platform.OS === 'android') {
47+
UIManager.setLayoutAnimationEnabledExperimental(true)
48+
}
49+
50+
this.state = {
51+
isRefreshing: false,
52+
updateNotification: null,
53+
posts: []
54+
}
55+
}
56+
57+
componentDidMount() {
58+
const {firestack} = this.props;
59+
60+
query(firestack, 'last')
61+
.then((snapshot) => {
62+
this.setState({
63+
posts: getPostsFromSnapshot(snapshot)
64+
})
65+
})
66+
.catch((error) => {
67+
console.error(error);
68+
})
69+
setTimeout(() => {
70+
this.setState({ updateNotification: 'Pull to refresh...' })
71+
}, 1000)
72+
}
73+
74+
componentWillUnmount() {
75+
this.props.firestack.database.ref(firebaseRefName).off();
76+
}
77+
78+
componentDidUpdate() {
79+
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)
80+
}
81+
82+
_onRefresh = () => {
83+
const {firestack} = this.props;
84+
this.setState({ isRefreshing: true })
85+
query(firestack, 'last')
86+
.then((snapshot) => {
87+
// this.props.savePosts(snapshot.val())
88+
this.setState({
89+
isRefreshing: false,
90+
updateNotification: null,
91+
posts: getPostsFromSnapshot(snapshot)
92+
})
93+
})
94+
}
95+
96+
render() {
97+
const notify = this.state.updateNotification ?
98+
<Text style={styles.updateNotificationStyle}>
99+
{this.state.updateNotification}
100+
</Text>
101+
: null
102+
103+
const view = this.state.posts ?
104+
<ScrollView
105+
refreshControl={
106+
<RefreshControl
107+
refreshing={this.state.isRefreshing}
108+
onRefresh={this._onRefresh.bind(this)}
109+
tintColor="#ff0000"
110+
title="Loading..."
111+
titleColor="#00ff00"
112+
colors={[getColor()]}
113+
progressBackgroundColor={getColor('#ffffff')}
114+
/>
115+
}>
116+
{notify}
117+
{this._renderPosts()}
118+
</ScrollView>
119+
:
120+
<ScrollView
121+
refreshControl={
122+
<RefreshControl
123+
refreshing={this.state.isRefreshing}
124+
onRefresh={this._onRefresh.bind(this)}
125+
tintColor="#ff0000"
126+
title="Loading..."
127+
titleColor="#00ff00"
128+
colors={[getColor()]}
129+
progressBackgroundColor={getColor('#ffffff')}
130+
/>
131+
}>
132+
<View style={styles.waitView}>
133+
<Text>Nothing there yet.</Text>
134+
</View>
135+
</ScrollView>
136+
137+
return (
138+
<View style={styles.container}>
139+
{view}
140+
</View>
141+
)
142+
}
143+
144+
_renderPosts = () => {
145+
const postArray = []
146+
_.forEach(this.state.posts, (value, index) => {
147+
const timestamp = value.time
148+
//const timestamp = value.timestamp
149+
const timeString = moment(timestamp).fromNow()
150+
postArray.push(
151+
<Post
152+
postTitle={value.title}
153+
posterName={value.name}
154+
postTime={timeString}
155+
postContent={value.text}
156+
key={index}
157+
navigator={this.props.navigator}
158+
/>
159+
)
160+
})
161+
//_.reverse(postArray)
162+
return postArray
163+
}
164+
}
165+
166+
const styles = StyleSheet.create({
167+
container: {
168+
flex: 1
169+
},
170+
waitView: {
171+
flex: 1,
172+
justifyContent: 'center',
173+
alignItems: 'center',
174+
marginTop: 100,
175+
},
176+
updateNotificationStyle: {
177+
textAlign: 'center',
178+
marginTop: 10,
179+
paddingBottom: 5
180+
}
181+
});
182+
183+
export default Timeline

‎app/views/Database/components/Post.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React, { Component } from 'react'
2+
import {
3+
Text,
4+
View,
5+
TouchableOpacity,
6+
StyleSheet,
7+
Image,
8+
} from 'react-native'
9+
10+
import { getColor } from '../../../utils/getColor'
11+
12+
export default class Post extends Component {
13+
constructor(props) {
14+
super(props)
15+
}
16+
17+
render() {
18+
return (
19+
<View style={styles.card}>
20+
<Text style={styles.title}>
21+
{this.props.postTitle}
22+
</Text>
23+
<Text style={styles.name}>
24+
{this.props.posterName}
25+
</Text>
26+
<Text style={styles.time}>
27+
{this.props.postTime}
28+
</Text>
29+
<Text style={styles.content}>
30+
{this.props.postContent}
31+
</Text>
32+
</View>
33+
)
34+
}
35+
}
36+
37+
const styles = StyleSheet.create({
38+
card: {
39+
flex: 0,
40+
borderWidth: 1,
41+
borderColor: '#e2e2e2',
42+
borderRadius: 2,
43+
backgroundColor: '#eee',
44+
padding: 10,
45+
margin: 5,
46+
},
47+
title: {
48+
fontSize: 20,
49+
},
50+
name: {
51+
color: getColor(),
52+
fontSize: 15,
53+
margin: 5,
54+
},
55+
time: {
56+
margin: 5,
57+
fontSize: 12,
58+
paddingBottom: 10
59+
},
60+
content: {
61+
color: 'rgba(0,0,0,.8)',
62+
fontSize: 14
63+
}
64+
})

‎app/views/Database/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,20 @@ import List from '../../components/List/List'
1010
import appStyles from '../../styles/app';
1111

1212
import Chat from './Demos/Chat';
13+
import Ordering from './Demos/Ordering';
1314

1415
export const Routes = {
1516
'Chat example': {
1617
route: {
1718
title: 'Chat example',
1819
Component: Chat
1920
}
21+
},
22+
'Ordering example': {
23+
route: {
24+
title: 'Ordering example',
25+
Component: Ordering
26+
}
2027
}
2128
}
2229

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"react-native-fs": "^2.0.1-rc.2",
1919
"react-native-gifted-chat": "0.0.10",
2020
"react-native-oauth": "^1.0.7",
21+
"react-native-scrollable-tab-view": "^0.6.0",
2122
"react-native-vector-icons": "^2.1.0",
2223
"react-redux": "^4.4.5",
2324
"redux": "^3.6.0",

0 commit comments

Comments
 (0)