aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--metro.config.js22
-rw-r--r--package.json1
-rw-r--r--src/assets/icons/plus_icon-01.svg1
-rw-r--r--src/assets/icons/plus_icon-02.svg1
-rw-r--r--src/components/common/AvatarTitle.tsx2
-rw-r--r--src/components/profile/Content.tsx25
-rw-r--r--src/components/profile/Moment.tsx95
-rw-r--r--src/components/profile/index.ts1
-rw-r--r--src/components/taggs/Tagg.tsx2
-rw-r--r--src/constants/constants.ts22
-rw-r--r--src/declarations.d.ts6
-rw-r--r--src/routes/profile/Profile.tsx4
-rw-r--r--src/screens/profile/ProfileScreen.tsx4
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx2
14 files changed, 158 insertions, 30 deletions
diff --git a/metro.config.js b/metro.config.js
index 13a96421..8d872624 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -5,13 +5,23 @@
* @format
*/
-module.exports = {
- transformer: {
- getTransformOptions: async () => ({
+const {getDefaultConfig} = require('metro-config');
+
+module.exports = (async () => {
+ const {
+ resolver: {sourceExts, assetExts},
+ } = await getDefaultConfig();
+ return {
+ transformer: {
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
- }),
- },
-};
+ babelTransformerPath: require.resolve('react-native-svg-transformer'),
+ },
+ resolver: {
+ assetExts: assetExts.filter((ext) => ext !== 'svg'),
+ sourceExts: [...sourceExts, 'svg'],
+ },
+ };
+})();
diff --git a/package.json b/package.json
index d3874024..1b45fba8 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.0.4",
+ "react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "16.11.0",
"typescript": "^3.8.3"
},
diff --git a/src/assets/icons/plus_icon-01.svg b/src/assets/icons/plus_icon-01.svg
new file mode 100644
index 00000000..32632897
--- /dev/null
+++ b/src/assets/icons/plus_icon-01.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 216 216"><defs><style>.cls-1{fill:none;stroke:#718dc3;stroke-miterlimit:10;stroke-width:11px;}.cls-2{fill:#718dc3;}</style></defs><circle class="cls-1" cx="108" cy="108" r="84.9"/><rect class="cls-2" x="101.05" y="59.11" width="13.91" height="97.78" rx="6.34"/><rect class="cls-2" x="101.05" y="59.11" width="13.91" height="97.78" rx="6.34" transform="translate(0 216) rotate(-90)"/></svg> \ No newline at end of file
diff --git a/src/assets/icons/plus_icon-02.svg b/src/assets/icons/plus_icon-02.svg
new file mode 100644
index 00000000..25527911
--- /dev/null
+++ b/src/assets/icons/plus_icon-02.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><style>.cls-1{fill:#fff;}</style></defs><rect class="cls-1" x="25.73" width="8.54" height="60" rx="3.89"/><rect class="cls-1" x="25.73" width="8.54" height="60" rx="3.89" transform="translate(0 60) rotate(-90)"/></svg> \ No newline at end of file
diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index b6d95bd8..8c82dca9 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {Image, StyleSheet} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
-import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants';
+import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
import {AuthContext} from '../../routes/authentication';
/**
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 206fd9e4..a3b9e74a 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,19 +1,18 @@
import React, {useState} from 'react';
-import {StyleSheet, LayoutChangeEvent} from 'react-native';
+import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
import Animated from 'react-native-reanimated';
-
-import {UserType} from '../../types';
+import {defaultMoments} from '../../constants';
+import {SCREEN_HEIGHT} from '../../utils';
+import TaggsBar from '../taggs/TaggsBar';
+import Moment from './Moment';
+import ProfileBody from './ProfileBody';
import ProfileCutout from './ProfileCutout';
import ProfileHeader from './ProfileHeader';
-import ProfileBody from './ProfileBody';
-import TaggsBar from '../taggs/TaggsBar';
-import Feed from './Feed';
interface ContentProps {
y: Animated.Value<number>;
- user: UserType;
}
-const Content: React.FC<ContentProps> = ({y, user}) => {
+const Content: React.FC<ContentProps> = ({y}) => {
const [profileBodyHeight, setProfileBodyHeight] = useState(0);
const onLayout = (e: LayoutChangeEvent) => {
const {height} = e.nativeEvent.layout;
@@ -31,7 +30,11 @@ const Content: React.FC<ContentProps> = ({y, user}) => {
</ProfileCutout>
<ProfileBody {...{onLayout}} />
<TaggsBar {...{y, profileBodyHeight}} />
- <Feed {...{user}} />
+ <View style={styles.momentsContainer}>
+ {defaultMoments.map((title, index) => (
+ <Moment key={index} title={title} images={[]} />
+ ))}
+ </View>
</Animated.ScrollView>
);
};
@@ -40,6 +43,10 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
+ momentsContainer: {
+ backgroundColor: '#f2f2f2',
+ paddingBottom: SCREEN_HEIGHT / 10,
+ },
});
export default Content;
diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx
new file mode 100644
index 00000000..0fbabe8f
--- /dev/null
+++ b/src/components/profile/Moment.tsx
@@ -0,0 +1,95 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import {MOMENTS_TITLE_COLOR} from '../../constants';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface MomentProps {
+ title: string;
+ images: Array<string>;
+}
+
+const Moment: React.FC<MomentProps> = ({title, images}) => {
+ const navigation = useNavigation();
+ const navigateToImagePicker = () => {
+ Alert.alert('Perform navigation to Image Picker with Caption screen');
+ // navigation.navigate('')
+ };
+ return (
+ <View style={styles.container}>
+ <View style={styles.header}>
+ <Text style={styles.titleText}>{title}</Text>
+ <PlusIcon
+ width={21}
+ height={21}
+ onPress={() => navigateToImagePicker()}
+ />
+ </View>
+ <ScrollView
+ horizontal
+ showsHorizontalScrollIndicator={false}
+ style={styles.scrollContainer}>
+ <TouchableOpacity onPress={() => navigateToImagePicker()}>
+ <LinearGradient
+ colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
+ <View style={styles.defaultImage}>
+ <BigPlusIcon width={50} height={50} />
+ <Text style={styles.defaultImageText}>
+ Add a moment of your {title.toLowerCase()}!
+ </Text>
+ </View>
+ </LinearGradient>
+ </TouchableOpacity>
+ </ScrollView>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ backgroundColor: '#eee',
+ },
+ header: {
+ flex: 1,
+ paddingHorizontal: 10,
+ padding: 5,
+ paddingTop: 20,
+ backgroundColor: 'white',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ titleText: {
+ fontSize: 16,
+ fontWeight: 'bold',
+ color: MOMENTS_TITLE_COLOR,
+ },
+ scrollContainer: {
+ height: SCREEN_WIDTH / 2,
+ backgroundColor: '#eee',
+ },
+ defaultImage: {
+ aspectRatio: 1,
+ height: '100%',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ },
+ defaultImageText: {
+ fontSize: 20,
+ paddingTop: 20,
+ color: 'white',
+ fontWeight: 'bold',
+ width: '75%',
+ textAlign: 'center',
+ },
+});
+
+export default Moment;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index e0ca5742..2d16c830 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -1,5 +1,6 @@
export {default as Cover} from './Cover';
export {default as Content} from './Content';
+export {default as Moment} from './Moment';
export {default as ProfileCutout} from './ProfileCutout';
export {default as ProfileBody} from './ProfileBody';
export {default as ProfileHeader} from './ProfileHeader';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 9a5ec1e2..341a713a 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
-import { TAGGS_GRADIENT } from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
interface TaggProps extends ViewProps {}
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index b60b506f..76a0df03 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -35,14 +35,14 @@ export const SNAPCHAT_FONT_COLOR: string = '#FFFC00';
export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
export const TAGGS_GRADIENT = {
- 'start': '#9F00FF',
- 'end': '#27EAE9'
-}
+ start: '#9F00FF',
+ end: '#27EAE9',
+};
export const AVATAR_GRADIENT = {
- 'start': '#240041',
- 'end': '#215151'
-}
+ start: '#240041',
+ end: '#215151',
+};
export const SOCIAL_FONT_COLORS = {
INSTAGRAM: INSTAGRAM_FONT_COLOR,
@@ -55,3 +55,13 @@ export const SOCIAL_FONT_COLORS = {
SNAPCHAT: SNAPCHAT_FONT_COLOR,
YOUTUBE: YOUTUBE_FONT_COLOR,
};
+
+// Profile Moments
+export const defaultMoments: Array<string> = [
+ 'Early Life',
+ 'Best Friends',
+ 'Dance',
+ 'Education',
+];
+
+export const MOMENTS_TITLE_COLOR: string = '#698DD3';
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
new file mode 100644
index 00000000..e5bbc768
--- /dev/null
+++ b/src/declarations.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+ import React from 'react';
+ import {SvgProps} from 'react-native-svg';
+ const content: React.FC<SvgProps>;
+ export default content;
+}
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index faab0bde..caa75f3b 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -1,10 +1,6 @@
import React from 'react';
-import {Image, StyleSheet} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
import {AvatarTitle} from '../../components';
-import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
import {ProfileScreen, SocialMediaTaggs} from '../../screens';
-import {AuthContext} from '../authentication';
import {ProfileStack} from './ProfileStack';
const Profile: React.FC = () => {
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index ea557063..cc388ffd 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import {Cover, Content, TabsGradient} from '../../components';
+import {StatusBar} from 'react-native';
import Animated from 'react-native-reanimated';
+import {Content, Cover, TabsGradient} from '../../components';
import {AuthContext} from '../../routes/authentication';
-import {StatusBar} from 'react-native';
/**
* Profile Screen for a user's logged in profile
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 8bc5e4d8..9e4f2aea 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -2,7 +2,7 @@ import {RouteProp} from '@react-navigation/native';
import React from 'react';
import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
-import { AVATAR_GRADIENT } from '../../constants';
+import {AVATAR_GRADIENT} from '../../constants';
import {SocialMediaInfo, TabsGradient, TaggsFeed} from '../../components';
import {AuthContext, ProfileStackParams} from '../../routes';
import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 09:34:37 +0000