ARTICLE AD BOX
The aim if for the Expo-go app to display as is in the browser as below
Browser view: The view is supposed to show the ALL and UNREAD text in the notification tabs as can be seen in the browser view here.
Expo-go view: However, the mobile view on Expo-go app has changed the styling to circular with no text within the notification tabs as above
Error log on the Expo go app
Uncaught Error. java.io.IOException: Failed to download remote update
Code on my layout; Below is the code that styles the layout view of my app and webview
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import { Stack } from 'expo-router'; import { StatusBar } from 'expo-status-bar'; import 'react-native-reanimated'; import "../styles/global.css"; import { useColorScheme } from '@/hooks/use-color-scheme'; import React, { useState } from 'react'; import { useFonts } from 'expo-font'; import { View, Text, TouchableOpacity, FlatList, StyleSheet, SafeAreaView, Dimensions, } from 'react-native'; const { height: screenHeight } = Dimensions.get('window'); const NotificationScreen = () => { const [activeTab, setActiveTab] = useState('All'); const notifications = [ { id: '1', title: 'You have a notification from CEO ...', subtitle: 'You have able verify you account kindly click the link', date: 'Jan 12, 2026', } ]; const unreadNotifications = notifications.filter((_, index) => index === 0); // Simulate one unread const filteredNotifications = activeTab === 'Unread' ? unreadNotifications : notifications; type Notification = { id: string; title: string; subtitle: string; date: string; }; const renderNotification = ({ item }: { item: Notification }) => ( <View style={styles.notificationCard}> <Text style={styles.notificationTitle}>{item.title}</Text> <Text style={styles.notificationSubtitle}>{item.subtitle}</Text> <Text style={styles.notificationDate}>{item.date}</Text> </View> ); const ItemSeparator = () => { return <View style={styles.separator} />; }; return ( <SafeAreaView style={styles.container}> <StatusBar style="dark" backgroundColor="#f8f8f8" /> {/* Status Bar Simulation */} <View style={styles.statusBar}> <View style={styles.iconsContainer}> </View> </View> {/* Header */} <View style={styles.header}> <TouchableOpacity style={styles.backButton}> <Text style={styles.backIcon}>‹</Text> </TouchableOpacity> <View style={styles.tabs}> <TouchableOpacity style={[styles.tab, activeTab === 'All' && styles.tabActive]} onPress={() => setActiveTab('All')} > <Text style={[styles.tabText, activeTab === 'All' && styles.tabTextActive]}> All </Text> </TouchableOpacity> <TouchableOpacity style={[styles.tab, activeTab === 'Unread' && styles.tabActive]} onPress={() => setActiveTab('Unread')} > <Text style={[styles.tabText, activeTab === 'Unread' && styles.tabTextActive]}> Unread </Text> </TouchableOpacity> </View> </View> {/* Notification List */} <FlatList data={filteredNotifications} renderItem={renderNotification} keyExtractor={(item) => item.id} ItemSeparatorComponent={ItemSeparator} contentContainerStyle={styles.listContainer} showsVerticalScrollIndicator={false} style={styles.list} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f8f9fa', }, separator: { height: 12, }, statusBar: { height: 44, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, backgroundColor: '#f8f8f8', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#c6c6c8', }, time: { fontSize: 17, fontWeight: '600', color: '#000', }, signal: { fontSize: 16, }, iconsContainer: { flexDirection: 'row', alignItems: 'center', gap: 4, }, iconText: { fontSize: 12, marginHorizontal: 2, }, header: { height: 60, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e5e5e7', }, backButton: { width: 40, height: 40, borderRadius: 20, justifyContent: 'center', alignItems: 'center', marginRight: 8, }, backIcon: { fontSize: 24, fontWeight: 'bold', color: '#007aff', }, tabs: { borderRadius: 30, margin: 3, // width: 'auto', // Remove this height: 50, // Increase slightly for better padding flexDirection: 'row', backgroundColor: 'white', overflow: 'hidden', // gap: 8, // Gap can be tricky in some RN versions justifyContent: 'space-between', // Use flexbox alignment padding: 3, }, tab: { paddingHorizontal: 20, borderRadius: 30, flex: 1, // Ensures tabs expand height: '100%', // Take full container height backgroundColor: '#f2f2f7', justifyContent: 'center', alignItems: 'center', marginHorizontal: 4, // Use margin instead of gap }, tabText: { fontSize: 16, fontWeight: '600', // marginBottom: 4, // Remove to center text vertically // backgroundColor: 'red', // Remove debugging color }, tabActive: { backgroundColor: '#040273', }, tabTextActive: { color: 'white', }, list: { gap: 19, marginBottom: 16, }, listContainer: { padding: 16, paddingTop: 16, }, notificationCard: { backgroundColor: '#dfdfdf', borderRadius: 12, padding: 16, marginBottom: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 3, elevation: 2, borderWidth: StyleSheet.hairlineWidth, borderColor: '#e5e5e7', }, notificationTitle: { fontSize: 16, fontWeight: '600', color: '#000', marginBottom: 4, }, notificationSubtitle: { fontSize: 15, color: '#000', lineHeight: 22, marginTop: 20, marginBottom: 20, }, notificationDate: { fontSize: 13, color: '#000', fontWeight: '400', }, }); export default NotificationScreen;