Skip to content

Commit 67a0955

Browse files
abdurrahmanekrabdurrahmanekr
committed
message status icon added.
message after content added eg: '\t'
1 parent 57042b2 commit 67a0955

10 files changed

Lines changed: 250 additions & 41 deletions

File tree

‎example-native/App.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import {
1414
} from 'react-native';
1515

1616
import { ChatItem, MessageBox, } from '../native';
17+
import Theme from '../native/Theme';
18+
19+
import IconI from 'react-native-vector-icons/Ionicons';
20+
import IconM from 'react-native-vector-icons/MaterialIcons';
1721

1822
export default class App extends Component<{}> {
1923
constructor(props) {
@@ -23,6 +27,12 @@ export default class App extends Component<{}> {
2327
show: true,
2428
messageList: [],
2529
};
30+
Theme.icons = {
31+
waiting: <IconM name='access-time' size={13}/>,
32+
sent: <IconM name='check' size={13}/>,
33+
received: <IconI name='md-done-all' size={13}/>,
34+
read: <IconI name='md-done-all' color='#4FC3F7' size={13}/>,
35+
}
2636
}
2737

2838
getRandomColor() {
@@ -71,8 +81,8 @@ export default class App extends Component<{}> {
7181
},
7282
status: status,
7383
date: new Date(),
74-
dateString: new Date().toString(),
75-
avatar: require('./assets/chat-user.png'),
84+
dateString: new Date().toTimeString().split(' ')[0],
85+
// avatar: require('./assets/chat-user.png'),
7686
};
7787
case 'chat':
7888
return {
@@ -85,7 +95,7 @@ export default class App extends Component<{}> {
8595
date: new Date(),
8696
subtitle: 'eligendi quaerat nam ipsam tempora.',
8797
unread: parseInt(Math.random() * 10 % 3),
88-
dateString: new Date().toString(),
98+
dateString: new Date().toTimeString().split(' ')[0],
8999
};
90100
}
91101
}

‎example-native/android/app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ android {
137137
}
138138

