implementing pages and styles

react-native/app/routes/component.js

@@ -1,37 +1,70 @@
 import * as React from 'react';
-import { Button, View } from 'react-native';
-import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Alert } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { ListPortals } from '../pages/list_portals/component';
+import { usePortal } from '../contexts/portals/hook';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-function NotificationsScreen({ navigation }) {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.goBack()} title="Go back home" />
-    </View>
-  );
-}
-
-function Test(){
-    return (
-        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <Button title="Go back home" />
-        </View>
-    )
-}
+import {
+  createDrawerNavigator,
+} from '@react-navigation/drawer';
+import SdkContainer from '../../bootstrap/sdk/container';
 
 const Drawer = createDrawerNavigator();
 export const Routes = ()=>{
-  return (
-    <NavigationContainer>
-      <Drawer.Navigator initialRouteName="Portals"  screenOptions={{ headerShown: false}}>
-        <Drawer.Screen name="Portals" component={ListPortals} />
-        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
 
-        {['1','2'].map((item)=>{
-            return <Drawer.Screen key={item} name={item} component={NotificationsScreen} />
-        })}
-      </Drawer.Navigator>
-    </NavigationContainer>
+  
+  const {portals, setPortals} = usePortal()
+  async function getPortals(){
+      try{          
+          let items = await AsyncStorage.getAllKeys()
+          if(items.includes('portal')){              
+              let portalsStorage = await AsyncStorage.getItem('portal')
+              portalsStorage = JSON.parse(portalsStorage)
+              setPortals(portalsStorage)
+          } else {
+              Alert.alert('Portals', 'Dont have Portals in Storage')
+          }
+      } catch(e){
+          console.log('error', e)
+          return null
+      }      
+  }
+
+  React.useEffect(()=>{   
+    getPortals()
+  }, [])
+
+  return (
+      
+      <NavigationContainer>
+        <Drawer.Navigator 
+            initialRouteName="Portals"
+            screenOptions={{ 
+              headerShown: false
+          }}
+        >
+          
+          <Drawer.Screen name="Portals" component={ListPortals} />         
+          { 
+            portals || portals != 0 ?
+            portals.map((item)=>{
+              return <Drawer.Screen key={item.name} name={item.name} children={()=> (<SdkContainer url={item.url}/>)}/>
+            }) : null
+          }
+
+        </Drawer.Navigator>
+      </NavigationContainer>
   );
+}
+
+
+export const RoutesContainer = ()=>{
+
+  return(
+
+    <>
+        <Routes/>
+    </>
+  )
 }

react-native/app/routes/styles.ts

@@ -0,0 +1,3 @@
+import styled from "styled-components/native"
+import { colors } from '../styles/colors';
+