Skip to content

Commit fd5c715

Browse files
bhavik66bhavik66
committed
add progressive image
1 parent d902b58 commit fd5c715

File tree

14 files changed

+213
-117
lines changed

14 files changed

+213
-117
lines changed

‎android/app/src/main/AndroidManifest.xml‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2-
package="com.firebase_chat">
2+
package="com.f
3+
4+
5+
irebase_chat">
36

47
<uses-permission android:name="android.permission.INTERNET" />
5-
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
6-
<uses-permission android:name="android.permission.CAMERA"/>
7-
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
8+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
9+
<uses-permission android:name="android.permission.CAMERA" />
10+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
811

912
<application
10-
android:name=".MainApplication"
11-
android:label="@string/app_name"
12-
android:icon="@mipmap/ic_launcher"
13-
android:allowBackup="false"
14-
android:theme="@style/AppTheme">
15-
<activity
16-
android:name=".MainActivity"
13+
android:name=".MainApplication"
14+
android:allowBackup="false"
15+
android:icon="@mipmap/ic_launcher"
1716
android:label="@string/app_name"
18-
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
19-
android:windowSoftInputMode="adjustResize">
20-
<intent-filter>
21-
<action android:name="android.intent.action.MAIN" />
22-
<category android:name="android.intent.category.LAUNCHER" />
23-
</intent-filter>
24-
</activity>
25-
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
17+
android:theme="@style/AppTheme">
18+
<activity
19+
android:name=".MainActivity"
20+
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
21+
android:label="@string/app_name"
22+
android:screenOrientation="portrait"
23+
android:windowSoftInputMode="adjustResize">
24+
<intent-filter>
25+
<action android:name="android.intent.action.MAIN" />
26+
<category android:name="android.intent.category.LAUNCHER" />
27+
</intent-filter>
28+
</activity>
29+
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
2630
</application>
2731

2832
</manifest>

‎readme.md‎

Whitespace-only changes.

‎src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react'
2-
import { View, StatusBar, ActivityIndicator } from 'react-native'
2+
import { View, StatusBar } from 'react-native'
33

44
import { Provider } from 'mobx-react'
55

66
import AppNavigator from './layout/index'
77
import colors from './theme/colors'
88
import stores from './store'
9+
import './utils/enableFontPatch'
910

