Read more
const ComponentFunction = function() {
const React = require('react');
const { useState, useEffect, useContext, useMemo, useCallback } = React;
const { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput, Modal, Alert, Platform, StatusBar, ActivityIndicator, KeyboardAvoidingView, FlatList, Image } = require('react-native');
const { MaterialIcons } = require('@expo/vector-icons');
const { createBottomTabNavigator } = require('@react-navigation/bottom-tabs');
const storageStrategy = 'local';
const primaryColor = '#9146FF';
const accentColor = '#F7931E';
const backgroundColor = '#0F0F23';
const cardColor = '#18181B';
const textPrimary = '#FFFFFF';
const textSecondary = '#ADADB8';
const designStyle = 'modern';
const Tab = createBottomTabNavigator();
const ThemeContext = React.createContext();
const ThemeProvider = function(props) {
const [darkMode, setDarkMode] = useState(true);
const lightTheme = useMemo(function() {
return {
colors: {
primary: primaryColor,
accent: accentColor,
background: '#FFFFFF',
card: '#F8F8F8',
textPrimary: '#1F2937',
textSecondary: '#6B7280',
border: '#E5E7EB',
success: '#10B981',
error: '#EF4444',
warning: '#F59E0B'
}
};
}, []);
const darkTheme = useMemo(function() {
return {
colors: {
primary: primaryColor,
accent: accentColor,
background: backgroundColor,
card: cardColor,
textPrimary: textPrimary,
textSecondary: textSecondary,
border: '#262626',
success: '#10B981',
error: '#EF4444',
warning: '#F59E0B'
}
};
}, []);
const theme = darkMode ? darkTheme : lightTheme;
const toggleDarkMode = useCallback(function() {
setDarkMode(function(prev) { return !prev; });
}, []);
const value = useMemo(function() {
return { theme: theme, darkMode: darkMode, toggleDarkMode: toggleDarkMode, designStyle: designStyle };
}, [theme, darkMode, toggleDarkMode]);
return React.createElement(ThemeContext.Provider, { value: value }, props.children);
};
const useTheme = function() { return useContext(ThemeContext); };
const HomeScreen = function() {
const themeContext = useTheme();
const theme = themeContext.theme;
const [streams, setStreams] = useState([
{ id: '1', title: 'Epic Gaming Session', streamer: 'ProGamer123', category: 'Gaming', viewers: 1234, thumbnail: 'https://via.placeholder.com/300x200/9146FF/FFFFFF?text=Gaming', isLive: true },
{ id: '2', title: 'Chill Music Vibes', streamer: 'MusicMaven', category: 'Music', viewers: 856, thumbnail: 'https://via.placeholder.com/300x200/F7931E/FFFFFF?text=Music', isLive: true },
{ id: '3', title: 'Digital Art Creation', streamer: 'ArtistPro', category: 'Art', viewers: 432, thumbnail: 'https://via.placeholder.com/300x200/10B981/FFFFFF?text=Art', isLive: true },
{ id: '4', title: 'Cooking Masterclass', streamer: 'ChefMaster', category: 'Cooking', viewers: 678, thumbnail: 'https://via.placeholder.com/300x200/EF4444/FFFFFF?text=Cooking', isLive: true }
]);
const [selectedCategory, setSelectedCategory] = useState('All');
const [followedStreamers, setFollowedStreamers] = useState(['ProGamer123', 'MusicMaven']);
const [searchQuery, setSearchQuery] = useState('');
const categories = ['All', 'Gaming', 'Music', 'Art', 'Cooking', 'Talk Shows'];
const filteredStreams = useMemo(function() {
return streams.filter(function(stream) {
const matchesCategory = selectedCategory === 'All' || stream.category === selectedCategory;
const matchesSearch = stream.title.toLowerCase().includes(searchQuery.toLowerCase()) || stream.streamer.toLowerCase().includes(searchQuery.toLowerCase());
return matchesCategory && matchesSearch;
});
}, [streams, selectedCategory, searchQuery]);
const toggleFollow = function(streamer) {
setFollowedStreamers(function(prev) {
if (prev.includes(streamer)) {
return prev.filter(function(s) { return s !== streamer; });
} else {
return prev.concat([streamer]);
}
});
const message = followedStreamers.includes(streamer) ? 'Unfollowed ' + streamer : 'Now following ' + streamer;
Platform.OS === 'web' ? window.alert(message) : Alert.alert('Success', message);
};
const renderStreamCard = function(item) {
const stream = item.item;
const isFollowed = followedStreamers.includes(stream.streamer);
return React.createElement(View, {
style: [styles.streamCard, { backgroundColor: theme.colors.card }],
componentId: 'stream-card-' + stream.id
},
React.createElement(Image, {
source: { uri: stream.thumbnail },
style: styles.streamThumbnail,
componentId: 'stream-thumbnail-' + stream.id
}),
React.createElement(View, { style: styles.streamInfo },
React.createElement(View, { style: styles.streamHeader },
React.createElement(View, { style: styles.liveIndicator },
React.createElement(Text, { style: styles.liveText }, 'LIVE'),
React.createElement(View, { style: styles.liveDot })
),
React.createElement(Text, { style: [styles.viewerCount, { color: theme.colors.textSecondary }] },
stream.viewers.toLocaleString() + ' viewers'
)
),
React.createElement(Text, {
style: [styles.streamTitle, { color: theme.colors.textPrimary }],
componentId: 'stream-title-' + stream.id
}, stream.title),
React.createElement(Text, {
style: [styles.streamerName, { color: theme.colors.textSecondary }]
}, stream.streamer),
React.createElement(View, { style: styles.streamFooter },
React.createElement(View, { style: [styles.categoryTag, { backgroundColor: theme.colors.primary }] },
React.createElement(Text, { style: styles.categoryText }, stream.category)
),
React.createElement(TouchableOpacity, {
style: [styles.followButton, {
backgroundColor: isFollowed ? theme.colors.accent : 'transparent',
borderColor: theme.colors.accent
}],
onPress: function() { toggleFollow(stream.streamer); },
componentId: 'follow-button-' + stream.id
},
React.createElement(MaterialIcons, {
name: isFollowed ? 'favorite' : 'favorite-border',
size: 16,
color: isFollowed ? '#FFFFFF' : theme.colors.accent
}),
React.createElement(Text, {
style: [styles.followButtonText, {
color: isFollowed ? '#FFFFFF' : theme.colors.accent
}]
}, isFollowed ? 'Following' : 'Follow')
)
)
)
);
};
return React.createElement(View, {
style: [styles.container, { backgroundColor: theme.colors.background }],
componentId: 'home-screen'
},
React.createElement(View, { style: [styles.header, { backgroundColor: theme.colors.card }] },
React.createElement(Text, {
style: [styles.headerTitle, { color: theme.colors.textPrimary }],
componentId: 'home-title'
}, 'StreamSocial'),
React.createElement(View, { style: styles.searchContainer },
React.createElement(MaterialIcons, {
name: 'search',
size: 20,
color: theme.colors.textSecondary,
style: styles.searchIcon
}),
React.createElement(TextInput, {
style: [styles.searchInput, {
backgroundColor: theme.colors.background,
color: theme.colors.textPrimary,
borderColor: theme.colors.border
}],
placeholder: 'Search streams...',
placeholderTextColor: theme.colors.textSecondary,
value: searchQuery,
onChangeText: setSearchQuery,
componentId: 'search-input'
})
)
),
React.createElement(ScrollView, {
horizontal: true,
showsHorizontalScrollIndicator: false,
style: styles.categoriesContainer,
contentContainerStyle: styles.categoriesContent
},
categories.map(function(category) {
const isSelected = category === selectedCategory;
return React.createElement(TouchableOpacity, {
key: category,
style: [styles.categoryChip, {
backgroundColor: isSelected ? theme.colors.primary : 'transparent',
borderColor: theme.colors.primary
}],
onPress: function() { setSelectedCategory(category); },
componentId: 'category-' + category.toLowerCase()
},
React.createElement(Text, {
style: [styles.categoryChipText, {
color: isSelected ? '#FFFFFF' : theme.colors.primary
}]
}, category)
);
})
),
React.createElement(FlatList, {
data: filteredStreams,
renderItem: renderStreamCard,
keyExtractor: function(item) { return item.id; },
contentContainerStyle: { paddingBottom: Platform.OS === 'web' ? 90 : 100 },
showsVerticalScrollIndicator: false,
componentId: 'streams-list'
})
);
};
const FollowingScreen = function() {
const themeContext = useTheme();
const theme = themeContext.theme;
const [followedStreamers] = useState(['ProGamer123', 'MusicMaven']);
const [liveStreams] = useState([
{ id: '1', title: 'Epic Gaming Session', streamer: 'ProGamer123', category: 'Gaming', viewers: 1234, isLive: true },
{ id: '2', title: 'Chill Music Vibes', streamer: 'MusicMaven', category: 'Music', viewers: 856, isLive: true }
]);
const [notifications, setNotifications] = useState(true);
const toggleNotifications = function() {
setNotifications(function(prev) { return !prev; });
const message = notifications ? 'Notifications disabled' : 'Notifications enabled';
Platform.OS === 'web' ? window.alert(message) : Alert.alert('Settings', message);
};
return React.createElement(View, {
style: [styles.container, { backgroundColor: theme.colors.background }],
componentId: 'following-screen'
},
React.createElement(View, { style: [styles.header, { backgroundColor: theme.colors.card }] },
React.createElement(Text, {
style: [styles.headerTitle, { color: theme.colors.textPrimary }],
componentId: 'following-title'
}, 'Following'),
React.createElement(TouchableOpacity, {
style: styles.notificationButton,
onPress: toggleNotifications,
componentId: 'notification-toggle'
},
React.createElement(MaterialIcons, {
name: notifications ? 'notifications' : 'notifications-off',
size: 24,
color: theme.colors.primary
})
)
),
React.createElement(ScrollView, {
contentContainerStyle: { paddingBottom: Platform.OS === 'web' ? 90 : 100 }
},
React.createElement(View, { style: styles.sectionContainer },
React.createElement(Text, {
style: [styles.sectionTitle, { color: theme.colors.textPrimary }]
}, 'Live Now (' + liveStreams.length + ')'),
liveStreams.map(function(stream) {
return React.createElement(View, {
key: stream.id,
style: [styles.followingStreamCard, { backgroundColor: theme.colors.card }],
componentId: 'following-stream-' + stream.id
},
React.createElement(View, { style: styles.streamCardContent },
React.createElement(View, { style: styles.streamerInfo },
React.createElement(View, { style: [styles.avatarContainer, { backgroundColor: theme.colors.primary }] },
React.createElement(Text, { style: styles.avatarText },
stream.streamer.charAt(0).toUpperCase()
)
),
React.createElement(View, { style: styles.streamerDetails },
React.createElement(Text, {
style: [styles.streamerNameLarge, { color: theme.colors.textPrimary }]
}, stream.streamer),
React.createElement(Text, {
style: [styles.streamTitleSmall, { color: theme.colors.textSecondary }]
}, stream.title)
)
),
React.createElement(View, { style: styles.streamStatus },
React.createElement(View, { style: styles.liveIndicatorSmall },
React.createElement(View, { style: styles.liveDotSmall }),
React.createElement(Text, { style: styles.liveTextSmall }, 'LIVE')
),
React.createElement(Text, {
style: [styles.viewerCountSmall, { color: theme.colors.textSecondary }]
}, stream.viewers.toLocaleString())
)
)
);
})
),
React.createElement(View, { style: styles.sectionContainer },
React.createElement(Text, {
style: [styles.sectionTitle, { color: theme.colors.textPrimary }]
}, 'All Followed (' + followedStreamers.length + ')'),
followedStreamers.map(function(streamer, index) {
const isLive = liveStreams.some(function(stream) { return stream.streamer === streamer; });
return React.createElement(View, {
key: streamer,
style: [styles.followerCard, { backgroundColor: theme.colors.card }],
componentId: 'follower-' + index
},
React.createElement(View, { style: [styles.avatarContainer, { backgroundColor: theme.colors.primary }] },
React.createElement(Text, { style: styles.avatarText },
streamer.charAt(0).toUpperCase()
)
),
React.createElement(View, { style: styles.followerInfo },
React.createElement(Text, {
style: [styles.followerName, { color: theme.colors.textPrimary }]
}, streamer),
React.createElement(Text, {
style: [styles.followerStatus, {
color: isLive ? theme.colors.success : theme.colors.textSecondary
}]
}, isLive ? 'Live now' : 'Offline')
),
isLive && React.createElement(View, { style: styles.liveDotSmall })
);
})
)
)
);
};
const GoLiveScreen = function() {
const themeContext = useTheme();
const theme = themeContext.theme;
const [streamTitle, setStreamTitle] = useState('');
const [streamCategory, setStreamCategory] = useState('Gaming');
const [streamDescription, setStreamDescription] = useState('');
const [isStreaming, setIsStreaming] = useState(false);
const categories = ['Gaming', 'Music', 'Art', 'Cooking', 'Talk Shows', 'Sports', 'Educational'];
const startStream = function() {
if (!streamTitle.trim()) {
Platform.OS === 'web' ? window.alert('Please enter a stream title') : Alert.alert('Required', 'Please enter a stream title');
return;
}
setIsStreaming(true);
Platform.OS === 'web' ? window.alert('Stream started!\n\nTitle: ' + streamTitle + '\nCategory: ' + streamCategory) : Alert.alert('Stream Live', 'Your stream is now live!\n\nTitle: ' + streamTitle + '\nCategory: ' + streamCategory);
};
const stopStream = function() {
setIsStreaming(false);
setStreamTitle('');
setStreamDescription('');
Platform.OS === 'web' ? window.alert('Stream ended') : Alert.alert('Stream Ended', 'Your stream has been stopped');
};
return React.createElement(View, {
style: [styles.container, { backgroundColor: theme.colors.background }],
componentId: 'golive-screen'
},
React.createElement(View, { style: [styles.header, { backgroundColor: theme.colors.card }] },
React.createElement(Text, {
style: [styles.headerTitle, { color: theme.colors.textPrimary }],
componentId: 'golive-title'
}, 'Go Live')
),
isStreaming ? React.createElement(View, {
style: [styles.liveStreamingContainer, { backgroundColor: theme.colors.card }],
componentId: 'live-streaming-container'
},
React.createElement(View, { style: styles.streamingPreview },
React.createElement(View, { style: [styles.previewBox, { backgroundColor: '#000' }] },
React.createElement(View, { style: styles.liveOverlay },
React.createElement(View, { style: styles.liveIndicator },
React.createElement(View, { style: styles.liveDot }),
React.createElement(Text, { style: styles.liveText }, 'LIVE')
),
React.createElement(Text, {
style: [styles.previewTitle, { color: theme.colors.textPrimary }]
}, streamTitle)
)
)
),
React.createElement(View, { style: styles.liveStats },
React.createElement(View, { style: styles.statItem },
React.createElement(MaterialIcons, {
name: 'people',
size: 20,
color: theme.colors.primary
}),
React.createElement(Text, {
style: [styles.statText, { color: theme.colors.textPrimary }]
}, '0 viewers')
),
React.createElement(View, { style: styles.statItem },
React.createElement(MaterialIcons, {
name: 'timer',
size: 20,
color: theme.colors.primary
}),
React.createElement(Text, {
style: [styles.statText, { color: theme.colors.textPrimary }]
}, '0:00')
)
),
React.createElement(TouchableOpacity, {
style: [styles.stopButton, { backgroundColor: theme.colors.error }],
onPress: stopStream,
componentId: 'stop-stream-button'
},
React.createElement(MaterialIcons, {
name: 'stop',
size: 20,
color: '#FFFFFF'
}),
React.createElement(Text, { style: styles.buttonText }, 'Stop Streaming')
)
) : React.createElement(ScrollView, {
contentContainerStyle: { paddingBottom: Platform.OS === 'web' ? 90 : 100 }
},
React.createElement(View, { style: styles.formContainer },
React.createElement(Text, {
style: [styles.formLabel, { color: theme.colors.textPrimary }]
}, 'Stream Title'),
React.createElement(TextInput, {
style: [styles.textInput, {
backgroundColor: theme.colors.card,
color: theme.colors.textPrimary,
borderColor: theme.colors.border
}],
placeholder: 'Enter your stream title',
placeholderTextColor: theme.colors.textSecondary,
value: streamTitle,
onChangeText: setStreamTitle,
componentId: 'stream-title-input'
}),
React.createElement(Text, {
style: [styles.formLabel, { color: theme.colors.textPrimary, marginTop: 20 }]
}, 'Category'),
React.createElement(ScrollView, {
horizontal: true,
showsHorizontalScrollIndicator: false,
style: styles.categorySelector
},
categories.map(function(category) {
const isSelected = category === streamCategory;
return React.createElement(TouchableOpacity, {
key: category,
style: [styles.categoryOption, {
backgroundColor: isSelected ? theme.colors.primary : theme.colors.card,
borderColor: theme.colors.primary
}],
onPress: function() { setStreamCategory(category); },
componentId: 'category-select-' + category.toLowerCase()
},
React.createElement(Text, {
style: [styles.categoryOptionText, {
color: isSelected ? '#FFFFFF' : theme.colors.textPrimary
}]
}, category)
);
})
),
React.createElement(Text, {
style: [styles.formLabel, { color: theme.colors.textPrimary, marginTop: 20 }]
}, 'Description (Optional)'),
React.createElement(TextInput, {
style: [styles.textAreaInput, {
backgroundColor: theme.colors.card,
color: theme.colors.textPrimary,
borderColor: theme.colors.border
}],
placeholder: 'Tell viewers what your stream is about',
placeholderTextColor: theme.colors.textSecondary,
value: streamDescription,
onChangeText: setStreamDescription,
multiline: true,
numberOfLines: 4,
componentId: 'stream-description-input'
}),
React.createElement(TouchableOpacity, {
style: [styles.goLiveButton, { backgroundColor: theme.colors.primary }],
onPress: startStream,
componentId: 'go-live-button'
},
React.createElement(MaterialIcons, {
name: 'play-arrow',
size: 20,
color: '#FFFFFF'
}),
React.createElement(Text, { style: styles.buttonText }, 'Go Live')
),
React.createElement(View, { style: styles.tipContainer },
React.createElement(MaterialIcons, {
name: 'info',
size: 20,
color: theme.colors.warning
}),
React.createElement(Text, {
style: [styles.tipText, { color: theme.colors.textSecondary }]
}, 'Make sure your camera and microphone are enabled before starting your stream.')
)
)
)
);
};
const ProfileScreen = function() {
const themeContext = useTheme();
const theme = themeContext.theme;
const [username] = useState('StreamWatcher');
const [watchHours] = useState(142);
const [followingCount] = useState(23);
const [showSettings, setShowSettings] = useState(false);
const [streamQuality, setStreamQuality] = useState('Auto');
const qualityOptions = ['Auto', '1080p', '720p', '480p'];
const toggleSettings = function() {
setShowSettings(function(prev) { return !prev; });
};
const changeQuality = function(quality) {
setStreamQuality(quality);
setShowSettings(false);
Platform.OS === 'web' ? window.alert('Quality set to ' + quality) : Alert.alert('Settings', 'Quality set to ' + quality);
};
const clearWatchHistory = function() {
var action = function() {
Platform.OS === 'web' ? window.alert('Watch history cleared') : Alert.alert('Success', 'Watch history cleared');
};
if (Platform.OS === 'web') {
if (window.confirm('Clear all watch history?')) {
action();
}
} else {
Alert.alert('Confirm', 'Clear all watch history?', [
{ text: 'Cancel' },
{ text: 'Clear', onPress: action }
]);
}
};
return React.createElement(View, {
style: [styles.container, { backgroundColor: theme.colors.background }],
componentId: 'profile-screen'
},
React.createElement(View, { style: [styles.header, { backgroundColor: theme.colors.card }] },
React.createElement(Text, {
style: [styles.headerTitle, { color: theme.colors.textPrimary }],
componentId: 'profile-title'
}, 'Profile'),
React.createElement(TouchableOpacity, {
style: styles.settingsButton,
onPress: toggleSettings,
componentId: 'settings-button'
},
React.createElement(MaterialIcons, {
name: 'settings',
size: 24,
color: theme.colors.textSecondary
})
)
),
React.createElement(ScrollView, {
contentContainerStyle: { paddingBottom: Platform.OS === 'web' ? 90 : 100 }
},
React.createElement(View, { style: styles.profileHeader },
React.createElement(View, { style: [styles.profileAvatar, { backgroundColor: theme.colors.primary }] },
React.createElement(Text, { style: styles.profileAvatarText },
username.charAt(0).toUpperCase()
)
),
React.createElement(Text, {
style: [styles.profileUsername, { color: theme.colors.textPrimary }],
componentId: 'profile-username'
}, username),
React.createElement(Text, {
style: [styles.profileJoinDate, { color: theme.colors.textSecondary }]
}, 'Member since 2023')
),
React.createElement(View, { style: styles.statsContainer },
React.createElement(View, { style: [styles.statCard, { backgroundColor: theme.colors.card }] },
React.createElement(Text, {
style: [styles.statNumber, { color: theme.colors.primary }]
}, watchHours.toString()),
React.createElement(Text, {
style: [styles.statLabel, { color: theme.colors.textSecondary }]
}, 'Hours Watched')
),
React.createElement(View, { style: [styles.statCard, { backgroundColor: theme.colors.card }] },
React.createElement(Text, {
style: [styles.statNumber, { color: theme.colors.accent }]
}, followingCount.toString()),
React.createElement(Text, {
style: [styles.statLabel, { color: theme.colors.textSecondary }]
}, 'Following')
)
),
React.createElement(View, { style: styles.menuContainer },
React.createElement(TouchableOpacity, {
style: [styles.menuItem, { backgroundColor: theme.colors.card }],
onPress: function() {
Platform.OS === 'web' ? window.alert('Watch history feature') : Alert.alert('Watch History', 'View your streaming history');
},
componentId: 'watch-history-button'
},
React.createElement(MaterialIcons, {
name: 'history',
size: 24,
color: theme.colors.textSecondary
}),
React.createElement(Text, {
style: [styles.menuItemText, { color: theme.colors.textPrimary }]
}, 'Watch History'),
React.createElement(MaterialIcons, {
name: 'chevron-right',
size: 24,
color: theme.colors.textSecondary
})
),
React.createElement(TouchableOpacity, {
style: [styles.menuItem, { backgroundColor: theme.colors.card }],
onPress: function() {
Platform.OS === 'web' ? window.alert('Preferences feature') : Alert.alert('Preferences', 'Customize your streaming experience');
},
componentId: 'preferences-button'
},
React.createElement(MaterialIcons, {
name: 'tune',
size: 24,
color: theme.colors.textSecondary
}),
React.createElement(Text, {
style: [styles.menuItemText, { color: theme.colors.textPrimary }]
}, 'Preferences'),
React.createElement(MaterialIcons, {
name: 'chevron-right',
size: 24,
color: theme.colors.textSecondary
})
),
React.createElement(TouchableOpacity, {
style: [styles.menuItem, { backgroundColor: theme.colors.card }],
onPress: clearWatchHistory,
componentId: 'clear-history-button'
},
React.createElement(MaterialIcons, {
name: 'clear',
size: 24,
color: theme.colors.error
}),
React.createElement(Text, {
style: [styles.menuItemText, { color: theme.colors.error }]
}, 'Clear Watch History'),
React.createElement(MaterialIcons, {
name: 'chevron-right',
size: 24,
color: theme.colors.textSecondary
})
)
)
),
React.createElement(Modal, {
visible: showSettings,
transparent: true,
animationType: 'slide',
onRequestClose: toggleSettings,
componentId: 'settings-modal'
},
React.createElement(View, { style: styles.modalOverlay },
React.createElement(View, { style: [styles.modalContent, { backgroundColor: theme.colors.card }] },
React.createElement(View, { style: styles.modalHeader },
React.createElement(Text, {
style: [styles.modalTitle, { color: theme.colors.textPrimary }]
}, 'Stream Quality'),
React.createElement(TouchableOpacity, {
onPress: toggleSettings,
componentId: 'close-settings-button'
},
React.createElement(MaterialIcons, {
name: 'close',
size: 24,
color: theme.colors.textSecondary
})
)
),
qualityOptions.map(function(quality) {
const isSelected = quality === streamQuality;
return React.createElement(TouchableOpacity, {
key: quality,
style: [styles.qualityOption, {
backgroundColor: isSelected ? theme.colors.primary : 'transparent'
}],
onPress: function() { changeQuality(quality); },
componentId: 'quality-' + quality.toLowerCase()
},
React.createElement(Text, {
style: [styles.qualityOptionText, {
color: isSelected ? '#FFFFFF' : theme.colors.textPrimary
}]
}, quality),
isSelected && React.createElement(MaterialIcons, {
name: 'check',
size: 20,
color: '#FFFFFF'
})
);
})
)
)
)
);
};
const TabNavigator = function() {
const themeContext = useTheme();
const theme = themeContext.theme;
return React.createElement(View, {
style: { flex: 1, width: '100%', height: '100%', overflow: 'hidden' }
},
React.createElement(Tab.Navigator, {
screenOptions: {
headerShown: false,
tabBarStyle: {
position: 'absolute',
bottom: 0,
backgroundColor: theme.colors.card,
borderTopColor: theme.colors.border,
borderTopWidth: 1,
height: Platform.OS === 'web' ? 80 : 90,
paddingBottom: Platform.OS === 'web' ? 10 : 20,
paddingTop: 10
},
tabBarActiveTintColor: theme.colors.primary,
tabBarInactiveTintColor: theme.colors.textSecondary,
tabBarLabelStyle: {
fontSize: 12,
fontWeight: '600'
}
}
},
React.createElement(Tab.Screen, {
name: 'Home',
component: HomeScreen,
options: {
tabBarIcon: function(props) {
return React.createElement(MaterialIcons, {
name: 'home',
size: 24,
color: props.color
});
}
}
}),
React.createElement(Tab.Screen, {
name: 'Following',
component: FollowingScreen,
options: {
tabBarIcon: function(props) {
return React.createElement(MaterialIcons, {
name: 'favorite',
size: 24,
color: props.color
});
}
}
}),
React.createElement(Tab.Screen, {
name: 'Go Live',
component: GoLiveScreen,
options: {
tabBarIcon: function(props) {
return React.createElement(MaterialIcons, {
name: 'broadcast-on-home',
size: 24,
color: props.color
});
}
}
}),
React.createElement(Tab.Screen, {
name: 'Profile',
component: ProfileScreen,
options: {
tabBarIcon: function(props) {
return React.createElement(MaterialIcons, {
name: 'person',
size: 24,
color: props.color
});
}
}
})
)
);
};
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
paddingTop: Platform.OS === 'ios' ? 50 : 20,
paddingBottom: 16,
paddingHorizontal: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
elevation: 2,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4
},
headerTitle: {
fontSize: 24,
fontWeight: 'bold'
},
searchContainer: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
marginLeft: 16
},
searchIcon: {
position: 'absolute',
left: 12,
zIndex: 1
},
searchInput: {
flex: 1,
height: 40,
borderRadius: 20,
paddingHorizontal: 40,
borderWidth: 1,
fontSize: 16
},
categoriesContainer: {
paddingVertical: 12
},
categoriesContent: {
paddingHorizontal: 20,
paddingRight: 40
},
categoryChip: {
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
borderWidth: 1,
marginRight: 12
},
categoryChipText: {
fontSize: 14,
fontWeight: '600'
},
streamCard: {
margin: 20,
marginTop: 10,
borderRadius: 16,
overflow: 'hidden',
elevation: 4,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.15,
shadowRadius: 8
},
streamThumbnail: {
width: '100%',
height: 200,
backgroundColor: '#333'
},
streamInfo: {
padding: 16
},
streamHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 8
},
liveIndicator: {
flexDirection: 'row',
alignItems: 'center'
},
liveText: {
color: '#FF4444',
fontSize: 12,
fontWeight: 'bold',
marginRight: 6
},
liveDot: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: '#FF4444'
},
viewerCount: {
fontSize: 12
},
streamTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 4
},
streamerName: {
fontSize: 14,
marginBottom: 12
},
streamFooter: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
categoryTag: {
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 12
},
categoryText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: '600'
},
followButton: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 12,
borderWidth: 1
},
followButtonText: {
fontSize: 12,
fontWeight: '600',
marginLeft: 4
},
sectionContainer: {
margin: 20,
marginTop: 0
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 16
},
followingStreamCard: {
padding: 16,
borderRadius: 12,
marginBottom: 12
},
streamCardContent: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
streamerInfo: {
flexDirection: 'row',
alignItems: 'center',
flex: 1
},
avatarContainer: {
width: 48,
height: 48,
borderRadius: 24,
justifyContent: 'center',
alignItems: 'center',
marginRight: 12
},
avatarText: {
color: '#FFFFFF',
fontSize: 18,
fontWeight: 'bold'
},
streamerDetails: {
flex: 1
},
streamerNameLarge: {
fontSize: 16,
fontWeight: 'bold'
},
streamTitleSmall: {
fontSize: 14,
marginTop: 2
},
streamStatus: {
alignItems: 'flex-end'
},
liveIndicatorSmall: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 4
},
liveDotSmall: {
width: 6,
height: 6,
borderRadius: 3,
backgroundColor: '#10B981',
marginRight: 4
},
liveTextSmall: {
color: '#10B981',
fontSize: 10,
fontWeight: 'bold'
},
viewerCountSmall: {
fontSize: 12
},
followerCard: {
flexDirection: 'row',
alignItems: 'center',
padding: 16,
borderRadius: 12,
marginBottom: 12
},
followerInfo: {
flex: 1,
marginLeft: 12
},
followerName: {
fontSize: 16,
fontWeight: 'bold'
},
followerStatus: {
fontSize: 14,
marginTop: 2
},
notificationButton: {
padding: 8
},
settingsButton: {
padding: 8
},
profileHeader: {
alignItems: 'center',
padding: 32
},
profileAvatar: {
width: 80,
height: 80,
borderRadius: 40,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 16
},
profileAvatarText: {
color: '#FFFFFF',
fontSize: 32,
fontWeight: 'bold'
},
profileUsername: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 4
},
profileJoinDate: {
fontSize: 14
},
statsContainer: {
flexDirection: 'row',
paddingHorizontal: 20,
marginBottom: 24
},
statCard: {
flex: 1,
padding: 20,
borderRadius: 16,
alignItems: 'center',
marginHorizontal: 8
},
statNumber: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 4
},
statLabel: {
fontSize: 14
},
menuContainer: {
paddingHorizontal: 20
},
menuItem: {
flexDirection: 'row',
alignItems: 'center',
padding: 16,
borderRadius: 12,
marginBottom: 12
},
menuItemText: {
fontSize: 16,
marginLeft: 16,
flex: 1
},
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center'
},
modalContent: {
width: '80%',
borderRadius: 16,
padding: 24
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 20
},
modalTitle: {
fontSize: 20,
fontWeight: 'bold'
},
qualityOption: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 16,
borderRadius: 12,
marginBottom: 8
},
qualityOptionText: {
fontSize: 16
},
formContainer: {
padding: 20
},
formLabel: {
fontSize: 16,
fontWeight: '600',
marginBottom: 8
},
textInput: {
borderWidth: 1,
borderRadius: 12,
padding: 12,
fontSize: 16
},
textAreaInput: {
borderWidth: 1,
borderRadius: 12,
padding: 12,
fontSize: 16,
textAlignVertical: 'top'
},
categorySelector: {
marginVertical: 12
},
categoryOption: {
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
borderWidth: 1,
marginRight: 8
},
categoryOptionText: {
fontSize: 14,
fontWeight: '600'
},
goLiveButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: 16,
borderRadius: 12,
marginTop: 24
},
stopButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: 16,
borderRadius: 12,
marginHorizontal: 20
},
buttonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 8
},
tipContainer: {
flexDirection: 'row',
marginTop: 24,
padding: 16,
borderRadius: 12,
backgroundColor: 'rgba(245, 158, 11, 0.1)'
},
tipText: {
fontSize: 14,
marginLeft: 8,
flex: 1
},
liveStreamingContainer: {
flex: 1,
padding: 20,
justifyContent: 'space-between'
},
streamingPreview: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
previewBox: {
width: '100%',
height: 300,
borderRadius: 16,
justifyContent: 'center',
alignItems: 'center'
},
liveOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: 16,
padding: 20,
justifyContent: 'space-between'
},
previewTitle: {
fontSize: 20,
fontWeight: 'bold'
},
liveStats: {
flexDirection: 'row',
marginVertical: 24,
justifyContent: 'space-around'
},
statItem: {
flexDirection: 'row',
alignItems: 'center'
},
statText: {
fontSize: 16,
marginLeft: 8,
fontWeight: '600'
}
});
return React.createElement(ThemeProvider, null,
React.createElement(View, { style: { flex: 1, width: '100%', height: '100%' } },
React.createElement(StatusBar, { barStyle: 'light-content' }),
React.createElement(TabNavigator)
)
);
};
return ComponentFunction;
0 Reviews