aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/SocialIcon.tsx50
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/common/post/PostHeader.tsx35
-rw-r--r--src/components/onboarding/SocialMediaLinker.tsx13
4 files changed, 55 insertions, 44 deletions
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
new file mode 100644
index 00000000..5c1098af
--- /dev/null
+++ b/src/components/common/SocialIcon.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {Image} from 'react-native';
+
+interface SocialIconProps {
+ social: string;
+ style: object;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const SocialIcon: React.FC<SocialIconProps> = ({
+ social: social,
+ style: style,
+}) => {
+ switch (social) {
+ case 'Instagram':
+ var icon = require('../../assets/images/instagram-icon.png');
+ break;
+ case 'Facebook':
+ var icon = require('../../assets/images/facebook-icon.png');
+ break;
+ case 'Twitter':
+ var icon = require('../../assets/images/twitter-icon.png');
+ break;
+ case 'Twitch':
+ var icon = require('../../assets/images/twitch-icon.png');
+ break;
+ case 'Pinterest':
+ var icon = require('../../assets/images/pinterest-icon.png');
+ break;
+ case 'Whatsapp':
+ var icon = require('../../assets/images/whatsapp-icon.png');
+ break;
+ case 'Linkedin':
+ var icon = require('../../assets/images/linkedin-icon.png');
+ break;
+ case 'Snapchat':
+ var icon = require('../../assets/images/snapchat-icon.png');
+ break;
+ case 'Youtube':
+ var icon = require('../../assets/images/youtube-icon.png');
+ break;
+ default:
+ var icon = require('../../assets/images/logo.png');
+ break;
+ }
+ return <Image style={style} source={icon} />;
+};
+
+export default SocialIcon;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index cb8b9b6a..8d0ef778 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -4,3 +4,4 @@ export {default as RadioCheckbox} from './RadioCheckbox';
export {default as NavigationIcon} from './NavigationIcon';
export {default as GradientBackground} from './GradientBackground';
export {default as Post} from './post';
+export {default as SocialIcon} from './SocialIcon';
diff --git a/src/components/common/post/PostHeader.tsx b/src/components/common/post/PostHeader.tsx
index a07efd10..0e9c708b 100644
--- a/src/components/common/post/PostHeader.tsx
+++ b/src/components/common/post/PostHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import {UserType, InstagramPostType} from '../../../types';
import {View, StyleSheet, Image, Text} from 'react-native';
import {AuthContext} from '../../../routes/authentication';
+import SocialIcon from '../SocialIcon';
import moment from 'moment';
const AVATAR_DIM = 35;
@@ -16,38 +17,6 @@ const PostHeader: React.FC<PostHeaderProps> = ({
social,
}) => {
const {avatar} = React.useContext(AuthContext);
- switch (social) {
- case 'Instagram':
- var icon = require('../../../assets/images/instagram-icon.png');
- break;
- case 'Facebook':
- var icon = require('../../../assets/images/facebook-icon.png');
- break;
- case 'Twitter':
- var icon = require('../../../assets/images/twitter-icon.png');
- break;
- case 'Twitch':
- var icon = require('../../../assets/images/twitch-icon.png');
- break;
- case 'Pinterest':
- var icon = require('../../../assets/images/pinterest-icon.png');
- break;
- case 'Whatsapp':
- var icon = require('../../../assets/images/whatsapp-icon.png');
- break;
- case 'Linkedin':
- var icon = require('../../../assets/images/linkedin-icon.png');
- break;
- case 'Snapchat':
- var icon = require('../../../assets/images/snapchat-icon.png');
- break;
- case 'Youtube':
- var icon = require('../../../assets/images/youtube-icon.png');
- break;
- default:
- var icon = require('../../../assets/images/logo.png');
- break;
- }
return (
<View style={styles.container}>
@@ -61,7 +30,7 @@ const PostHeader: React.FC<PostHeaderProps> = ({
}
/>
<Text style={styles.username}>{username}</Text>
- {post && <Image style={styles.icon} source={icon} />}
+ {post && <SocialIcon style={styles.icon} social={social} />}
</View>
{post && (
<Text style={styles.timestamp}>
diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
index f1da8186..fc823979 100644
--- a/src/components/onboarding/SocialMediaLinker.tsx
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -8,6 +8,7 @@ import {
} from 'react-native';
import {LinkerType} from 'src/types';
import {SOCIAL_FONT_COLORS} from '../../constants/constants';
+import SocialIcon from '../common/SocialIcon';
interface SocialMediaLinkerProps extends TouchableOpacityProps {
social: LinkerType;
@@ -29,43 +30,33 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
switch (label) {
case 'Instagram':
- var icon = require('../../assets/images/instagram-icon.png');
var font_color = SOCIAL_FONT_COLORS.INSTAGRAM;
break;
case 'Facebook':
- var icon = require('../../assets/images/facebook-icon.png');
var font_color = SOCIAL_FONT_COLORS.FACEBOOK;
break;
case 'Twitter':
- var icon = require('../../assets/images/twitter-icon.png');
var font_color = SOCIAL_FONT_COLORS.TWITTER;
break;
case 'Twitch':
- var icon = require('../../assets/images/twitch-icon.png');
var font_color = SOCIAL_FONT_COLORS.TWITCH;
break;
case 'Pinterest':
- var icon = require('../../assets/images/pinterest-icon.png');
var font_color = SOCIAL_FONT_COLORS.PINTEREST;
break;
case 'Whatsapp':
- var icon = require('../../assets/images/whatsapp-icon.png');
var font_color = SOCIAL_FONT_COLORS.WHATSAPP;
break;
case 'Linkedin':
- var icon = require('../../assets/images/linkedin-icon.png');
var font_color = SOCIAL_FONT_COLORS.LINKEDIN;
break;
case 'Snapchat':
- var icon = require('../../assets/images/snapchat-icon.png');
var font_color = SOCIAL_FONT_COLORS.SNAPCHAT;
break;
case 'Youtube':
- var icon = require('../../assets/images/youtube-icon.png');
var font_color = SOCIAL_FONT_COLORS.YOUTUBE;
break;
default:
- var icon = require('../../assets/images/logo.png');
var font_color = '#fff';
}
@@ -74,7 +65,7 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
activeOpacity={0.7}
onPress={handlePress}
style={styles.container}>
- <Image source={icon} style={styles.icon} />
+ <SocialIcon social={label} style={styles.icon} />
<Text style={[styles.label, {color: font_color}]}>{label}</Text>
{state.authenticated && (
<Image
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:21:58 +0000