Tela Branca

Fala Isaac, tudo bem ?

É difícil saber a causa sem algumas informações. Mas dá pra ter algumas suspeitas...

• Pode ser problema de conflito de versões da lib de navegação com o react native/react, ou mesmo outras libs
• Pode ter ocorrido algum problema durante os passos do processo de linking da lib de navegação (configuração adicional efetuada durante a explicação)

• Pode ser que o código JS não tenha sido alterado de fato: Precisamos alterar o registro dos componentes que era feito com AppRegistry.registerComponent("InstaluraMobile", () => InstaluraMobile) e agora precisa usar a API da lib de navegação pra registrar Navigation.registerComponent("PrimeiraTela", () => InstaluraMobile )

  Se essa alteração não for feita é tela branca na certa, porque a lib registra o Navigation dela como componente principal da app, e se não registrarmos nada como tela o componente dela não tem o que renderizar

Você pode me mandar informações adicionais sobre como está seu projeto? Em qual plataforma você está testando? iOS ou Android ? Quais são as versões do react, react-native e react-native-navigation estão sendo usadas pelo projeto? Você pode ver essas informações no package.json de cada projeto presente na pasta node_modules do seu projeto base. Você pode usar o comando react-native info na pasta do projeto para obter informações importantes sobre ambiente e projeto.

Por exemplo, tenho um projeto configurado funcionando com as libs nessas versões:

"react": "16.3.1",
"react-native": "0.55.4",
"react-native-navigation": "1.1.458"

Importante também ver como está o código. Se puder compartilhar via algum repo do github da pra ter uma noção.

Poste aqui o que puder pra conseguirmos acompanhar. =)

Espero ter ajudado. Abraço!

Ae Rafael, tudo bom?

Estou desenvolvendo para Android.

Obrigado pelas informações, as minhas informações do react-native são as seguintes:

Environment:
  OS: Windows 10;
  Node: 10.0.0;
  Yarn: 1.6.0;
  npm: 5.6.0;
  Watchman: Not Found;
  Xcode: N/A;
  Android Studio: Version  3.1.0.0 AI-173.4720617;

Packages: (wanted => installed);
  react: 16.3.1 => 16.3.1;
  react-native: 0.55.3 => 0.55.3;

Estou enviando também o repositório do github com o projeto completo, com todos arquivos, acabei não configurando o .gitignore https://github.com/isaacnborges/Instalura

Caso tenha que fazer alguma mudança agradeço, o projeto estava funcionando muito bem antes de fazer a integração com o componente de navegação.

Abraço.

E ai Isaac, tudo bem ?

Dei uma olhada por aqui e notei algumas diferenças no código.

Código do index.js do repo:

//import { AppRegistry } from 'react-native';
//import App from './App';
import Navigation from 'react-native-navigation';
import Feed from './src/components/Feed';
import Login from './src/screens/Login';

//AppRegistry.registerComponent('InstaluraMobile', () => App);
//AppRegistry.registerComponent('InstaluraMobile', () => Login);
//  Navigation.registerComponent('Login', () => Login);
//  Navigation.registerComponent('Feed', () => Feed);

export default () => {
    Navigation.registerComponent('Login', () => Login);
    Navigation.registerComponent('Feed', () => Feed);

    // Navigation.startSingleScreenApp({
    //     screen: 'Login',
    //     title: 'Login'
    // });
}

O que acontece aqui? O Navigation não é o módulo exportado padrão vindo de react-native-navigation, então quando vamos importar, devemos utilizar a sintaxe: import { Navigation } from 'react-native-navigation'; para indicar que desejamos apenas a parte que cabe a ele na importação.

Outra coisa importante é que o registro dos componentes como telas da lib de navegação deve ser feito (no caso onde temos apenas um index.js, como ponto de entrada pro projeto) fora dessa função (arrow function) que exportamos como padrão. A lib (react native) vai tentar executar o código corrente do index js, mas nosso código só seria executado se ela importasse o módulo, desse um nome a ele e executasse a função. É simples resolver a questão, basta remover as linhas de declaração e fechamento de chave da arrow function.

Você pode deixar seu código dessa forma:

index.js

//importação correta do Navigation
import { Navigation } from 'react-native-navigation';

//importações normais dos nossos componentes
import Feed from './src/components/Feed';
import Login from './src/screens/Login';

// registro dos componentes como telas no Navigation
Navigation.registerComponent('Login', () => Login);
Navigation.registerComponent('Feed', () => Feed);

// start da app (fundamental para a renderização inicial da app)
Navigation.startSingleScreenApp({
    screen: {
        screen: 'Login',
        title: 'Login'
    }
});

Repare que no final do código é fundamental deixar ("descomentado") o código que invoca a função startSingleScreenApp, é ela que vai dizer qual é a primeira tela ao Navigation, e pedir para que ele faça a renderização inicial. Imagino que isso já deva resolver o caso da tela branca.

Repare também que faltava uma chave screen dentro do objeto passado para a função, no seu código

Enfim, faça essas alterações e veja se funciona. Qualquer coisa mande aqui de novo.

Abraço!

Ae Rafael, o index.js estava com tanto comentário porque estava testando várias maneiras para tentar resolver, mas a questão é que agora está funcionando depois de ajustar justamente o esse arquivo. \o/

Muito obrigado pelas dicas.

Forte abraço!

Rafael, na verdade aconteceu outra questão agora que não não entendi aonde precisa registrar.

Ao clicar no login após digitar o usuário e senha informados no curso o android mostra a seguinte mensagem:

console.error:
Navigation.getRegisteredScreen: [object Object] used but not yet reistered

Ele passar a como arquivos:

error: ..\InstaluraMobile\node_modules\react-native\Libraries\ReactNative\YellowBox.js: 69

getRegisterdScreen: ..\InstaluraMobile\node_modules\react-native-navigation\src\Navigation.js: 96

Não lembro de precisar fazer alguma coisa para registrar.

Se for possível me ajudar, o fonte está no mesmo repositório.

Valeu.

Fala Isaac, tudo bem ?

Esse problema em geral acontece quando tentamos navegar para uma tela que ainda não foi registrada no Navigation.

As vezes pode acontecer por um simples erro de digitação da String na hora do push. Ele tenta pegar a referência da tela registrada, mas não acha.

Olhando o código aqui, percebi que o problema foi outro:

    efetuaLogin() {
           // código anterior omitido ...
            .then(token => {
                AsyncStorage.setItem('token', token);
                AsyncStorage.setItem('usuario', this.state.usuario);

                this.props.navigator.push({
                    screen: {
                        screen: 'Feed',
                        title: 'Instalura'
                    }
                })

            })
            .catch(e => this.setState({ mensagem: e.message }))
    }

O problema está na chamada a função push() do navigator. Ela espera receber um objeto que representa a screen registrada pra onde você quer navegar.

A ideia é passar um objeto simples:

{
    screen: 'Feed',
    title: 'Instalura'
}

... mas na verdade no seu código é passado um objeto diferente:

{
    screen: {
        screen: 'Feed',
        title: 'Instalura'
    }
}

Perceba que a função espera que a chave screen do objeto recebido contenha uma string, mas na verdade ela vê que a chave screen guarda um outro objeto. Aí faz sentido a mensagem de erro: Navigation.getRegisteredScreen: [object Object] used but not yet reistered. Ela percebe que veio um objeto, que não bate com as telas registradas.

Você deve ter se confundido com o objeto que passamos para a função Navigation.startSingleScreenApp(), ela sim recebe esse objeto maior, já as funções mais simples de navegação (push, resetTo, etc) em geral precisam de um objeto mais simples como o citado acima. Altere sua implementação dessa forma:

this.props.navigator.push({
    screen: 'Feed',
    title: 'Instalura'
})

Isso já deve resolver. Você consegue esses detalhes da API de navegação na documentação:

https://wix.github.io/react-native-navigation/#/top-level-api?id=startsinglescreenappparams

https://wix.github.io/react-native-navigation/#/screen-api?id=pushparams

Espero ter ajudado. Abraço!

Valeu Rafael!!!

Muito obrigado, projeto rodando.

Show, Isaac.

Bons estudos!