rocketseat/expo-common-issues

Common issues while developing with Expo

expo-common-issues's Issues

exp: command not found - usuários windows

Deveria colocar essa opção de resolução do problema, juntamente com as outras dicas. Segue abaixo:
Para solucionar, vai na variáveis de ambiente, depois em variáveis do sistema e em Path incluir o caminho C:\Users\usuario\AppData\Roaming\npm.

Não carrega a imagem

Olá gente, eu vim aqui perguntar uma coisa. Atualmente eu estou usando o GitHub no Vivaldi e as imagens não estão carregando, eu nao sei o porquê. Quando eu abri pelo microsoft edge as imagens carregaram sem problemas.

Não carrega a imagem

Mesmo alterando o model com o ip da rede, não exibe a imagem nem no dispositivo fisico e nem no android emulado, porém quando abro no navegador a imagem aparece

Template Blank: Unable to resolve "@react-navigation/native" from "App.js"

Unable to resolve "@react-navigation/native" from "App.js" Failed building JavaScript bundle.

Can't load expo app: Something went wrong

Estava tendo esse problema ao ler o QR Code, resolvi inciando o expo com:

yarn start --tunnel

E no expo developer tools, selecionei o modo Tunnel, na opção connection.

Problem using Expo with Tunnel

I faced a problem using Expo with Tunnel, using the Backend API and it may be that someone facing the same problem can be clarified in this matter:

https://lifehacker.com/how-to-find-your-local-and-external-ip-address-5833108

SecurityError: (:) [], PSSecurityException / UnauthorizedAccess (Windows)

npm\expo.ps1 is not digitally signed. You cannot run this script on the current
system. For more information about running scripts and setting execution policy, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170

At line:1 char:1

• expo whoami

•   + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
  
  

Erro ocorre logo após tentar instalar o expo no windows com o comando npm install -g expo-cli, e na tentativa de executar o help "expo -h".
Erro de segurança.
Solução:
Limpar cache npm
*npm cache clean --force
Logo após limpar o cache setar exacução da Policy remota:
*Set-ExecutionPolicy RemoteSigned
Tente instalar novamente com o comando npm install -g expo-cli.
Execute novamente o comando expo -h para verificar a instalação.

Logo ou Texto aparecendo atrás das barra de status no Android

Logo ou Texto aparecendo atrás das barra de status no Android
O Expo muda a cor da barra de status do Android para transparente por padrão, e isso faz com que o comportamento dos elementos funcione igual no iOS, porém a SafeAreaView não funciona no Android. A forma mais rápida de resolver isso é adicionando as seguintes linhas no seu arquivo app.json:
{
"expo": {
...
//adicione as linhas abaixo
"androidStatusBar": {
"barStyle": "dark-content",
"backgroundColor": "#ffffff"
},
}
}

Mesmo fazendo essas alterações a logo continua atrás do statusbar, não há nenhuma alteração na statusbar, nem da cor do texto,

o que está resolvendo por enquanto é um paddingTop no styles do container pra ser igual à StatusBar.currentHeight, mas sei que pode dar problema em dispositivos diferentes.

Erro para montar tela de Incidents

Quando tento montar a tela de Incidents, não consigo completar a requisição get da API. Servidores estão ligados e funcionando normalmente. Vou colar a mensagem de erro do terminal e o screenshot do celular.

Erro do terminal rodando o expo:

`[Unhandled promise rejection: Error: Request failed with status code 404]
- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/core/settle.js:16:9 in settle
- node_modules/axios/lib/adapters/xhr.js:52:6 in handleLoad
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:566:23 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue`

Erro no emulador do iOS:

Arquivo api.js:

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://192.168.15.27:3333'
});

export default api;

Arquivo Incidents/index.js

import React, { useState, useEffect } from 'react';
import { Feather } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { View, Image, Text, TouchableOpacity, FlatList } from 'react-native';

// Importar a logo
import logoImg from '../../assets/logo.png';

// Importar styles
import styles from './styles';

// Importar a api
import api from '../../services/api';