1011
export default class Root extends React.Component {
1112
render() {

‎src/components/chatHeader.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { Component } from 'react'
2-
import { View, Image, Text, TouchableOpacity } from 'react-native'
2+
import { View, Text, TouchableOpacity } from 'react-native'
33
import Icon from 'react-native-vector-icons/MaterialIcons'
44

5+
import ProgressiveImage from './progressiveImage'
56
import colors from '../theme/colors'
67

78
export const ChatHeader = props => {
@@ -21,18 +22,24 @@ export const ChatHeader = props => {
2122
<TouchableOpacity onPress={() => props.nav.goBack()}>
2223
<Icon name={'arrow-back'} color={colors.white} size={28} />
2324
</TouchableOpacity>
24-
<Image
25-
source={{ uri: props.uri }}
25+
<View
2626
style={{
27-
width: 42,
28-
height: 42,
29-
borderRadius: 100,
3027
margin: 4,
31-
marginRight: 16,
32-
marginLeft: 16,
33-
borderWidth: 1
28+
marginRight: 12,
29+
marginLeft: 12
3430
}}
35-
/>
31+
>
32+
<ProgressiveImage
33+
source={{ uri: props.uri }}
34+
style={{
35+
width: 42,
36+
height: 42,
37+
borderRadius: 100,
38+
borderWidth: 1
39+
}}
40+
thumbnail={require('../img/profile.png')}
41+
/>
42+
</View>
3643
<Text style={{ color: colors.white, fontSize: 20, fontWeight: '500' }}>
3744
{props.title}
3845
</Text>

‎src/components/contact.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { Component } from 'react'
2-
import { View, Text, Image, TouchableOpacity } from 'react-native'
3-
2+
import { View, Text, TouchableOpacity } from 'react-native'
43
import PropTypes from 'prop-types'
54

5+
import ProgressiveImage from './progressiveImage'
66
import styles from '../theme/component/conversation'
77

88
class Contact extends Component {
@@ -13,7 +13,11 @@ class Contact extends Component {
1313
style={[styles.container, { paddingTop: 8, paddingBottom: 8 }]}
1414
onPress={this.props.onPress}
1515
>
16-
<Image source={avatarUrl} style={styles.avatar} />
16+
<ProgressiveImage
17+
source={avatarUrl}
18+
style={styles.avatar}
19+
thumbnail={require('../img/profile.png')}
20+
/>
1721
<View style={styles.content}>
1822
<Text style={styles.name}>{name}</Text>
1923
</View>

‎src/components/conversation.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { Component } from 'react'
2-
import { View, Text, Image, TouchableOpacity } from 'react-native'
2+
import { View, Text, TouchableOpacity } from 'react-native'
33
import PropTypes from 'prop-types'
44

5+
import ProgressiveImage from './progressiveImage'
56
import styles from '../theme/component/conversation'
67

78
class Conversation extends Component {
@@ -14,7 +15,11 @@ class Conversation extends Component {
1415

1516
return (
1617
<TouchableOpacity style={styles.container} onPress={this.props.onPress}>
17-
<Image source={avatarUrl} style={styles.avatar} />
18+
<ProgressiveImage
19+
source={avatarUrl}
20+
style={styles.avatar}
21+
thumbnail={require('../img/profile.png')}
22+
/>
1823
<View style={styles.content}>
1924
<Text style={styles.name}>{name}</Text>
2025
<Text style={styles.lastMessage}>{_lastMessage}</Text>

‎src/components/progressiveImage.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { Component } from 'react'
2+
import { Animated, View } from 'react-native'
3+
4+
export default class progressiveImage extends Component {
5+
constructor(props) {
6+
super(props)
7+
this.state = {
8+
thumbnailOpacity: new Animated.Value(0),
9+
isImageLoaded: false
10+
}
11+
}
12+
onLoad() {
13+
this.setState({ isImageLoaded: true })
14+
Animated.timing(this.state.thumbnailOpacity, {
15+
toValue: 0,
16+
duration: 250
17+
}).start()
18+
}
19+
onThumbnailLoad() {
20+
if (!this.state.isImageLoaded)
21+
Animated.timing(this.state.thumbnailOpacity, {
22+
toValue: 1,
23+
duration: 250
24+
}).start()
25+
}
26+
render() {
27+
return (
28+
<View
29+
width={this.props.style.width}
30+
height={this.props.style.height}
31+
backgroundColor={'#ffffff'}
32+
style={this.props.style}
33+
>
34+
<Animated.Image
35+
resizeMode={'cover'}
36+
key={this.props.key}
37+
style={[
38+
{
39+
position: 'absolute'
40+
},
41+
this.props.style
42+
]}
43+
source={this.props.source}
44+
onLoad={event => this.onLoad(event)}
45+
/>
46+
<Animated.Image
47+
resizeMode={'cover'}
48+
key={this.props.key}
49+
style={[
50+
{
51+
opacity: this.state.thumbnailOpacity
52+
},
53+
this.props.style
54+
]}
55+
source={this.props.thumbnail}
56+
onLoad={event => this.onThumbnailLoad(event)}
57+
/>
58+
</View>
59+
)
60+
}
61+
}

‎src/screens/conversations.js‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,8 @@ import colors from '../theme/colors'
1515
@inject('Conversation')
1616
@observer
1717
export default class Conversations extends Component {
18-
constructor(props) {
19-
super(props)
20-
this.willFocusSubscription = null
21-
this.didBlurSubscription = null
22-
this.isActiveted = false
23-
}
24-
2518
componentWillMount() {
26-
this.willFocusSubscription = this.props.navigation.addListener(
27-
'willFocus',
28-
payload => {
29-
this.props.Conversation.fetchConversations(!this.isActiveted)
30-
this.isActiveted = true
31-
}
32-
)
33-
}
34-
35-
componentWillUnmount() {
36-
this.willFocusSubscription.remove()
19+
this.props.Conversation.fetchConversations()
3720
}
3821

3922
render() {

‎src/screens/profile.js‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import ImagePicker from 'react-native-image-picker'
1313
import { inject, observer } from 'mobx-react'
1414

15+
import ProgressiveImage from '../components/progressiveImage'
1516
import style from '../theme/index'
1617
import colors from '../theme/colors'
1718
import { saveKey } from '../utils/db'
@@ -25,42 +26,42 @@ export default class Profile extends Component {
2526
isLoading: false,
2627
isFromFile: false
2728
}
28-
this.size = new Animated.Value(150)
29+
// this.size = new Animated.Value(150)
2930
}
3031

31-
componentWillMount() {
32-
this.keyboardWillShowSub = Keyboard.addListener(
33-
'keyboardDidShow',
34-
this.keyboardWillShow
35-
)
36-
this.keyboardWillHideSub = Keyboard.addListener(
37-
'keyboardDidHide',
38-
this.keyboardWillHide
39-
)
40-
}
32+
// componentWillMount() {
33+
// this.keyboardWillShowSub = Keyboard.addListener(
34+
// 'keyboardDidShow',
35+
// this.keyboardWillShow
36+
// )
37+
// this.keyboardWillHideSub = Keyboard.addListener(
38+
// 'keyboardDidHide',
39+
// this.keyboardWillHide
40+
// )
41+
// }
4142

42-
componentWillUnmount() {
43-
this.keyboardWillShowSub.remove()
44-
this.keyboardWillHideSub.remove()
45-
}
43+
// componentWillUnmount() {
44+
// this.keyboardWillShowSub.remove()
45+
// this.keyboardWillHideSub.remove()
46+
// }
4647

4748
componentDidMount() {
4849
this.props.User.getCurrentUser()
4950
}
5051

51-
keyboardWillShow = event => {
52-
Animated.timing(this.size, {
53-
duration: 100,
54-
toValue: 75
55-
}).start()
56-
}
52+
// keyboardWillShow = event => {
53+
// Animated.timing(this.size, {
54+
// duration: 100,
55+
// toValue: 75
56+
// }).start()
57+
// }
5758

58-
keyboardWillHide = event => {
59-
Animated.timing(this.size, {
60-
duration: 100,
61-
toValue: 150
62-
}).start()
63-
}
59+
// keyboardWillHide = event => {
60+
// Animated.timing(this.size, {
61+
// duration: 100,
62+
// toValue: 150
63+
// }).start()
64+
// }
6465

6566
render() {
6667
return (
@@ -69,8 +70,8 @@ export default class Profile extends Component {
6970
style={[_style.avatar, { backgroundColor: '#fff', elevation: 15 }]}
7071
onPress={this.selectAvatar}
7172
>
72-
<Animated.Image
73-
style={[_style.avatar, { height: this.size, width: this.size }]}
73+
<ProgressiveImage
74+
style={[_style.avatar]}
7475
source={
7576
this.props.User.avatarSource !== ''
7677
? {
@@ -80,6 +81,7 @@ export default class Profile extends Component {
8081
}
8182
: require('../img/profile.png')
8283
}
84+
thumbnail={require('../img/profile.png')}
8385
/>
8486
</TouchableOpacity>
8587
<TextInput
@@ -96,24 +98,23 @@ export default class Profile extends Component {
9698
style={{ margin: 24 }}
9799
/>
98100
) : (
99-
<View />
101+
<View
102+
style={{
103+
backgroundColor: colors.primary,
104+
alignSelf: 'center',
105+
padding: 8,
106+
paddingRight: 32,
107+
paddingLeft: 32,
108+
borderRadius: 6
109+
}}
110+
>
111+
<TouchableOpacity onPress={this.onSaveOrUpdate}>
112+
<Text style={[style.footerButtonText, { fontWeight: '500' }]}>
113+
Continue
114+
</Text>
115+
</TouchableOpacity>
116+
</View>
100117
)}
101-
<View
102-
style={{
103-
backgroundColor: colors.primary,
104-
alignSelf: 'center',
105-
padding: 8,
106-
paddingRight: 32,
107-
paddingLeft: 32,
108-
borderRadius: 6
109-
}}
110-
>
111-
<TouchableOpacity onPress={this.onSaveOrUpdate}>
112-
<Text style={[style.footerButtonText, { fontWeight: '500' }]}>
113-
Continue
114-
</Text>
115-
</TouchableOpacity>
116-
</View>
117118
</View>
118119
)
119120
}

‎src/store/chat.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export default class Chat {
2727
.child(key)
2828
.child('lastMsg')
2929
.set(messageKey)
30+
31+
await this.database
32+
.ref('Conversations')
33+
.child(key)
34+
.child('lastTime')
35+
.set(message.timeStamp)
3036
}
3137

3238
@action

0 commit comments

Comments
 (0)