componentes

@ ele tem o comportamento pareceido com o Header de um site ele funciona sozinho independe de outros elementos

Entendendo o codigo

Syntax de JSX

Tag => View = Container Html

Reactotron instalando

-- yarn add reactotron-react-native --dev

import Reactotron from 'reactotron-react-native'

const tron = Reactotron .configure() .useReactNative() .connect();

console.tron = tron;

DevTools instalando

yarn add react-devtools --dev

ESLINT

yarn global add eslint

npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^4.9.0',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-jsx-a11y': '^6.0.2',
  'eslint-plugin-react': '^7.4.0' }

yarn

yarn add babel-eslint eslint-config-airbnb eslint-plugin-react-native --dev

Conteudo do arquivo .eslintrc

{ "parser": "babel-eslint", "env": { "browser": true, "jest": true }, "plugins": [ "react-native", "jsx-a11y", "import" ], "extends": [ "airbnb", "plugin:react-native/all" ], "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [ ".js", ".jsx" ] } ], "global-require": "off", "no-console": "off", "import/prefer-default-export": "off", "no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ] }, "globals": { "DEV": true } }

Babel Module Resolver

Define a raiz do projeto

yarn add babel-plugin-module-resolver eslint-import-resolver-babel-module --dev

incluir no .babelrc

"plugins": [ [ "module-resolver", { "cwd": "babelrc", "root": ["./src"], "extensions": [".js" , ".ios.js" , ".android.js"] } ] ]