Tela do mobile tudo azul

MainStyle

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
    button: {
      width: "100%",
      marginTop: 10
    },  
    cancelButton: {
      backgroundColor: "#c00"
    },
    container: {
      flex: 1,
      backgroundColor: '#ccc',
      justifyContent: 'center',
      backgroundColor: "#009CF5",
    },
    maskedInput: {
      flexGrow: 1,
      height: 40,
      fontSize: 18,
      borderBottomColor: "#999",
      borderBottomWidth: 1,
      borderStyle: "solid",
      alignSelf: "flex-start"
    },
    containerMask: {
      flexDirection: "row",
      marginBottom: 5,
      marginLeft: 10,
      marginRight: 10
    },
    errorMessage: {
      alignSelf: "flex-start",
      marginLeft: 15,
      color: "#f00",
      fontSize: 12
    }
  });

export default styles

Pagina de login

import AsyncStorage from "@react-native-async-storage/async-storage";
import React, { useEffect, useState } from "react";
import { Alert, Image, StyleSheet, View } from "react-native";
import { Button, Card, Input } from "react-native-elements";
import { ActivityIndicator } from "react-native-paper";
import usuarioService from "../services/UsuarioService";
import styles from "../style/MainStyle";
import { Divider } from '@rneui/themed';

export default function Login({ navigation }) {
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [isLoading, setLoading] = useState(false);
  const [isLoadingToken, setLoadingToken] = useState(true);

  const entrar = () => {
    let data = {
      username: email,
      password: password,
    };

    usuarioService
      .login(data)
      .then((response) => {
        setLoading(false);
        navigation.reset({
          index: 0,
          routes: [{ name: "Principal" }],
        });
      })
      .catch((error) => {
        setLoading(false);
        Alert.alert("Usuário não existe");
      });
  };

  const logarComToken = (token) => {
    setLoadingToken(true);
    let data = {
      token: token,
    };

    usuarioService
      .loginComToken(data)
      .then((response) => {
        setLoadingToken(false);
        navigation.reset({
          index: 0,
          routes: [{ name: "Principal" }],
        });
      })
      .catch((error) => {
        setLoadingToken(false);
      });
  };

  const cadastrar = () => {
    navigation.navigate("Cadastro");
  };

  useEffect(() => {
    AsyncStorage.getItem("TOKEN").then((token) => {
      logarComToken(token);
    });
  }, []);

  return (
    <View style={[styles.container, specificStyle.specificContainer]}>
      {!isLoadingToken && (
        <>
          <Image
            style={specificStyle.imgUm}
            source={require("../assets/keeper.png")}
          />
          <Card containerStyle={specificStyle.card}>
            <Card.Title
              style={{
                height: 30,
                marginLeft: 10,
                color: "#2D2D2D",
                fontSize: 13,
                fontStyle: "normal",
                fontWeight: "400",
                lineHeight: 15,
                display: "flex",
                alignItems: "center",
                paddingTop: 10,
              }}
            >
              Bem vindo a Keeper
            </Card.Title>
            <Card.Title
              style={{
                height: 50,
                color: "#2D2D2D",
                fontSize: 26,
                fontStyle: "normal",
                fontWeight: "700",
                lineHeight: 30,
                display: "flex",
                alignItems: "center",
                paddingTop: 10,
              }}
            >
              Entre em sua conta
            </Card.Title>
            <Input
              placeholder="Seu e-mail"
              onChangeText={(value) => setEmail(value)}
              keyboardType="email-address"
            />
            <Input
              placeholder="Sua senha"
              onChangeText={(value) => setPassword(value)}
              secureTextEntry={true}
            />
            {!isLoading && (
              <Button
                title="Entrar na minha conta"
                buttonStyle={specificStyle.buttonCadastrar}
                onPress={() => entrar()}
              />
            )}
            <Card.Title
              style={{
                width: "100%",
                marginTop: 10,
                backgroundColor: "#FFFFFF",
                color: "#009CF5",
                fontSize: 15,
                fontStyle: "normal",
                fontWeight: "400",
                display: "flex",
                alignItems: "center",
              }}
              onPress={() => cadastrar()}
            >
              Esqueceu a senha
            </Card.Title>
            <Image
              style={specificStyle.img}
              source={require("../assets/impressao_digital.png")}
            />
            <Card.Title
              style={{
                width: "35%",
                marginLeft: 110,
                backgroundColor: "#FFFFFF",
                color: "#009CF5",
                fontSize: 15,
                fontStyle: "normal",
                fontWeight: "400",
                display: "flex",
                alignItems: "center",
              }}
              onPress={() => cadastrar()}
            >
              Entre utilizando sua digital
            </Card.Title>

            <View style={specificStyle.vertical}>
              <Button
                containerStyle={{
                  width: 170,
                  marginHorizontal: 50,
                  marginVertical: 10,
                }}
                title="Primeiro acesso ?"
                type="clear"
                titleStyle={{ color: "#000000" }}
              />

              <Divider orientation="vertical" />

              <Button
                title="Cadastre-se"
                buttonStyle={{
                  borderColor: "rgba(78, 116, 289, 1)",
                }}
                type="outline"
                raised
                titleStyle={{ color: "#000000" }}
                containerStyle={{
                  width: 150,
                  marginHorizontal: 50,
                  marginVertical: 10,
                }}
              />
            </View>
          </Card>

          {isLoading && <ActivityIndicator />}
        </>
      )}
    </View>
  );
}

const specificStyle = StyleSheet.create({
  imgUm: {
    alignSelf: "center",
    marginTop: -95,
  },
  img: {
    alignSelf: "center",
    marginTop: 30,
  },
  card: {
    marginTop: 50,
    marginLeft: 20,
    borderRadius: 20,
    backgroundColor: "#FFFFFF",
  },
  specificContainer: {
    backgroundColor: "#009CF5",
  },
  buttonSenha: {
    width: "100%",
    marginTop: 10,
    backgroundColor: "#FFFFFF",
    color: "#000000",
  },
  vertical: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
  },
});

Em cima do Keeper, está branco. o que falta para ficar tudo azul ?