139139
dependencies {
140+
compile project(':react-native-vector-icons')
140141
compile fileTree(dir: "libs", include: ["*.jar"])
141142
compile "com.android.support:appcompat-v7:23.0.1"
142143
compile "com.facebook.react:react-native:+" // From node_modules

‎example-native/android/app/src/main/java/com/example/MainApplication.java‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import android.app.Application;
44

55
import com.facebook.react.ReactApplication;
6+
import com.oblador.vectoricons.VectorIconsPackage;
67
import com.facebook.react.ReactNativeHost;
78
import com.facebook.react.ReactPackage;
89
import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
2223
@Override
2324
protected List<ReactPackage> getPackages() {
2425
return Arrays.<ReactPackage>asList(
25-
new MainReactPackage()
26+
new MainReactPackage(),
27+
new VectorIconsPackage()
2628
);
2729
}
2830

‎example-native/android/settings.gradle‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
rootProject.name = 'example'
2+
include ':react-native-vector-icons'
3+
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
24

35
include ':app'

‎example-native/ios/example.xcodeproj/project.pbxproj‎

Lines changed: 188 additions & 10 deletions
Large diffs are not rendered by default.

‎example-native/ios/example/Info.plist‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,8 @@
3939
<key>UIViewControllerBasedStatusBarAppearance</key>
4040
<false/>
4141
<key>NSLocationWhenInUseUsageDescription</key>
42-
<string></string>
42+
<string/>
4343
<key>NSAppTransportSecurity</key>
44-
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
4544
<dict>
4645
<key>NSExceptionDomains</key>
4746
<dict>
@@ -52,5 +51,19 @@
5251
</dict>
5352
</dict>
5453
</dict>
54+
<key>UIAppFonts</key>
55+
<array>
56+
<string>Entypo.ttf</string>
57+
<string>EvilIcons.ttf</string>
58+
<string>Feather.ttf</string>
59+
<string>FontAwesome.ttf</string>
60+
<string>Foundation.ttf</string>
61+
<string>Ionicons.ttf</string>
62+
<string>MaterialCommunityIcons.ttf</string>
63+
<string>MaterialIcons.ttf</string>
64+
<string>Octicons.ttf</string>
65+
<string>SimpleLineIcons.ttf</string>
66+
<string>Zocial.ttf</string>
67+
</array>
5568
</dict>
5669
</plist>

‎example-native/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"dependencies": {
1010
"moment": "^2.19.1",
1111
"react": "16.0.0-beta.5",
12-
"react-native": "0.49.5"
12+
"react-native": "0.49.5",
13+
"react-native-icons": "^0.7.1",
14+
"react-native-vector-icons": "^4.4.2"
1315
},
1416
"devDependencies": {
1517
"babel-jest": "21.2.0",

‎native/ChatItem/ChatItem.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export class ChatItem extends Component {
2222
<Avatar
2323
src={this.props.avatar}
2424
alt={this.props.alt}
25-
size="large"
2625
sideElement={
2726
this.props.statusColor &&
2827
<View

‎native/MessageBox/MessageBox.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
Image,
1010
} from 'react-native';
1111

12+
import Theme from '../Theme';
13+
1214
export class MessageBox extends Component {
1315

1416
render() {
@@ -41,18 +43,18 @@ export class MessageBox extends Component {
4143
this.props.type === 'text' && styles.rceMboxTitleClear,
4244
]}
4345
onClick={this.props.onTitleClick}>
44-
<View
45-
style={styles.rceMboxTitleAvatar}>
46-
{
47-
this.props.avatar &&
48-
<Avatar
49-
size={{
50-
width: 30,
51-
height: 30,
52-
}}
53-
src={this.props.avatar}/>
54-
}
55-
</View>
46+
{
47+
this.props.avatar &&
48+
<View
49+
style={styles.rceMboxTitleAvatar}>
50+
<Avatar
51+
size={{
52+
width: 30,
53+
height: 30,
54+
}}
55+
src={this.props.avatar}/>
56+
</View>
57+
}
5658
<View>
5759
{
5860
this.props.title &&
@@ -71,6 +73,7 @@ export class MessageBox extends Component {
7173
<Text
7274
style={styles.rceMboxText}>
7375
{this.props.text}
76+
{'\t\t\t\t\t'}
7477
</Text>
7578
}
7679

@@ -94,25 +97,24 @@ export class MessageBox extends Component {
9497
this.props.status &&
9598
<Text
9699
style={styles.rceMboxStatus}>
97-
{this.props.status}
98100
{
99-
// this.props.status === 'waiting' &&
100-
// <MdIosTime />
101+
this.props.status === 'waiting' &&
102+
Theme.icons.waiting
101103
}
102104

103105
{
104-
// this.props.status === 'sent' &&
105-
// <MdCheck />
106+
this.props.status === 'sent' &&
107+
Theme.icons.sent
106108
}
107109

108110
{
109-
// this.props.status === 'received' &&
110-
// <IoDoneAll />
111+
this.props.status === 'received' &&
112+
Theme.icons.received
111113
}
112114

113115
{
114-
// this.props.status === 'read' &&
115-
// <IoDoneAll color='#4FC3F7'/>
116+
this.props.status === 'read' &&
117+
Theme.icons.read
116118
}
117119
</Text>
118120
}

‎native/MessageBox/MessageBoxStyle.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default StyleSheet.create({
5555

5656
rceMboxTimeText: {
5757
textAlign: 'right',
58-
color: '#ccc',
58+
color: '#777',
5959
fontSize: 12,
6060
},
6161

@@ -108,7 +108,7 @@ export default StyleSheet.create({
108108
rceMboxStatus: {
109109
textAlign: 'right',
110110
marginLeft: 3,
111-
fontSize: 15,
111+
color: '#999'
112112
},
113113

114114
rceMboxTitleRceAvatarContainer: {

0 commit comments

Comments
 (0)