Erro ao tentar separar os arquivos | React Native parte 1: Criando apps nativas com JavaScript e React

https://cursos.alura.com.br/course/react-native-parte-1/task/29803

Como o curso está um pouco desatualizado, vi que tinha um link para o site do react native e segui o getting started deles.

Ocorre que agora tem um arquivo App.tsx no react native e uma forma diferente da usada no curso e não estou conseguindo seguir e estou recebendo o seguinte erro:

 DELTA  [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::ffff:127.0.0.1 - - [08/Oct/2019:13:14:08 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: Error: Unable to resolve module `./src/components/Post` from `C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\App.tsx`: The module `./src/components/Post` could not be found from `C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\App.tsx`. Indeed, none of these files exist:
  * `C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\src\components\Post(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\src\components\Post\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
    at Object.resolve (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\lib\transformHelpers.js:261:42)
    at dependencies.map.result (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
    at C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Cursos\alura-react-native-p1-criando-apps-nativas-com-js-react\InstaluraMobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
 DELTA  [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

segui como o instrutor disse e estou separando o arquivo Post.js. seguem os codigos: App.tsx

...
import Post from './src/components/Post';
...
export default function App() {  
  const fotos =[     {id:1, usuario: 'rafael'},     {id:2, usuario: 'rogerio'},    {id:3, usuario: 'vanessa'},  ];
  return (  
    <FlatList style={styles.container}
    keyExtractor={item => item.id.toString()}
    data={fotos}
    renderItem={ ({item}) =>
    <Post foto={item} />
    }
    />        
  );

Post.js:

import React, { Component } from 'react';
//o react native ja tem uma API para pegar as dimensoes dos nossos dispositivos
import { 
  StyleSheet, 
  Text, 
  View, 
  Image,
  Dimensions,
  ScrollView, 
  FlatList
} from 'react-native';


//o react native ja tem uma API para pegar as dimensoes dos nossos dispositivos
const width = Dimensions.get('screen').width;
const height = Dimensions.get('screen').height;

export default class Post extends Component {  
  render(){

  return (   
    <View>
      <View style={styles.cabecalho}>
      <Image source={require('../../resources/img/felix.jpg')} 
        style={styles.fotoDePerfil} />
      <Text>{this.props.foto.usuario}</Text>
      </View>
      <Image source={require('../../resources/img/felix.jpg')} 
        style={styles.foto} />
    </View>                
  );
}
}


const styles = StyleSheet.create({
  container: {marginTop: 20},
  cabecalho : {margin: 10, flexDirection: 'row', alignItems: 'center'},
  fotoDePerfil: {marginRight: 10, borderRadius: 20,  width: 40, height: 40},
  foto: {width: width, height: width},

})

como fazer para nao dar esse erro e continuar funcionando? Obrigado.

Mergulhe em programação