/componentsRN

Primary LanguageTypeScript

COMPONENTS - RN - 2023

Using my previous repository template RN I am creating 2 components following a personal volunteer project about a Domestic Violence Reporting App:

Video Sample Error Message Sample

INPUT TEXT

The component is a reusable component in order to cover:

  • First Name
  • Last Name
  • Report
  • Password
  • About me
  • Therapist description

Features:

  1. Min and Max character
  2. Minimize props through dedicated enum
  3. Custom hook to fill datas
  4. Define text styles with styled-system and styled-components
  5. Extend TextInputProps
  6. Extend props to handle with hook the character lenght analysis
  7. Having fun with typescript props using pick propriety
  8. Strings for errors handles already in the component
  9. Accepting new styles from parent
  10. Error Accept
  11. Theme

WIP:

  • Api connection

REUSABLE CARD

The component

  1. 3 possibile card types Therapist | Report | Appointment
  2. Different Tag Lines,
  3. Icons and text.
  4. Collapsable text
  5. Theme

WIP:

  • Api connection
  • Abstract more the obj data to pass
  • Abstract more the possible card types

Packages installed:

For the Bottom Tabs Navigator:

  • @react-navigation/bottom-tabs

For the Stack Navigator

  • @react-navigation/stack
  • react-native-gesture-handler

For the Navigation

  • @react-navigation/native

To handle better the Safe Area (in particular better Android experience)

  • react-native-safe-area-context

For enabling the SVG

  • react-native-svg
  • react-native-svg-transformer

REDUX TOOLKIT

  • yarn add @types/react-redux

REACT REDUX

  • yarn add react-redux

REDUX PERSIST

  • yarn add redux-persist

ASYNC-STORAGE

  • yarn add @react-native-async-storage/async-storage

AXIOS

  • yarn add axios

CIRCULAR DEPENDENCIES Check if Redux is creating Circular Dependencies

  • dpdm
  • yarn dpdm ./src/* --circular --exit-code circular:1 --warning=false

STYLED COMPONENTS

  • Style your component with a custom theme app wrapper

STYLED SYSTEM

  • Style props for rapid UI development

REACT-NATIVE-RENAME

  • Rename the whole codebase just executing npx react-native-rename "YOUR_PROJECT_NAME"

Tools

  1. Xcode
  2. Android Studio

Before you begin

  1. Ensure your local machine is set up for React Native development. For up to date instructions on how to do this, visit the setup instructions on the official React Native documentation.

Xcode Setup

You need at least Xcode 13, this is to ensure you have access to iOS 15. You can download from here

Android Studio Setup

You need to install at least android studio canary 5. You can download from here

Installation

  1. Clone this repo to your local machine

  2. Install node_modules by running yarn (you may need to install yarn globally first).

  3. Install pods by running cd ./ios && pod install && cd ..

  4. clean Android by running cd android && ./gradlew clean && cd ..

Running the app with react-native CLI

  • Run the android app with yarn android or the iOS app with yarn ios. This will start the metro development server and run the app on a simulator.

Running the app from XCode or Android Studio

For debugging iOS or Android specific bugs, it can be useful to run the app from XCode or Android Studio.

  1. For XCode in the tab navigator (Product→ Build) or using the shortcut ⌘ + B.

  2. For Android Studio - navigate to the React Native App from Android Studio and open the ./android folder. Wait for the Gradle Sync to finish and then navigate to Run -> Run App.

Debugging

For debugging, we use React Native Debugger. After this has been installed, open the debugger and run the app. You should see the JavaScript logs appear in the debugger console. You can execute and runs using the shortcut ⌘ + D.