inovando / react-native-template-inovando

:iphone: Inovando's template for react-native-cli https://www.npmjs.com/package/react-native-template-inovando

react-native-template-inovando

📱 Inovando's template for react-native-cli

Preview

iOS	Android

Usage

1. Initialize your RN project with this command:

react-native init AwesomeProject --template inovando

2. Delete ~/App.js

3. Duplicate .env.example to .env and .env.production fulfilling variables as needed

4. Add these lines at .gitignore

# Environment
.env
.env.production

4. Done 🎉

Android

For Reactotron debug in Android, run this command:

adb reverse tcp:9090 tcp:9090

MacOS "Network Error"

1. Go to "Open Network Preferences" > "Advanced..." > "DNS" Tab and add 8.8.8.8.

2. Restart your AVD.

3. It should work fine! 🎉

Scripts

yarn react-devtools

Inspect elements with React Devtools. Open the in-app developer menu and choose "Toggle Inspector" then click/press any element in your App, it will show up in React Devtools Window.

Read More

Deploy

This command will also deploy to Yarn.

npm publish --access public

Features

• Module Resolver
• ESLint/Prettier
• Styled Components
• Dotenv
• Axios
• React Navigation
• Reactotron
• React Devtools
• Formik
• Yup

react-native-template-inovando's Issues

Input Improvements #1

• Icon prop
• Password toggle for visibility

componente modal

Desenvolver componente com props:

• openModal
• onClose
• reverse

Referência

• React Native Modal

criar abstração de formulários

Criar exemplo de formulário com Formik e inputs com máscara

• react-native-masked-text (lembrar da prop includeRawValueInChangeText)
• formik (lembrar de usar setFieldValue())
• Criar prop handleChange pra facilitar buscar no back-end de campos específicos do formulário
• Usar forwardRef e criar prop innerRef

criar layouts comuns

Criar layout para views com formulário (ex: FormView.js com KeyboardAvoidingView, ScrollView e SafeAreaView)

criar abstração para autenticação

https://youtu.be/KISMYYXSIX8