Block screen ready

App.tsx

@@ -155,7 +155,7 @@ function App() {
         loading={<FullScreenLoader loading isTranslucent={false} />}
         persistor={persistor}
       >
-        {/* <NavigationContainer
+        <NavigationContainer
           ref={navigationRef}
           onStateChange={async (state) => {
             const currentRouteName = getActiveRouteName(state);
@@ -183,8 +183,8 @@ function App() {
             }
           />
         </NavigationContainer>
-        <ToastContainer config={toastConfigs} position="top" topOffset={18} /> */}
-        <BlockerScreen />
+        <ToastContainer config={toastConfigs} position="top" topOffset={18} />
+        {/* <BlockerScreen /> */}
       </PersistGate>
     </Provider>
   );

src/screens/permissions/BlockerScreen.tsx

@@ -4,19 +4,33 @@ import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
 import BlacklistAppsImage from '../../assets/images/BlacklistAppsImage';
 import { COLORS } from '@rn-ui-lib/colors';
 
+const blacklistedApps = ['App1', 'App2'];
 const BlockerScreen: React.FC = () => {
   return (
-    <View style={styles.container}>
-      <View style={styles.imageContainer}>
+    <View style={[GenericStyles.ph16, GenericStyles.pb4, styles.container]}>
+      <View style={[styles.imageContainer]}>
         <BlacklistAppsImage />
       </View>
 
-      <View style={styles.textContainer}>
-        <Text style={styles.textDark}>Some installed apps are banned by Navi</Text>
+      <View>
+        <Text style={[GenericStyles.fontSize14, GenericStyles.mb4, styles.textDark]}>
+          Some installed apps are banned by Navi
+        </Text>
       </View>
 
-      <View style={styles.textContainer}>
-        <Text style={styles.textLight}>Uninstall these apps for uninterrupted usage</Text>
+      <View>
+        <Text style={[GenericStyles.fontSize12, styles.textLight]}>
+          Uninstall these apps for uninterrupted usage
+        </Text>
+      </View>
+
+      <View style={styles.appsContainer}>
+        <View style={styles.appsListItem}>
+          <Text style={styles.appNameText}>App1</Text>
+        </View>
+        <View style={styles.appsListItem}>
+          <Text style={styles.appNameText}>App2</Text>
+        </View>
       </View>
     </View>
   );
@@ -26,35 +40,49 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
     flex: 1,
-    alignItems: 'center',
     borderWidth: 2, // Border width
     borderColor: 'red', // Border color
   },
 
   imageContainer: {
+    marginLeft: 97,
     marginTop: 40,
     marginBottom: 37,
   },
 
-  textContainer: {
-    width: 328,
-  },
-
   textDark: {
-    color: '#1C1C1C',
+    color: COLORS.TEXT.DARK,
     fontFamily: 'Inter-Regular',
-    fontSize: 14,
     fontWeight: '500',
-    marginBottom: 4,
   },
 
   textLight: {
-    color: '#969696',
+    color: COLORS.TEXT.LIGHT,
     fontFamily: 'Inter-Regular',
-    fontSize: 12,
     fontWeight: '400',
     marginBottom: 14,
   },
+
+  appsContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 4,
+    borderRadius: 4,
+    backgroundColor: COLORS.BACKGROUND.SILVER,
+  },
+
+  appsListItem: {
+    paddingHorizontal: 8,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.BORDER.PRIMARY,
+  },
+
+  appNameText: {
+    color: COLORS.TEXT.DARK,
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    fontWeight: '500',
+  },
 });
 
 export default BlockerScreen;