Reacti Native with Native Base full size background is not working

Question

I am trying to make a fullsize background using native base, but it is not working. It seens that the "NativeBaseProvider" creates a view with no full size, can anyone help me?

This is the code I am using.

import React from 'react';
// 1. import `NativeBaseProvider` component
import { Container, HStack, NativeBaseProvider, Text, Box, Heading, Button } from 'native-base';
import LoginForm from './components/loginForm'

export default function App() {
  // 2. Use at the root of your app
  return (
      <NativeBaseProvider>
        <Container bg="blue.100" h={"full"} w={"full"} marginRight={'0'}>
          <HStack ></HStack>
          <Box flex={1} alignItems="center">
            <Heading size="md">Login</Heading >
            <Button margin={"2"}>Login Facebook</Button>
            <Button margin={"2"}>Login Google</Button>
            <Box margin="3">
              <LoginForm></LoginForm>
            </Box>
            <Text>Não possui cadastro? Clique aqui para se registrar.</Text>
          </Box>
        </Container>
      </NativeBaseProvider>
  );
}

This is the result

Answer 1

Your issue is coming from the base style of Container in native base:

// NativeBase/src/theme/components/container.ts 
const baseStyle = {
  maxWidth: '80%',
};

To fix your problem you can either use a different component such as Box or Center which do not have base maxWidth applied

Or manually change your Container's maxWidth like this:

  return (
      <NativeBaseProvider>
        <Container h="100%" w="100%" maxWidth="100%" bg="blue.100">
          {...restOfComponent}
        </Container>
      </NativeBaseProvider>
  );

Note - instead of setting width and height to 100%, you could also use flex