Creating React-Native Project using Expo and TypeScript

 expo init nome_projeto

select Bare workflow

 minimal bare and minimal, just the essentials to get you started

create the file typescript.json 

execute in the folder of project the command expo start.

Add pathing Map

install

yarn add babel-plugin-module-resolver -D

Edit the file babel.config.js

module.exports = function(api) {

  api.cache(true);

  return {

    presets: ['babel-preset-expo'],

    "plugins": [

      [

        "module-resolver",

        {

          "root": ["./"],

          "alias": {

            "@components": "./src/components",

            "@screens": "./src/screens",

            "@stores": "./src/stores",

            "@utils": "./src/utils",

            "@services": "./src/services",

            "@assets": "./assets",

            "@constants": "./src/constants"

          }

        },

      ],

    ],

  };

};

Edit the tsconfig.json

{

  "extends": "expo/tsconfig.base",

  "compilerOptions": {

    "strict": true,

    "baseUrl": "./",

    "paths":{

        "@src/*":["./src/*"],

        "@components/*":["./src/components/*"],

        "@screens/*":["./src/screens/*"],

        "@assets/*":["./src/assets/*"],

    }

  }

}

install fonts

expo install @expo-google-fonts/dm-sans @expo-google-fonts/dm-serif-display

expo install expo-app-loading

edit file App.tsx

import React from 'react';

import { View } from 'react-native';

import AppLoading  from 'expo-app-loading';

import { useFonts, DMSans_400Regular } from '@expo-google-fonts/dm-sans';

import { DMSerifDisplay_400Regular } from '@expo-google-fonts/dm-serif-display';

export default function App() {

 const [fontsLoaded]  = useFonts({

    DMSans_400Regular,

    DMSerifDisplay_400Regular

  });

  //Verify if the fonts was load. If wasn't load stay splash screens

  if(!fontsLoaded){

    return <AppLoading />

  }

  return (

    <View >

   

    </View>

  );

}

install styled-components

yarn add styled-components

yard add @types/styled-components-react-native -D

Create global theme to the application

create folder theme into src

create files index.ts and styled.d.ts into theme

configure the global them in the app.tsx