4
respostas

[Dúvida] App rodando no modo dark

Quando criamos o projeto com run-android (no meu caso) percebi que tem uma linha no App.js que verifica o estilo do aparelho se esta no modo dark ou não. Meu celular fica no modo dark, e quando apaguei a linha e ate nas aulas seguintes o fundo da tela não fica branco, ele continua no nodo dark. Alguem passou por isso?

4 respostas

Olá, Saulo Silva! tudo bem?

Primeiramente, gostaria de agradecer pela sua participação no fórum e por compartilhar sua dúvida. Entendo que você está enfrentando um problema ao tentar rodar o aplicativo no modo dark. Vou tentar ajudá-lo a entender o que pode estar acontecendo e como resolver essa questão.

Quando você cria um projeto React Native utilizando o comando "run-android", o aplicativo é executado em seu dispositivo Android. É importante ressaltar que a aparência do aplicativo pode variar dependendo das configurações de estilo do seu dispositivo, como o modo dark. Mesmo assim, para que eu possa te ajudar de forma mais tempestiva, poderia disponibilbizar o seu código para que eu possa dar uma olhada?

Fico no aguardo!!

Sim, quando apago o App.js padrão que vem para construir o meu projeto, mesmo depois de apagar, o meu app continua rodando como se fosse o tema dark, que eh configuração do meu cel. O fundo fica escuro e as letras aparecem em preto (quando rodo meu app.) Segue o código final do projeto: App.js

import {useState, useEffect} from 'react';

import {carregaProdutores} from '../servicos/carregaDados';

export default function useProdutores() {
  const [titulo, setTitulo] = useState('');
  const [lista, setLista] = useState([]);

  useEffect(() => {
    const retorno = carregaProdutores();
    retorno.lista.sort(
      (produtor1, produtor2) => produtor1.distancia - produtor2.distancia,
    );
    setTitulo(retorno.titulo);
    setLista(retorno.lista);
  }, []);

  return [titulo, lista];
}

index.js

import React from 'react';

import Topo from './componentes/Topo';
import Produtores from './componentes/Produtores';

export default function Home() {
  return <Produtores topo={Topo} />;
}

Produtores.js

import React from 'react';
import {Text, FlatList, StyleSheet} from 'react-native';

import Produtor from './Produtor';
import useProdutores from '../../../hooks/useProdutores';

export default function Produtores({topo: Topo}) {
  const [titulo, lista] = useProdutores();

  const TopoLista = () => {
    return (
      <>
        <Topo />
        <Text style={estilo.titulo}>{titulo}</Text>
      </>
    );
  };

  return (
    <FlatList
      data={lista}
      renderItem={({item}) => <Produtor {...item} />}
      keyExtractor={({nome}) => nome}
      ListHeaderComponent={TopoLista}
    />
  );
}

const estilo = StyleSheet.create({
  titulo: {
    fontSize: 20,
    lineHeight: 32,
    marginHorizontal: 16,
    marginTop: 16,
    fontWeight: 'bold',
    color: '#464646', //essa linha eu que coloquei pq a letra estava usando a cor branca
  },
});

Então, fiz alguns testes por aqui e não estou conseguindo encontrar o erro, mesmo substituindo os códigos que você mandou com um celular no modo dark, esse comportamento não está acontecendo.

Ao analisar o seu código, não identifiquei diretamente a lógica responsável pela verificação do modo dark. Geralmente, essa lógica é implementada no arquivo App.js ou em algum arquivo relacionado à configuração do tema do aplicativo. Portanto, para poder ajudá-lo de forma mais precisa, seria interessante verificar se existe algum outro trecho de código que esteja controlando o tema do aplicativo ou se o problema está ocorrendo em outro arquivo.

Caso você tenha feito alguma modificação no código original do aplicativo, verifique se as alterações não interferiram na lógica de detecção e aplicação do tema dark.

Uma possível solução para o problema seria restaurar o código original do App.js e garantir que todas as dependências necessárias estejam instaladas corretamente. Verifique também se você está utilizando alguma biblioteca ou pacote externo que possa estar interferindo no tema do aplicativo.

Além disso, certifique-se de que as configurações do seu dispositivo estejam corretas e que o modo dark esteja habilitado ou desabilitado de acordo com sua preferência.

Acredito que uma outra alternativa seria tentar colocar novamente a linha no App.js que verifica o estilo do aparelho se esta no modo dark e tentar alterar a funcionalidade dela sem apagar. Se conseguir fazer isso e subir o seu projeto inteiro funcionando no github e me mandar o link, eu consigo ajudar de forma mais rápida, assim posso testar por aqui o que de fato está acontecendo.

Caso o problema persista, uma alternativa seria utilizar alguma biblioteca ou pacote específico para lidar com temas e estilos no React Native, como o react-native-paper ou styled-components. Essas bibliotecas facilitam a implementação de temas e garantem uma melhor adaptação visual do aplicativo aos diferentes modos de estilo, deixando da forma que você quiser.

Eu espero que algumas dessas dicas tenham ajudado e estou no aguardo do envio do projeto no git.

Abraço e bons estudos!!

Entendi, não fiz o teste de deixar a parte que controla o tema. Quando abrir um novo projeto faço esse texte. Também não encontrei nada referente aos estilos, e quando apaguei, primeira coisa que fiz foi colocar um <Text>Tela inicial</TEXT> sem colocar estilo nada. E o texto aparece preto, mas tela fica com o cinza do modo escuro. Parece que fica na memória do app. Obrigado pela resposta