Created
March 6, 2025 15:56
-
-
Save burakorkmez/40f5b4a19321074d144d34750e8b9823 to your computer and use it in GitHub Desktop.
React Native Spotlight - Styles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/auth.styles.ts | |
| import { COLORS } from "@/constants/theme"; | |
| import { StyleSheet, Dimensions } from "react-native"; | |
| const { width, height } = Dimensions.get("window"); | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| brandSection: { | |
| alignItems: "center", | |
| marginTop: height * 0.12, | |
| }, | |
| logoContainer: { | |
| width: 60, | |
| height: 60, | |
| borderRadius: 18, | |
| backgroundColor: "rgba(74, 222, 128, 0.15)", | |
| justifyContent: "center", | |
| alignItems: "center", | |
| marginBottom: 20, | |
| }, | |
| appName: { | |
| fontSize: 42, | |
| fontWeight: "700", | |
| fontFamily: "JetBrainsMono-Medium", | |
| color: COLORS.primary, | |
| letterSpacing: 0.5, | |
| marginBottom: 8, | |
| }, | |
| tagline: { | |
| fontSize: 16, | |
| color: COLORS.grey, | |
| letterSpacing: 1, | |
| textTransform: "lowercase", | |
| }, | |
| illustrationContainer: { | |
| flex: 1, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| paddingHorizontal: 40, | |
| }, | |
| illustration: { | |
| width: width * 0.75, | |
| height: width * 0.75, | |
| maxHeight: 280, | |
| }, | |
| loginSection: { | |
| width: "100%", | |
| paddingHorizontal: 24, | |
| paddingBottom: 40, | |
| alignItems: "center", | |
| }, | |
| googleButton: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| justifyContent: "center", | |
| backgroundColor: COLORS.white, | |
| paddingVertical: 16, | |
| paddingHorizontal: 24, | |
| borderRadius: 14, | |
| marginBottom: 20, | |
| width: "100%", | |
| maxWidth: 300, | |
| shadowColor: "#000", | |
| shadowOffset: { | |
| width: 0, | |
| height: 4, | |
| }, | |
| shadowOpacity: 0.15, | |
| shadowRadius: 12, | |
| elevation: 5, | |
| }, | |
| googleIconContainer: { | |
| width: 24, | |
| height: 24, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| marginRight: 12, | |
| }, | |
| googleButtonText: { | |
| fontSize: 16, | |
| fontWeight: "600", | |
| color: COLORS.surface, | |
| }, | |
| termsText: { | |
| textAlign: "center", | |
| fontSize: 12, | |
| color: COLORS.grey, | |
| maxWidth: 280, | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/create.styles.ts | |
| import { StyleSheet, Dimensions } from "react-native"; | |
| import { COLORS } from "@/constants/theme"; | |
| const { width } = Dimensions.get("window"); | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| contentContainer: { | |
| flex: 1, | |
| }, | |
| header: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| justifyContent: "space-between", | |
| paddingHorizontal: 16, | |
| paddingVertical: 12, | |
| borderBottomWidth: 0.5, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| headerTitle: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| color: COLORS.white, | |
| }, | |
| contentDisabled: { | |
| opacity: 0.7, | |
| }, | |
| shareButton: { | |
| paddingHorizontal: 12, | |
| paddingVertical: 6, | |
| minWidth: 60, | |
| alignItems: "center", | |
| justifyContent: "center", | |
| }, | |
| shareButtonDisabled: { | |
| opacity: 0.5, | |
| }, | |
| shareText: { | |
| color: COLORS.primary, | |
| fontSize: 16, | |
| fontWeight: "600", | |
| }, | |
| shareTextDisabled: { | |
| color: COLORS.grey, | |
| }, | |
| emptyImageContainer: { | |
| flex: 1, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| gap: 12, | |
| }, | |
| emptyImageText: { | |
| color: COLORS.grey, | |
| fontSize: 16, | |
| }, | |
| content: { | |
| flex: 1, | |
| }, | |
| scrollContent: { | |
| flexGrow: 1, | |
| }, | |
| imageSection: { | |
| width: width, | |
| height: width, | |
| backgroundColor: COLORS.surface, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| }, | |
| previewImage: { | |
| width: "100%", | |
| height: "100%", | |
| }, | |
| changeImageButton: { | |
| position: "absolute", | |
| bottom: 16, | |
| right: 16, | |
| backgroundColor: "rgba(0, 0, 0, 0.75)", | |
| flexDirection: "row", | |
| alignItems: "center", | |
| padding: 8, | |
| borderRadius: 8, | |
| gap: 6, | |
| }, | |
| changeImageText: { | |
| color: COLORS.white, | |
| fontSize: 14, | |
| fontWeight: "500", | |
| }, | |
| inputSection: { | |
| padding: 16, | |
| flex: 1, | |
| }, | |
| captionContainer: { | |
| flexDirection: "row", | |
| alignItems: "flex-start", | |
| }, | |
| userAvatar: { | |
| width: 36, | |
| height: 36, | |
| borderRadius: 18, | |
| marginRight: 12, | |
| }, | |
| captionInput: { | |
| flex: 1, | |
| color: COLORS.white, | |
| fontSize: 16, | |
| paddingTop: 8, | |
| minHeight: 40, | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/feed.styles.ts | |
| import { COLORS } from "@/constants/theme"; | |
| import { Dimensions, Platform, StyleSheet } from "react-native"; | |
| const { width } = Dimensions.get("window"); | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| header: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| paddingHorizontal: 16, | |
| paddingVertical: 12, | |
| borderBottomWidth: 1, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| headerTitle: { | |
| fontSize: 24, | |
| fontFamily: "JetBrainsMono-Medium", | |
| color: COLORS.primary, | |
| }, | |
| storiesContainer: { | |
| paddingVertical: 12, | |
| borderBottomWidth: 1, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| storyWrapper: { | |
| alignItems: "center", | |
| marginHorizontal: 8, | |
| width: 72, | |
| }, | |
| storyRing: { | |
| width: 68, | |
| height: 68, | |
| borderRadius: 34, | |
| padding: 2, | |
| backgroundColor: COLORS.background, | |
| borderWidth: 2, | |
| borderColor: COLORS.primary, | |
| marginBottom: 4, | |
| }, | |
| noStory: { | |
| borderColor: COLORS.grey, | |
| }, | |
| storyAvatar: { | |
| width: 60, | |
| height: 60, | |
| borderRadius: 30, | |
| borderWidth: 2, | |
| borderColor: COLORS.background, | |
| }, | |
| storyUsername: { | |
| fontSize: 11, | |
| color: COLORS.white, | |
| textAlign: "center", | |
| }, | |
| post: { | |
| marginBottom: 16, | |
| }, | |
| postHeader: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| justifyContent: "space-between", | |
| padding: 12, | |
| }, | |
| postHeaderLeft: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| }, | |
| postAvatar: { | |
| width: 32, | |
| height: 32, | |
| borderRadius: 16, | |
| marginRight: 8, | |
| }, | |
| postUsername: { | |
| fontSize: 14, | |
| fontWeight: "600", | |
| color: COLORS.white, | |
| }, | |
| postImage: { | |
| width: width, | |
| height: width, | |
| }, | |
| postActions: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| paddingHorizontal: 12, | |
| paddingVertical: 12, | |
| }, | |
| postActionsLeft: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| gap: 16, | |
| }, | |
| postInfo: { | |
| paddingHorizontal: 12, | |
| }, | |
| likesText: { | |
| fontSize: 14, | |
| fontWeight: "600", | |
| color: COLORS.white, | |
| marginBottom: 6, | |
| }, | |
| captionContainer: { | |
| flexDirection: "row", | |
| flexWrap: "wrap", | |
| marginBottom: 6, | |
| }, | |
| captionUsername: { | |
| fontSize: 14, | |
| fontWeight: "600", | |
| color: COLORS.white, | |
| marginRight: 6, | |
| }, | |
| captionText: { | |
| fontSize: 14, | |
| color: COLORS.white, | |
| flex: 1, | |
| }, | |
| commentsText: { | |
| fontSize: 14, | |
| color: COLORS.grey, | |
| marginBottom: 4, | |
| }, | |
| timeAgo: { | |
| fontSize: 12, | |
| color: COLORS.grey, | |
| marginBottom: 8, | |
| }, | |
| modalContainer: { | |
| backgroundColor: COLORS.background, | |
| marginBottom: Platform.OS === "ios" ? 44 : 0, | |
| flex: 1, | |
| marginTop: Platform.OS === "ios" ? 44 : 0, | |
| }, | |
| modalHeader: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| paddingHorizontal: 16, | |
| height: 56, | |
| borderBottomWidth: 0.5, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| modalTitle: { | |
| color: COLORS.white, | |
| fontSize: 16, | |
| fontWeight: "600", | |
| }, | |
| commentsList: { | |
| flex: 1, | |
| }, | |
| commentContainer: { | |
| flexDirection: "row", | |
| paddingHorizontal: 16, | |
| paddingVertical: 12, | |
| borderBottomWidth: 0.5, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| commentAvatar: { | |
| width: 32, | |
| height: 32, | |
| borderRadius: 16, | |
| marginRight: 12, | |
| }, | |
| commentContent: { | |
| flex: 1, | |
| }, | |
| commentUsername: { | |
| color: COLORS.white, | |
| fontWeight: "500", | |
| marginBottom: 4, | |
| }, | |
| commentText: { | |
| color: COLORS.white, | |
| fontSize: 14, | |
| lineHeight: 20, | |
| }, | |
| commentTime: { | |
| color: COLORS.grey, | |
| fontSize: 12, | |
| marginTop: 4, | |
| }, | |
| commentInput: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| paddingHorizontal: 16, | |
| paddingVertical: 12, | |
| borderTopWidth: 0.5, | |
| borderTopColor: COLORS.surface, | |
| backgroundColor: COLORS.background, | |
| }, | |
| input: { | |
| flex: 1, | |
| color: COLORS.white, | |
| paddingVertical: 8, | |
| paddingHorizontal: 16, | |
| marginRight: 12, | |
| backgroundColor: COLORS.surface, | |
| borderRadius: 20, | |
| fontSize: 14, | |
| }, | |
| postButton: { | |
| color: COLORS.primary, | |
| fontWeight: "600", | |
| fontSize: 14, | |
| }, | |
| postButtonDisabled: { | |
| opacity: 0.5, | |
| }, | |
| centered: { | |
| justifyContent: "center", | |
| alignItems: "center", | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/notifications.styles.ts | |
| import { StyleSheet } from "react-native"; | |
| import { COLORS } from "@/constants/theme"; | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| header: { | |
| paddingHorizontal: 16, | |
| paddingVertical: 12, | |
| borderBottomWidth: 0.5, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| headerTitle: { | |
| fontSize: 24, | |
| fontFamily: "JetBrainsMono-Medium", | |
| color: COLORS.primary, | |
| }, | |
| listContainer: { | |
| padding: 16, | |
| }, | |
| notificationItem: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| marginBottom: 20, | |
| }, | |
| notificationContent: { | |
| flex: 1, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| marginRight: 12, | |
| }, | |
| avatarContainer: { | |
| position: "relative", | |
| marginRight: 12, | |
| }, | |
| avatar: { | |
| width: 44, | |
| height: 44, | |
| borderRadius: 22, | |
| borderWidth: 2, | |
| borderColor: COLORS.surface, | |
| }, | |
| iconBadge: { | |
| position: "absolute", | |
| bottom: -4, | |
| right: -4, | |
| backgroundColor: COLORS.background, | |
| borderRadius: 12, | |
| width: 24, | |
| height: 24, | |
| alignItems: "center", | |
| justifyContent: "center", | |
| borderWidth: 2, | |
| borderColor: COLORS.surface, | |
| }, | |
| notificationInfo: { | |
| flex: 1, | |
| }, | |
| username: { | |
| color: COLORS.white, | |
| fontSize: 14, | |
| fontWeight: "600", | |
| marginBottom: 2, | |
| }, | |
| action: { | |
| color: COLORS.grey, | |
| fontSize: 14, | |
| marginBottom: 2, | |
| }, | |
| timeAgo: { | |
| color: COLORS.grey, | |
| fontSize: 12, | |
| }, | |
| postImage: { | |
| width: 44, | |
| height: 44, | |
| borderRadius: 6, | |
| }, | |
| centered: { | |
| justifyContent: "center", | |
| alignItems: "center", | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/profile.styles.ts | |
| import { COLORS } from "@/constants/theme"; | |
| import { Dimensions, StyleSheet } from "react-native"; | |
| const { width, height } = Dimensions.get("window"); | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| header: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| paddingHorizontal: 16, | |
| paddingVertical: 12, | |
| borderBottomWidth: 0.5, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| headerLeft: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| }, | |
| username: { | |
| fontSize: 20, | |
| fontWeight: "700", | |
| color: COLORS.white, | |
| }, | |
| headerRight: { | |
| flexDirection: "row", | |
| gap: 16, | |
| }, | |
| headerIcon: { | |
| padding: 4, | |
| }, | |
| profileInfo: { | |
| padding: 16, | |
| }, | |
| avatarAndStats: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| marginBottom: 16, | |
| }, | |
| avatarContainer: { | |
| marginRight: 32, | |
| }, | |
| avatar: { | |
| width: 86, | |
| height: 86, | |
| borderRadius: 43, | |
| borderWidth: 2, | |
| borderColor: COLORS.surface, | |
| }, | |
| statsContainer: { | |
| flex: 1, | |
| flexDirection: "row", | |
| justifyContent: "space-around", | |
| }, | |
| statItem: { | |
| alignItems: "center", | |
| }, | |
| statNumber: { | |
| fontSize: 17, | |
| fontWeight: "700", | |
| color: COLORS.white, | |
| marginBottom: 4, | |
| }, | |
| statLabel: { | |
| fontSize: 13, | |
| color: COLORS.grey, | |
| }, | |
| name: { | |
| fontSize: 15, | |
| fontWeight: "600", | |
| color: COLORS.white, | |
| marginBottom: 4, | |
| }, | |
| bio: { | |
| fontSize: 14, | |
| color: COLORS.white, | |
| lineHeight: 20, | |
| }, | |
| actionButtons: { | |
| flexDirection: "row", | |
| gap: 8, | |
| marginTop: 8, | |
| }, | |
| editButton: { | |
| flex: 1, | |
| backgroundColor: COLORS.surface, | |
| padding: 8, | |
| borderRadius: 8, | |
| alignItems: "center", | |
| }, | |
| editButtonText: { | |
| color: COLORS.white, | |
| fontWeight: "600", | |
| fontSize: 14, | |
| }, | |
| shareButton: { | |
| backgroundColor: COLORS.surface, | |
| padding: 8, | |
| borderRadius: 8, | |
| aspectRatio: 1, | |
| alignItems: "center", | |
| justifyContent: "center", | |
| }, | |
| gridItem: { | |
| flex: 1 / 3, | |
| aspectRatio: 1, | |
| padding: 1, | |
| }, | |
| gridImage: { | |
| flex: 1, | |
| }, | |
| modalContainer: { | |
| flex: 1, | |
| backgroundColor: "rgba(0, 0, 0, 0.5)", | |
| justifyContent: "flex-end", | |
| }, | |
| modalContent: { | |
| backgroundColor: COLORS.background, | |
| borderTopLeftRadius: 20, | |
| borderTopRightRadius: 20, | |
| padding: 20, | |
| minHeight: 400, | |
| }, | |
| modalHeader: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| marginBottom: 20, | |
| }, | |
| modalTitle: { | |
| color: COLORS.white, | |
| fontSize: 18, | |
| fontWeight: "600", | |
| }, | |
| inputContainer: { | |
| marginBottom: 20, | |
| }, | |
| inputLabel: { | |
| color: COLORS.grey, | |
| marginBottom: 8, | |
| fontSize: 14, | |
| }, | |
| input: { | |
| backgroundColor: COLORS.surface, | |
| borderRadius: 8, | |
| padding: 12, | |
| color: COLORS.white, | |
| fontSize: 16, | |
| }, | |
| bioInput: { | |
| height: 100, | |
| textAlignVertical: "top", | |
| }, | |
| saveButton: { | |
| backgroundColor: COLORS.primary, | |
| padding: 16, | |
| borderRadius: 8, | |
| alignItems: "center", | |
| marginTop: 20, | |
| }, | |
| saveButtonText: { | |
| color: COLORS.background, | |
| fontSize: 16, | |
| fontWeight: "600", | |
| }, | |
| modalBackdrop: { | |
| flex: 1, | |
| backgroundColor: "rgba(0, 0, 0, 0.9)", | |
| justifyContent: "center", | |
| }, | |
| postDetailContainer: { | |
| backgroundColor: COLORS.background, | |
| maxHeight: height * 0.9, | |
| }, | |
| postDetailHeader: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| justifyContent: "flex-end", | |
| padding: 12, | |
| borderBottomWidth: 0.5, | |
| borderBottomColor: COLORS.surface, | |
| }, | |
| postDetailImage: { | |
| width: width, | |
| height: width, | |
| }, | |
| followButton: { | |
| backgroundColor: COLORS.primary, | |
| paddingHorizontal: 24, | |
| paddingVertical: 8, | |
| borderRadius: 8, | |
| marginTop: 16, | |
| }, | |
| followingButton: { | |
| backgroundColor: COLORS.surface, | |
| borderWidth: 1, | |
| borderColor: COLORS.primary, | |
| }, | |
| followButtonText: { | |
| color: COLORS.white, | |
| fontSize: 14, | |
| fontWeight: "600", | |
| textAlign: "center", | |
| }, | |
| followingButtonText: { | |
| color: COLORS.white, | |
| textAlign: "center", | |
| }, | |
| noPostsContainer: { | |
| alignItems: "center", | |
| justifyContent: "center", | |
| paddingVertical: 48, | |
| gap: 12, | |
| flex: 1, | |
| }, | |
| noPostsText: { | |
| color: COLORS.grey, | |
| fontSize: 16, | |
| }, | |
| centered: { | |
| flex: 1, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| }, | |
| postsGrid: { | |
| flex: 1, | |
| flexDirection: "row", | |
| flexWrap: "wrap", | |
| justifyContent: "space-between", | |
| }, | |
| headerTitle: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| color: COLORS.white, | |
| }, | |
| }); |
Well done bro, keep it up
Thank you, I really do appreciate
Thank You, Bro this is very usefull for me
Best react course ever bro 👍 I really enjoyed it and understood
Thanks you brother
Thanks a lot bro, it was really amazing
nice work
thank you
great work
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you