export default function Incidents() {
    // Armazenar estado dos incidents
    const [incidents, setIncidents] = useState([]);
    // Armazenar estado do número total de incidentes, sendo 0 o padrão
    const [total, setTotal] = useState(0);
    // Armazenar estado do número da página, sendo 1 a padrão
    const [page, setPage] = useState(1);
    // Armazenar estado de loading, para armazenar informação de quando estivermos buscando dados, para não carregarmos mais de 1 página por vez.
    const [loading, setLoading] = useState(false);

    // semelhante ao useHistory, para lembrar da última tela navegada
    const navigation = useNavigation();

    function navigateToDetail(incident) {
        navigation.navigate('Detail', { incident });
    }

    async function loadIncidents () {
        // Se loading estiver como true, parar função. Para evitar que se uma requisição estiver sendo feita, outra requisição seja iniciada
        if (loading) {
            return;
        }

        // Se o total for maior que zero (ou seja, já foi carregada pelo menos a 1a pag) e o número de incidentes seja igual ao total, parar a função.
        if (total > 0  && incidents.length === total ) {
            return;
        }

        // Marcar como início do loading (true)
        setLoading(true);

        const response = await api.get('incidents>page=', {
            params: { page }
        });

        // Anexar os incidents já buscados aos que serão buscados na próxima requisição
        setIncidents([... incidents, ... response.data]);
        setTotal(response.headers['x-total-count']);
        // Aumentar o contador de páginas para a próxima requisição
        setPage(page += 1);
        // Marcar como fim do loading (false)
        setLoading(false);
    }

    useEffect(() => {
        loadIncidents();
    }, []);

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Image source={logoImg} />
                <Text style={styles.headerText}>
                    Total de <Text style={styles.headerTextBold}>{total} casos</Text>.
                </Text>
            </View>

            <Text style={styles.title}>Bem-vindo!</Text>
            <Text style={styles.description}>Escolha um dos casos abaixo e salve o dia.</Text>

            {/* FlatList é usado para conseguir fazer a rolagem dos itens de uma lista */}
            <FlatList 
                data ={incidents}
                style={styles.incidentList}
                keyExtractor={incident => String(incident.id)}
                // Tirar o símbolo de scroll da tela
                // showsVerticalScrollIndicator={false}
                // Propriedade que aceita uma função que é disparada de forma automática quando um usuário chega ao final de uma lista
                onEndReached={loadIncidents}
                // Propriedade que define o quantos % do final da lista o usuário precisa estar para que carregue novos itens, definido de 0 a 1.
                onEndReachedThreshold={0.2}
                renderItem={({ item: incident }) => (
                    <View style={styles.incident}>
                        <Text style={styles.incidentProperty}>ONG:</Text>
                        <Text style={styles.incidentValue}>{incident.name}</Text>
                        
                        <Text style={styles.incidentProperty}>CASO:</Text>
                <Text style={styles.incidentValue}>{incident.title}</Text>
                        
                        <Text style={styles.incidentProperty}>VALOR:</Text>
                        <Text style={styles.incidentValue}>
                            {Intl.NumberFormat('pt-BR', {
                                style: 'currency',
                                currency: 'BRL'
                            }).format(incident.value)}
                        </Text>
                    
                        <TouchableOpacity
                            style={styles.detailsButton}
                            onPress={() => navigateToDetail(incident)}
                        >
                            <Text style={styles.detailsButtonText}>Ver mais detalhes</Text>
                            <Feather name="arrow-right" size={16} color='#e02041'  />
                        </TouchableOpacity>
                    </View>
                )}
            />
        </View>
    );
}

incompatibilidade do expo com certas versões do node

Tive alguns problemas com o expo utilizando a versão 12.18 do node.
Os erros variavam de permissões negadas até erros misteriosos durante a instalação de dependencias com o expo install

Resolvi o problema depois que achei esse comentario em uma issue

Não cheguei a testar com outras versões, mas para mim funcionou com a versão 12.9 como dita pelo nosso colega na issue.

Seria legal incluir essa informação no repositorio pois demorei bastante tempo para encontrar a solução dele devido a falta de informações que os erros mostravam (durante a instalação só aparecia que o node tinha sido finalizado com codigo 243).

Adicionar expo build error

• Erro:
  • Building iOS bundle
  • Error connect ECONREFUSED 127.0.0.1:19001
• Solução:
  • Deletar a pasta ~/.expo

Errro de navegação de telas quando app exportado.

Olá pessoal, fiz um app digamos que simples utilizando expo e vi o vídeo da Rocketseat fez sobre exportação, sendo que meu app tem três telas e no modo de Desenvolvedor ele rodou normalmente. Mas quando eu exportei e baixei no meu Celular (Android), ele não rodou as navegações, só ficou na tela home.

Meu Repositório é esse...clique aqui.

Eu não sei o que pode ser, já rodei na última, mudei de versão e nada.

Adaptador de Rede

Pode acontecer também de ao iniciar o yarn start (expo) o mesmo pegar o endereço de IP de um outro adaptador, exemplo: um adaptador do virtual box fazendo com que seja inciado em uma faixa de IP que não ficará accessível pelo celular físico.

A solução que achei mais fácil foi somente desativar enquanto programava/estudava o adaptador em questão.

Erro para acessar a plataforma do Explorer

Já presenciei o msm erro só que em outro site que ainda está em desenvolvimento, nele chegamos a conclusão de que o que causou o erro foi o AdBlocker, mas aqui quando ocorreu o erro, desativei o AdBlocker e msm assim o erro persistiu. Aqui vai a imagem para que vcs desenvolvedores possam diagnosticar o erro e resolve-lo👇

Duvida

Estou com um problema, quando faço a requisição pelo mobile, ele aparece só a primeira requisição no appWeb, quando retorno para o APPMob, com o aceito ou rejeitado, se tento criar mais uma reserva, ele não aparece no meu AppWeb e não dá erro em nenhum app, alguém passou por isso?

Valeu