· 6 years ago · Aug 05, 2019, 09:54 PM
1
2import React, {Component } from "react";
3import {Container, Header, Title, Content, Button, Icon, Card, CardItem, Text, Body, Left, Right, IconNB, View, Root, Thumbnail, Item, Label, Input, List, ListItem} from "native-base";
4import {AppLoading} from "expo";
5import * as Font from 'expo-font';
6import {StatusBar, StyleSheet, Alert, TouchableOpacity, AsyncStorage,} from 'react-native';
7import * as Facebook from 'expo-facebook';
8import Swiper from 'react-native-swiper'
9import { SocialIcon } from 'react-native-elements'
10import twitter, { TWLoginButton, decodeHTMLEntities, getRelativeTime } from 'react-native-simple-twitter';
11import * as Constants from "expo-constants";
12import InstagramLogin from 'react-native-instagram-login'
13import LinkedInModal from 'react-native-linkedin'
14
15
16
17class GenericRoundedCard extends Component {
18 constructor(props) {
19 super(props);
20 this.state = {
21 loading: true,
22 };
23 }
24
25 async componentDidMount() {
26 this.setState({
27 loading: false,
28 backgroundColorCard: this.props.bgCard,
29
30 bottomLeftCorner: this.props.bottomLeftCorner,
31 formatPictureBottomLeft: this.props.formatPictureBottomLeft,
32 fontBottomLeftTitle: this.props.fontBottomLeftTitle,
33 fontBottomLeftContent: this.props.fontBottomLeftContent,
34 contentBottomLeftTitle: this.props.contentBottomLeftTitle,
35 contentBottomLeftText: this.props.contentBottomLeftText,
36 sizeTitleBottomLeft: this.props.sizeTitleBottomLeft,
37 sizeContentBottomLeft: this.props.sizeContentBottomLeft,
38 colorBottomLeftTitle: this.props.colorBottomLeftTitle,
39 colorBottomLeftText: this.props.colorBottomLeftText,
40
41
42 bottomRightCorner: this.props.bottomRightCorner,
43 formatPictureBottomRight: this.props.formatPictureBottomRight,
44 fontBottomRightTitle: this.props.fontBottomRightTitle,
45 fontBottomRightContent: this.props.fontBottomRightContent,
46 contentBottomRightTitle: this.props.contentBottomRightTitle,
47 contentBottomRightText: this.props.contentBottomRightText,
48 sizeTitleBottomRight: this.props.sizeTitleBottomRight,
49 sizeContentBottomRight: this.props.sizeContentBottomRight,
50 colorBottomRightTitle: this.props.colorBottomRightTitle,
51 colorBottomRightText: this.props.colorBottomRightText,
52
53 headerLeftCorner: this.props.headerLeftCorner,
54 formatPictureTopLeftCorner: this.props.formatPictureTopLeftCorner,
55 fontTopLeftCornerTitle: this.props.fontTopLeftCornerTitle,
56 fontTopLeftCornerContent: this.props.fontTopLeftCornerContent,
57 contentTopLeftCornerTitle: this.props.contentTopLeftCornerTitle,
58 contentTopLeftCornerText: this.props.contentTopLeftCornerText,
59 sizeTitleTopLeftCorner: this.props.sizeTitleTopLeftCorner,
60 sizeContentTopLeftCorner: this.props.sizeContentTopLeftCorner,
61 colorTopLeftCornerTitle: this.props.colorTopLeftCornerTitle,
62 colorTopLeftCornerText: this.props.colorTopLeftCornerText,
63
64 headerRightCorner: this.props.headerRightCorner,
65 formatPictureTopRightCorner: this.props.formatPictureTopRightCorner,
66 fontTopRightCornerTitle: this.props.fontTopRightCornerTitle,
67 fontTopRightCornerContent: this.props.fontTopRightCornerContent,
68 contentTopRightCornerTitle: this.props.contentTopRightCornerTitle,
69 contentTopRightCornerText: this.props.contentTopRightCornerText,
70 sizeTitleTopRightCorner: this.props.sizeTitleTopRightCorner,
71 sizeContentTopRightCorner: this.props.sizeContentTopRightCorner,
72 colorTopRightCornerTitle: this.props.colorTopRightCornerTitle,
73 colorTopRightCornerText: this.props.colorTopRightCornerText,
74 });
75 }
76
77
78 render() {
79 if (this.state.loading) {
80 return (
81 <Root>
82 <AppLoading />
83 </Root>
84 );
85 }
86
87 if (this.state.backgroundColorCard === undefined) {
88 return (
89 <View>
90 <Text>ERROR Background not found</Text>
91 </View>
92 )
93 }
94
95 let bottomRightCornerContent =
96 this.state.bottomRightCorner !== undefined && this.state.formatPictureBottomRight === 'square'
97 ?
98 <Right style={{flex: 1, flexDirection: "column"}}>
99 <Thumbnail square source={{uri: this.state.bottomRightCorner}} />
100 </Right>
101 :
102 this.state.bottomRightCorner !== undefined && this.state.formatPictureBottomRight !== 'square'
103 ?
104 <Right style={{flex: 1, flexDirection: "column"}}>
105 <Thumbnail source={{uri: this.state.bottomRightCorner}} />
106 </Right>
107 :
108 this.state.contentBottomRightText !== undefined
109 ?
110 <Right style={{flex: 1, flexDirection: "column"}}>
111 <Text style={{fontFamily: this.state.fontBottomRightTitle, color: this.state.colorBottomRightTitle, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentBottomRightTitle}</Text>
112 <Text note style={{fontFamily: this.state.fontBottomRightContent, color: this.state.colorBottomRightText, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentBottomRightText}</Text>
113 </Right>
114 :
115 <Right style={{flex: 1, flexDirection: "column"}}>
116 <Text style={{fontFamily: this.state.fontBottomRightTitle, color: this.state.colorBottomRightTitle, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentBottomRightTitle}</Text>
117 <Text note style={{fontFamily: this.state.fontBottomRightContent, color: this.state.colorBottomRightText, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentBottomRightText}</Text>
118 </Right>;
119
120 let bottomLeftCornerContent =
121 this.state.bottomLeftCorner !== undefined && this.state.formatPictureBottomLeft === 'square'
122 ?
123 <Left style={{flex: 0, flexDirection: "column"}}>
124 <Thumbnail square source={{uri: this.state.bottomLeftCorner}} />
125 </Left>
126 :
127 this.state.bottomLeftCorner !== undefined && this.state.formatPictureBottomLeft !== 'square'
128 ?
129 <Left style={{flex: 0, flexDirection: "column"}}>
130 <Thumbnail source={{uri: this.state.bottomLeftCorner}} />
131 </Left>
132 :
133 this.state.contentBottomLeftText !== undefined
134 ?
135 <Left style={{flex: 0, flexDirection: "column"}}>
136 <Text style={{fontFamily: this.state.fontBottomLeftTitle, color: this.state.colorBottomLeftTitle, textAlign: 'left', alignSelf: 'stretch'}}>{this.state.contentBottomLeftTitle}</Text>
137 <Text note style={{fontFamily: this.state.fontBottomLeftContent, color: this.state.colorBottomLeftText, textAlign: 'left', alignSelf: 'stretch'}}>{this.state.contentBottomLeftText}</Text>
138 </Left>
139 :
140 <Left style={{flex: 0, flexDirection: "column"}}>
141 <Text style={{fontFamily: this.state.fontBottomLeftTitle, color: this.state.colorBottomLeftTitle, textAlign: 'left', alignSelf: 'stretch'}}>{this.state.contentBottomLeftTitle}</Text>
142 </Left>;
143
144 let headerLeftContent =
145 this.state.headerLeftCorner !== undefined && this.state.formatPictureTopLeftCorner === 'square'
146 ?
147 <Left style={{flex: 0, flexDirection: "column"}}>
148 <Thumbnail square source={{uri: this.state.headerLeftCorner}} />
149 </Left>
150 :
151 this.state.headerLeftCorner !== undefined && this.state.formatPictureTopLeftCorner !== 'square'
152 ?
153 <Left style={{flex: 0, flexDirection: "column"}}>
154 <Thumbnail source={{uri: this.state.headerLeftCorner}} />
155 </Left>
156 :
157 this.state.contentTopLeftCornerText !== undefined
158 ?
159 <Left style={{flex: 0, flexDirection: "column"}}>
160 <Text style={{fontSize: this.state.sizeTitleTopLeftCorner, fontFamily: this.state.fontTopLeftCornerTitle, color: this.state.colorTopLeftCornerTitle, textAlign: 'left', alignSelf: 'stretch'}}>{this.state.contentTopLeftCornerTitle}</Text>
161 <Text note style={{fontSize: this.state.sizeContentTopLeftCorner, fontFamily: this.state.fontTopLeftCornerContent, color: this.state.colorTopLeftCornerText, textAlign: 'left', alignSelf: 'stretch'}}>{this.state.contentTopLeftCornerText}</Text>
162 </Left>
163 :
164 <Left style={{flex: 0, flexDirection: "column"}}>
165 <Text style={{fontSize: this.state.sizeTitleTopLeftCorner, fontFamily: this.state.fontTopLeftCornerTitle, color: this.state.colorTopLeftCornerTitle, textAlign: 'left', alignSelf: 'stretch'}}>{this.state.contentTopLeftCornerTitle}</Text>
166 </Left> ;
167
168 let headerRightContent =
169 this.state.headerRightCorner !== undefined && this.state.formatPictureTopRightCorner === 'square'
170 ?
171 <Right style={{flex: 1, flexDirection: "column"}}>
172 <Thumbnail square source={{uri: this.state.headerRightCorner}} />
173 </Right>
174 :
175 this.state.headerRightCorner !== undefined && this.state.formatPictureTopRightCorner !== 'square'
176 ?
177 <Right style={{flex: 1, flexDirection: "column"}}>
178 <Thumbnail source={{uri: this.state.headerRightCorner}} />
179 </Right>
180 :
181 this.state.contentTopRightCornerText !== undefined
182 ?
183 <Right style={{flex: 1, flexDirection: "column"}}>
184 <Text style={{fontFamily: this.state.fontTopRightCornerTitle, color: this.state.colorTopRightCornerTitle, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentTopRightCornerTitle}</Text>
185 <Text note style={{fontFamily: this.state.fontTopRightCornerContent, color: this.state.colorTopRightCornerText, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentTopRightCornerText}</Text>
186 </Right>
187 :
188 <Right style={{flex: 1, flexDirection: "column"}}>
189 <Text style={{fontFamily: this.state.fontTopRightCornerTitle, color: this.state.colorTopRightCornerTitle, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentTopRightCornerTitle}</Text>
190 <Text note style={{fontFamily: this.state.fontTopRightCornerContent, color: this.state.colorTopRightCornerText, textAlign: 'right', alignSelf: 'stretch'}}>{this.state.contentTopRightCornerText}</Text>
191 </Right>;
192
193 let emptySpace =
194 <CardItem style={{borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, borderBottomRightRadius: 0, backgroundColor: this.state.backgroundColorCard }}>
195 <Body>
196 </Body>
197 </CardItem>;
198
199 return (
200 <Container style={{paddingTop: "50%"}}>
201 <Content padder>
202 <Card style={{borderRadius: 9}}>
203 <CardItem header style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderTopLeftRadius: 9, borderTopRightRadius: 9, backgroundColor: this.state.backgroundColorCard, flexDirection: "row"}}>
204 {headerLeftContent}
205 {headerRightContent}
206 </CardItem>
207 {emptySpace}
208 {emptySpace}
209 {emptySpace}
210 {emptySpace}
211 <CardItem footer style={{borderBottomLeftRadius: 8, borderBottomRightRadius: 8, borderTopLeftRadius: 0, borderTopRightRadius: 0, backgroundColor: this.state.backgroundColorCard }}>
212 {bottomLeftCornerContent}
213 {bottomRightCornerContent}
214 </CardItem>
215 </Card>
216 </Content>
217 </Container >
218 );
219 }
220}
221
222export default class App extends Component {
223
224 constructor(props) {
225 super(props);
226 this.state = {
227 name: null,
228 picture: null,
229 email: null,
230 facebookConnected: false,
231 loading: true,
232 token: null,
233 tokenSecret: null,
234 nameTwitter: null,
235 pseudoTwitter: null,
236 followingTwitter: 0,
237 followersTwitter: 0,
238 twitterConnected: false,
239 tokenInsta: null,
240 pseudoInstagram: null,
241 followingInstagram: 0,
242 followersInstagram: 0,
243 instagramConnected: false,
244 };
245 this.logInFacebook = this.logInFacebook.bind(this);
246 }
247
248
249 loadResourcesAsync = async () => Promise.all([
250 twitter.setConsumerKey("sIaBRZBbihUabSRkENZUjWL2e","u6qePkEENXuI5zttzFMYzIL335JBAGq38kpF8FGzptVgBt1CvB"),
251 ]);
252
253 async componentDidMount() {
254 await Font.loadAsync({
255 Roboto: require("native-base/Fonts/Roboto.ttf"),
256 Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
257 SnapFont: require("./assets/fonts/SF-UI-Text-Regular.otf"),
258 SnapFontLight: require("./assets/fonts/SF-UI-Display-Ultralight.otf"),
259 SnapFontBold: require("./assets/fonts/SF-UI-Display-Bold.otf")
260 });
261 this.loadResourcesAsync();
262 this.setState({
263 loading: false,
264 });
265 }
266
267 async logInFacebook() {
268 try {
269 const {
270 type,
271 token,
272 expires,
273 permissions,
274 declinedPermissions,
275 } = await Facebook.logInWithReadPermissionsAsync('2445401388871908', {
276 permissions: ['public_profile', 'email',],
277 });
278 if (type === 'success') {
279 const response = await fetch(
280 `https://graph.facebook.com/me?access_token=${token}&fields=id,name,picture.type(large),email`
281 );
282 const { picture, name, email } = await response.json();
283 this.setState({picture: picture, name: name, email: email, facebookConnected: true});
284 } else {
285 // type === 'cancel'
286 }
287 } catch ({ message }) {
288 alert(`Facebook Login Error: ${message}`);
289 }
290 }
291
292 onGetAccessTokenTwitter = ({ oauth_token: token, oauth_token_secret: tokenSecret }) => {
293 console.log("debug : " + token + " token secret: " + tokenSecret);
294 this.setState({
295 token,
296 tokenSecret
297 })
298 };
299 onSuccessTwitter = async (user) => {
300 try {
301 await AsyncStorage.setItem("user", JSON.stringify({ ...user, token: this.state.token, tokenSecret: this.state.tokenSecret })) //for something in the future(like not needed new connection because these infos will be add in the stoage).
302 }
303 catch (err) {
304 console.log(err)
305 }
306
307 this.setState({nameTwitter: user.name, pseudoTwitter: user.screen_name,
308 followingTwitter: user.friends_count, followersTwitter: user.followers_count
309 , twitterConnected: true});
310 };
311
312 onPressTwitter = (e) => {
313 console.log('button pressed');
314 };
315
316 onCloseTwitter = (e) => {
317 console.log('press close button');
318 };
319
320 onErrorTwitter = (err) => {
321 console.log(err);
322 };
323
324
325 addInstagramInfoUser = (data) => {
326 this.setState({pseudoInstagram: data.data.username, followingInstagram: data.data.counts.follows,
327 followersInstagram: data.data.counts.followed_by, instagramConnected: true})
328 };
329
330 getInstagramInfoUser = (access_token) => {
331
332 fetch('https://api.instagram.com/v1/users/self/?access_token='+access_token)
333 .then((response) => response.json())
334 .then((responseJson) => {
335 this.addInstagramInfoUser(responseJson);
336 })
337 .catch((error) => {
338 console.error(error);
339 });
340
341 };
342
343 async getUserInfoIn({ access_token }) {
344 this.setState({ refreshing: true });
345 const baseApi = 'https://api.linkedin.com/v2/people/';
346 const qs = { format: 'json' };
347
348 console.log("debug braaa : " + access_token);
349 const response = await fetch('https://api.linkedin.com/v2/me?oauth2_access_token=' + access_token, {
350 method: 'GET',
351 });
352 const payload = await response.json();
353 console.log("PAYLOAD RESPONSE :" + JSON.stringify(payload));
354 console.log("PAYLOAD #21 :" + payload.localizedLastName);
355 console.log("PAYLOAD #2222 :" + JSON.stringify(payload.firstName.localized));
356
357 this.setState({ ...payload, refreshing: false })
358 }
359
360
361
362
363
364 render() {
365 if (this.state.loading) {
366 return (
367 <Root>
368 <AppLoading
369 />
370 </Root>
371 );
372 }
373 let facebookCard = this.state.facebookConnected ?
374 <View style={styles.container}>
375 <GenericRoundedCard
376 bottomRightCorner={this.state.picture.data.url}
377 formatPictureBottomRight={'circle'}
378
379 fontBottomLeftTitle={"SnapFont"}
380 fontBottomLeftContent={"SnapFontLight"}
381 contentBottomLeftTitle={"EMAIL"}
382 contentBottomLeftText={this.state.email}
383 colorBottomLeftTitle={"white"}
384 colorBottomLeftText={"white"}
385 sizeTitleBottomLeft={16}
386 sizeContentBottomLeft={16}
387
388 fontTopLeftCornerTitle={"SnapFontBold"}
389 contentTopLeftCornerTitle={this.state.name}
390 colorTopLeftCornerTitle={"white"}
391 sizeTitleTopLeftCorner={32}
392
393 headerRightCorner={'https://www.ameswessex.com/wp-content/uploads/2017/05/facebook-logo-png-white-i6-300x300.png'}
394 formatPictureTopRightCorner={'square'}
395
396 bgCard={"#3b5998"}
397 />
398 <Button disabled rounded
399 onPress={this.logInFacebook}
400 title={"Log in with Facebook button"}
401 style={{flex: 1,
402 marginBottom: 50,
403
404 shadowColor: 'rgba(0,0,0, .4)', // IOS
405 shadowOffset: { height: 1, width: 1 }, // IOS
406 shadowOpacity: 1, // IOS
407 shadowRadius: 1, //IOS
408
409 elevation: 2,
410 }}
411 >
412 <Text style={{
413 fontFamily: 'Roboto',
414 fontSize: 16,
415 fontWeight: '500',
416 }}>Log in With Facebook</Text>
417 </Button>
418 </View>
419 :
420 <Container>
421 <GenericRoundedCard
422 bottomRightCorner={'https://cdn.ticketswap.com/public/testimonials/201906/d3aed318-ac92-4de9-8827-03d30e545ece.jpeg'}
423 formatPictureBottomRight={'circle'}
424
425 fontBottomLeftTitle={"SnapFont"}
426 fontBottomLeftContent={"SnapFontLight"}
427 contentBottomLeftTitle={"EMAIL"}
428 contentBottomLeftText={'xxxx@xxxx.com'}
429 colorBottomLeftTitle={"white"}
430 colorBottomLeftText={"white"}
431 sizeTitleBottomLeft={16}
432 sizeContentBottomLeft={16}
433
434 fontTopLeftCornerTitle={"SnapFontBold"}
435 contentTopLeftCornerTitle={'XXXXX XXXXX'}
436 colorTopLeftCornerTitle={"white"}
437 sizeTitleTopLeftCorner={32}
438
439 headerRightCorner={'https://www.ameswessex.com/wp-content/uploads/2017/05/facebook-logo-png-white-i6-300x300.png'}
440 formatPictureTopRightCorner={'square'}
441
442 bgCard={"#3b5998"}
443 />
444 <Button rounded
445 onPress={this.logInFacebook}
446 title={"Log in with Facebook button"}
447 style={{flex: 1,
448 backgroundColor: '#3b5998',
449 marginBottom: 50,
450
451 shadowColor: 'rgba(0,0,0, .4)', // IOS
452 shadowOffset: { height: 1, width: 1 }, // IOS
453 shadowOpacity: 1, // IOS
454 shadowRadius: 1, //IOS
455 marginLeft: 10,
456 marginRight: 10,
457 elevation: 2,
458 }}
459 >
460 <Text style={{
461 fontFamily: 'Roboto',
462 color: 'white',
463 fontSize: 16,
464 fontWeight: '500',
465 }}>Log in With Facebook</Text>
466 </Button>
467 </Container>;
468
469 let snapchatCard =
470 <Container>
471
472 <GenericRoundedCard
473 fontBottomRightTitle={"SnapFont"}
474 fontBottomRightContent={"SnapFontLight"}
475 contentBottomRightTitle={"SCORES"}
476 contentBottomRightText={"120.000"}
477 sizeTitleBottomRight={16}
478 sizeContentBottomRight={16}
479 colorBottomRightTitle={"#282c34"}
480 colorBottomRightText={"#282c34"}
481
482 fontBottomLeftTitle={"SnapFont"}
483 fontBottomLeftContent={"SnapFontLight"}
484 contentBottomLeftTitle={"PSEUDO"}
485 contentBottomLeftText={"youngsoraw"}
486 colorBottomLeftTitle={"#282c34"}
487 colorBottomLeftText={"#282c34"}
488 sizeTitleBottomLeft={16}
489 sizeContentBottomLeft={16}
490
491 fontTopLeftCornerTitle={"SnapFontBold"}
492 contentTopLeftCornerTitle={"XXXX XXXX"}
493 colorTopLeftCornerTitle={"#282c34"}
494 sizeTitleTopLeftCorner={32}
495
496 headerRightCorner={'https://www.snapchat.com/static/assets/ghost-step1.png'}
497 formatPictureTopRightCorner={'square'}
498
499 bgCard={"yellow"}
500 />
501 <Button rounded
502 onPress={this.logInFacebook}
503 title={"Log in with Facebook button"}
504 style={{flex: 1,
505 backgroundColor: 'yellow',
506 marginBottom: 50,
507
508 shadowColor: 'rgba(0,0,0, .4)', // IOS
509 shadowOffset: { height: 1, width: 1 }, // IOS
510 shadowOpacity: 1, // IOS
511 shadowRadius: 1, //IOS
512
513 elevation: 2,
514 }}
515 >
516 <Text style={{
517 fontFamily: 'Roboto',
518 color: '#282c34',
519 fontSize: 16,
520 fontWeight: '500',
521 }}>Log in With Snapchat</Text>
522 </Button>
523 </Container>;
524
525
526
527 let twitterCard = this.state.twitterConnected ?
528 <View style={styles.container}>
529 <GenericRoundedCard
530 fontBottomRightTitle={"SnapFont"}
531 fontBottomRightContent={"SnapFontLight"}
532 contentBottomRightTitle={"FOLLOWERS"}
533 contentBottomRightText={this.state.followersTwitter}
534 sizeTitleBottomRight={16}
535 sizeContentBottomRight={16}
536 colorBottomRightTitle={"white"}
537 colorBottomRightText={"white"}
538
539 fontBottomLeftTitle={"SnapFont"}
540 fontBottomLeftContent={"SnapFontLight"}
541 contentBottomLeftTitle={"FOLLOWING"}
542 contentBottomLeftText={this.state.followingTwitter}
543 colorBottomLeftTitle={"white"}
544 colorBottomLeftText={"white"}
545 sizeTitleBottomLeft={16}
546 sizeContentBottomLeft={16}
547
548 fontTopLeftCornerTitle={"SnapFontBold"}
549 fontTopLeftCornerContent={"SnapFontLight"}
550 contentTopLeftCornerTitle={this.state.pseudoTwitter}
551 contentTopLeftCornerText={this.state.nameTwitter}
552 colorTopLeftCornerText={"white"}
553 colorTopLeftCornerTitle={"white"}
554 sizeTitleTopLeftCorner={32}
555 sizeContentTopLeftCorner={16}
556
557 headerRightCorner={'http://univ-cotedazur.fr/contenus-riches/images/logos/logo-twitter-blanc/image'}
558 formatPictureTopRightCorner={'square'}
559
560 bgCard={"#38A1F3"}
561 />
562 <Button disabled rounded
563 onPress={()=>{}}
564 title={"Log in with twitter button"}
565 style={{flex: 1,
566 marginBottom: 50,
567
568 shadowColor: 'rgba(0,0,0, .4)', // IOS
569 shadowOffset: { height: 1, width: 1 }, // IOS
570 shadowOpacity: 1, // IOS
571 shadowRadius: 1, //IOS
572
573 elevation: 2,
574 }}
575 >
576 <Text style={{
577 fontFamily: 'Roboto',
578 fontSize: 16,
579 fontWeight: '500',
580 }}>Log in with Twitter</Text>
581 </Button>
582 </View> :
583 <Container>
584
585 <GenericRoundedCard
586 fontBottomRightTitle={"SnapFont"}
587 fontBottomRightContent={"SnapFontLight"}
588 contentBottomRightTitle={"FOLLOWERS"}
589 contentBottomRightText={"XXXX"}
590 sizeTitleBottomRight={16}
591 sizeContentBottomRight={16}
592 colorBottomRightTitle={"white"}
593 colorBottomRightText={"white"}
594
595 fontBottomLeftTitle={"SnapFont"}
596 fontBottomLeftContent={"SnapFontLight"}
597 contentBottomLeftTitle={"FOLLOWING"}
598 contentBottomLeftText={"XXXX"}
599 colorBottomLeftTitle={"white"}
600 colorBottomLeftText={"white"}
601 sizeTitleBottomLeft={16}
602 sizeContentBottomLeft={16}
603
604 fontTopLeftCornerTitle={"SnapFontBold"}
605 contentTopLeftCornerTitle={"XXXXX XXXXX"}
606 colorTopLeftCornerTitle={"white"}
607 sizeTitleTopLeftCorner={32}
608
609 headerRightCorner={'http://univ-cotedazur.fr/contenus-riches/images/logos/logo-twitter-blanc/image'}
610 formatPictureTopRightCorner={'square'}
611
612 bgCard={"#38A1F3"}
613 />
614 <TWLoginButton
615 style={{height: 50, backgroundColor: '#38A1F3', paddingBottom: 10, paddingTop: 10,
616 marginBottom: 50, borderRadius: 50, flex: 0, elevation:2, marginLeft: 10, marginRight: 10, }}
617 type="TouchableOpacity"
618 onPress={this.onPressTwitter}
619 onGetAccessToken={this.onGetAccessTokenTwitter}
620 onSuccess={this.onSuccessTwitter}
621 onClose={this.onCloseTwitter}
622 onError={this.onErrorTwitter}
623 >
624 <Text style={{ textAlign: 'center', color: '#fff', fontFamily: 'Roboto',
625 fontSize: 16,
626 fontWeight: '500', }}>Log in with Twitter</Text>
627
628 </TWLoginButton>
629 </Container>;
630
631 let instaCard =
632 this.state.instagramConnected ?
633 <View style={styles.container}>
634
635 <GenericRoundedCard
636 fontBottomRightTitle={"SnapFont"}
637 fontBottomRightContent={"SnapFontLight"}
638 contentBottomRightTitle={"FOLLOWING"}
639 contentBottomRightText={this.state.followingInstagram}
640 sizeTitleBottomRight={16}
641 sizeContentBottomRight={16}
642 colorBottomRightTitle={"#282c34"}
643 colorBottomRightText={"#282c34"}
644
645 fontBottomLeftTitle={"SnapFont"}
646 fontBottomLeftContent={"SnapFontLight"}
647 contentBottomLeftTitle={"FOLLOWERS"}
648 contentBottomLeftText={this.state.followersInstagram}
649 colorBottomLeftTitle={"#282c34"}
650 colorBottomLeftText={"#282c34"}
651 sizeTitleBottomLeft={16}
652 sizeContentBottomLeft={16}
653
654 fontTopLeftCornerTitle={"SnapFontBold"}
655 contentTopLeftCornerTitle={this.state.pseudoInstagram}
656 colorTopLeftCornerTitle={"#282c34"}
657 sizeTitleTopLeftCorner={32}
658
659 headerRightCorner={'https://i.pinimg.com/originals/ff/0e/20/ff0e20de4718fe14cdd256c81c5db771.png'}
660 formatPictureTopRightCorner={'square'}
661
662 bgCard={"white"}
663 />
664 <Button disabled rounded
665 onPress={() => {}}
666 title={"Log in with Facebook button"}
667 style={{flex: 1,
668 marginBottom: 50,
669
670 shadowColor: 'rgba(0,0,0, .4)', // IOS
671 shadowOffset: { height: 1, width: 1 }, // IOS
672 shadowOpacity: 1, // IOS
673 shadowRadius: 1, //IOS
674
675 elevation: 2,
676 marginLeft: 10,
677 marginRight: 10,
678 }}
679 >
680 <Text style={{
681 fontFamily: 'Roboto',
682 color: '#282c34',
683 fontSize: 16,
684 fontWeight: '500',
685 }}>Log in With Instagram</Text>
686 </Button>
687 </View>
688 :
689 <Container>
690
691 <GenericRoundedCard
692 fontBottomRightTitle={"SnapFont"}
693 fontBottomRightContent={"SnapFontLight"}
694 contentBottomRightTitle={"FOLLOWERS"}
695 contentBottomRightText={"XXXX"}
696 sizeTitleBottomRight={16}
697 sizeContentBottomRight={16}
698 colorBottomRightTitle={"#282c34"}
699 colorBottomRightText={"#282c34"}
700
701 fontBottomLeftTitle={"SnapFont"}
702 fontBottomLeftContent={"SnapFontLight"}
703 contentBottomLeftTitle={"FOLLOWING"}
704 contentBottomLeftText={"XXXX"}
705 colorBottomLeftTitle={"#282c34"}
706 colorBottomLeftText={"#282c34"}
707 sizeTitleBottomLeft={16}
708 sizeContentBottomLeft={16}
709
710 fontTopLeftCornerTitle={"SnapFontBold"}
711 contentTopLeftCornerTitle={"XXXXX"}
712 colorTopLeftCornerTitle={"#282c34"}
713 sizeTitleTopLeftCorner={32}
714
715 headerRightCorner={'https://i.pinimg.com/originals/ff/0e/20/ff0e20de4718fe14cdd256c81c5db771.png'}
716 formatPictureTopRightCorner={'square'}
717
718 bgCard={"white"}
719 />
720 <Button rounded
721 onPress={() => this.instagramLogin.show()}
722 title={"Log in with Facebook button"}
723 style={{flex: 1,
724 backgroundColor: 'white',
725 marginBottom: 50,
726
727 shadowColor: 'rgba(0,0,0, .4)', // IOS
728 shadowOffset: { height: 1, width: 1 }, // IOS
729 shadowOpacity: 1, // IOS
730 shadowRadius: 1, //IOS
731
732 elevation: 2,
733 marginLeft: 10,
734 marginRight: 10,
735 }}
736 >
737 <Text style={{
738 fontFamily: 'Roboto',
739 color: '#282c34',
740 fontSize: 16,
741 fontWeight: '500',
742 }}>Log in With Instagram</Text>
743 </Button>
744 <InstagramLogin
745 ref= {ref => this.instagramLogin= ref}
746 clientId='b6593dc2f7c94d51a0faf65b1d3c0093'
747 redirectUrl='https://google.com'
748 scopes={['public_content']}
749 onLoginSuccess={(token) => this.getInstagramInfoUser(token)}
750 onLoginFailure={(data) => console.log(data)}
751 />
752
753 {/* <Button rounded
754 onPress={this.logInFacebook}
755 title={"Log in with Facebook button"}
756 style={{flex: 1,
757 backgroundColor: 'white',
758 marginBottom: 50,
759
760 shadowColor: 'rgba(0,0,0, .4)', // IOS
761 shadowOffset: { height: 1, width: 1 }, // IOS
762 shadowOpacity: 1, // IOS
763 shadowRadius: 1, //IOS
764
765 elevation: 2,
766 }}
767 >
768 <Text style={{
769 fontFamily: 'Roboto',
770 color: '#282c34',
771 fontSize: 16,
772 fontWeight: '500',
773 }}>Log in With Instagram</Text>
774 </Button>*/}
775 </Container>;
776
777 let inCard =
778 <Container>
779
780 <GenericRoundedCard
781 fontBottomRightTitle={"SnapFont"}
782 fontBottomRightContent={"SnapFontLight"}
783 contentBottomRightTitle={"Relations"}
784 contentBottomRightText={"+500"}
785 sizeTitleBottomRight={16}
786 sizeContentBottomRight={16}
787 colorBottomRightTitle={"white"}
788 colorBottomRightText={"white"}
789
790 fontBottomLeftTitle={"SnapFont"}
791 fontBottomLeftContent={"SnapFontLight"}
792 contentBottomLeftTitle={"Job"}
793 contentBottomLeftText={"Étudiant chez Epitech"}
794 colorBottomLeftTitle={"white"}
795 colorBottomLeftText={"white"}
796 sizeTitleBottomLeft={16}
797 sizeContentBottomLeft={16}
798
799 fontTopLeftCornerTitle={"SnapFontBold"}
800 contentTopLeftCornerTitle={"Simon Provost"}
801 colorTopLeftCornerTitle={"white"}
802 sizeTitleTopLeftCorner={32}
803
804 headerRightCorner={'http://bullesdetalents.fr/site/wp-content/grand-media/image/picto_linkedin_blanc.png'}
805 formatPictureTopRightCorner={'square'}
806
807 bgCard={"#0077b5"}
808 />
809 <View style={{ justifyContent: 'center',
810 alignItems: 'center',}}>
811 <LinkedInModal
812 ref={ref => {
813 this.modal = ref
814 }}
815 clientID={"86vmluha5e73ou"}
816 clientSecret={"Q6p5Ft46YLlg2u6F"}
817 redirectUri="https://www.google.fr/"
818 onSuccess={data => this.getUserInfoIn(data)}
819 permissions={['r_liteprofile', 'r_emailaddress']}
820 />
821 <Button title="Open from external" onPress={() => this.modal.open()} />
822 </View>
823 {/* <Button rounded
824 onPress={this.logInFacebook}
825 title={"Log in with Facebook button"}
826 style={{flex: 1,
827 backgroundColor: '#0077b5',
828 marginBottom: 50,
829
830 shadowColor: 'rgba(0,0,0, .4)', // IOS
831 shadowOffset: { height: 1, width: 1 }, // IOS
832 shadowOpacity: 1, // IOS
833 shadowRadius: 1, //IOS
834
835 elevation: 2,
836 }}
837 >
838 <Text style={{
839 fontFamily: 'Roboto',
840 color: 'white',
841 fontSize: 16,
842 fontWeight: '500',
843 }}>Log in With Linkedin</Text>
844 </Button>*/}
845 </Container>;
846
847 return (
848 <Container>
849 <StatusBar hidden={false} translucent={true} />
850 {/* <Header style={{backgroundColor: "#3b5998",}}>
851 <Left>
852 <Button transparent
853 onPress={()=>{Alert.alert("Infos", "Done ealier...")}}
854 title={"Back button"}
855 >
856 <Icon name='arrow-back' />
857 <Text>Back</Text>
858 </Button>
859 </Left>
860 <Body>
861 <Title>Personal Social Card</Title>
862 </Body>
863 <Right>
864 <Button transparent
865 onPress={()=>{Alert.alert("Infos", "Done ealier...")}}
866 title={"Back button"}
867 >
868 <Text>Cancel</Text>
869 </Button>
870 </Right>
871 </Header> */}
872 <Swiper
873 showsPagination={true}
874 index={0}
875
876 dot={<View style={{backgroundColor:'rgba(0,0,0,.1)', width: 5, height: 5,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
877 activeDot={<View style={{backgroundColor: 'gray', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
878
879
880
881
882 >
883 {facebookCard}
884 {/* <View style={styles.container}>
885 {snapchatCard}
886 </View>
887 {twitterCard}
888 {instaCard}
889 <View style={styles.container}>
890 {inCard}
891 </View> */}
892 </Swiper>
893 </Container>
894
895 );
896 }
897}
898
899
900const styles = StyleSheet.create({
901 container: {
902 flex: 1,
903 justifyContent: 'center',
904 paddingHorizontal: 10
905 },
906 button: {
907 alignItems: 'center',
908 backgroundColor: '#DDDDDD',
909 padding: 10
910 },
911 countContainer: {
912 alignItems: 'center',
913 padding: 10
914 },
915 countText: {
916 color: '#FF00FF'
917 },
918 view: {
919 flex: 1,
920 justifyContent: 'center',
921 alignItems: 'center',
922 }
923});