const [view, setView] = useState<'devices' | 'notifications'>('devices');
 return(
 <View style={{ flex: 1 }}>
 {/* Content */}
 {view === 'devices' ? (
 <FlashList
 ListEmptyComponent={loadingOrEmptyFlatListComponent({ isLoading: loading })}
 key={view}
 data={filteredDevices}
 renderItem={renderDeviceItem}
 keyExtractor={(item) => item.id.toString()}
 numColumns={2}
 onLayout={(event) => {
 const { width } = event.nativeEvent.layout;
 console.log('towers-list FlashList width:', width);
 }}
 contentContainerStyle={{
 paddingBottom: insets.bottom,
 paddingHorizontal: 20,
 paddingTop: headerHeight + insets.top,
 }}
 showsVerticalScrollIndicator={false}
 />
 ) : (
 <FlashList
 key={view}
 data={groupedPreferences}
 renderItem={renderItem}
 getItemType={(item) => (typeof item === 'string' ? `sectionHeader` : `item`)}
 keyExtractor={(item) =>
 typeof item === 'string' ? `sectionHeader-${item}` : `item-${item.notificationType}`
 }
 contentContainerStyle={{
 paddingBottom: insets.bottom,
 paddingHorizontal: 20,
 paddingTop: headerHeight + insets.top,
 }}
 showsVerticalScrollIndicator={false}
 }
 />
 )}
 </View>)