1
resposta

Can't find variable: appName

Index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('InstaluraMobile', () => App);

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions
} from 'react-native';

const width = Dimensions.get('screen').width;

export default class InstaluraMobile extends Component<{}> {
  render() {
    return (
      <View>
        <Text>João</Text>
        <Image source={require('./resources/img/alura.jpg')} 
          style={{width:width, height:width}} />
      </View>
    );
  }
}

AppRegistry.registerComponent('InstaluraMobile', () => InstaluraMobile);
1 resposta

Fala João, tudo bem ?

Não sei se entendi muito bem o seu problema, mas meu palpite é que o problema se dá no registro do componente principal da app (root component) - aquele que registramos no AppRegistry.registerComponent(...).

Em geral só é possível registrar o componente principal uma vez. E percebo que o registro está ocorrendo nos dois arquivos (index.js e App.js)

Deixe da seguinte forma os arquivos:

Index.js

import { AppRegistry } from 'react-native';

// aqui é preciso importar o módulo com o nome com o qual ele foi exportado na sua classe de origem - InstaluraMobile
// Uma dica extra pra evitar que se confunda: renomeie o arquivo de App.js para InstaluraMobile.js (pra coincidir com o nome da classe que é escrita e exportada no arquivo) - caso faça isso use o import como: import InstaluraMobile from './InstaluraMobile';
import InstaluraMobile from './App';

AppRegistry.registerComponent('InstaluraMobile', () => InstaluraMobile);

App.js (ou InstaluraMobile, se for renomeado)

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions
} from 'react-native';

const width = Dimensions.get('screen').width;

export default class InstaluraMobile extends Component<{}> {
  render() {
    return (
      <View>
        <Text>João</Text>
        <Image source={require('./resources/img/alura.jpg')} 
          style={{width:width, height:width}} />
      </View>
    );
  }
}

// SEM A LINHA QUE REGISTRA COMPONENTE AQUI - ELE JA FOI REGISTRADO NO INDEX.JS

Faça essa alteração. Deve funcionar.

Espero ter ajudado. Abraço!