fix text in list portals

react-native/app/pages/list_portals/component.tsx

@@ -1,6 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import React from 'react';
 import {
+  BlockTextWithoutPortal,
   ButtonDelete,
   ButtonOpen,
   DivButtonDelete,
@@ -160,16 +161,18 @@ export const ListPortals = ({navigation}: IListPortalsDTO) => {
         />
       ) : (
         <>
+          <BlockTextWithoutPortal>
             <TextWithoutPortal>
-            {i18next.t('mobileApp.portals.list.empty.addFirstPortal.label')}
-          </TextWithoutPortal>
-          <TouchableOpacity onPress={() => onPressTextCreateDemoServer()}>
-            <TextWithoutPortal color={true}>
+              {i18next.t('mobileApp.portals.list.empty.addFirstPortal.label')+' '}
+              <TextWithoutPortal onPress={() => onPressTextCreateDemoServer()} color={true}>
                 {i18next.t(
                   'mobileApp.portals.list.empty.orUseOurDemoServer.label',
                 )}
               </TextWithoutPortal>
-          </TouchableOpacity>
+
+            </TextWithoutPortal>
+              
+          </BlockTextWithoutPortal>
         </>
       )}
     </WrapperListContainer>

react-native/app/pages/list_portals/styles.ts

@@ -1,8 +1,5 @@
-import styled from 'styled-components/native'
+import styled from 'styled-components/native';
 import {colors} from '../../styles/colors';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import { SwipeListView } from 'react-native-swipe-list-view';
-
 
 export const WrapperListContainer = styled.SafeAreaView`
   background-color: ${colors.secundary};
@@ -16,12 +13,11 @@ export const WrapperList = styled.FlatList`
   width: 95%;
 
   border-radius: 10px;
-`
+`;
 
 export const WrapperItemListText = styled.TouchableOpacity.attrs(props => ({
-    activeOpacity: 1
+  activeOpacity: 1,
 }))`
-
   width: 300px;
   padding: 5px;
   margin: 3% auto;
@@ -31,7 +27,7 @@ export const WrapperItemListText = styled.TouchableOpacity.attrs(props=>({
   flex-direction: column;
   align-items: center;
   justify-content: center;
-`
+`;
 export const WrapperItemListView = styled.View`
   display: flex;
   flex: 1;
@@ -43,28 +39,24 @@ export const WrapperItemListView = styled.View`
   text-align: center;
   height: 100px;
   width: 200px;
-
-`
+`;
 
 export const ItemList = styled.Text`
   color: #fff;
   padding: 2px;
   font-size: 16px;
 
-    font-weight: ${(props)=>(props.bold ? 'bold': 'normal')};
-    
-`
-
+  font-weight: ${props => (props.bold ? 'bold' : 'normal')};
+`;
 
 export const TextItem = styled.Text`
   font-size: 18px;
-`
+`;
 
 export const WrapperViewAdd = styled.View`
   background-color: ${colors.primary};
   margin: 70px 0px 0px 0px;
-    
-`
+`;
 
 export const ButtonOpen = styled.TouchableOpacity`
   padding: 10px;
@@ -75,22 +67,26 @@ export const ButtonOpen = styled.TouchableOpacity`
 
   align-items: center;
   justify-content: center;
-
-
-`
+`;
 
 export const TextButtonOpen = styled.Text`
   color: #fff;
   font-size: 20px;
   font-weight: bold;
-`
-
+`;
 
 export const TextWithoutPortal = styled.Text`
-    color: ${(props)=> (props.color ? colors.primary_light:  colors.primary)};
+  color: ${props => (props.color ? colors.primary_light : colors.primary)};
   font-size: 20px;
   text-align: center;
-`
+  display: flex;
+`;
+
+export const BlockTextWithoutPortal = styled.View`
+    flex-direction: row;
+    padding: 20px;
+    max-width: 100%;
+`;
 
 export const ButtonDelete = styled.TouchableOpacity`
   background-color: ${colors.white};
@@ -103,8 +99,7 @@ export const ButtonDelete = styled.TouchableOpacity`
   align-items: center;
 
   flex-direction: row;
-    
-`
+`;
 
 export const DivButtonDelete = styled.View`
   width: 100px;
@@ -113,12 +108,10 @@ export const DivButtonDelete = styled.View`
   margin: 3% 0px;
   align-content: center;
   justify-items: center;
-
-    
-`
+`;
 
 export const DivDelete = styled.View`
   width: 300px;
   justify-content: flex-end;
   align-items: flex-end;
-`
+`;