Slack: UI Clone with React Native / Expo

Table of Contents

• Install & Build
• Features
• Linting
• Demo & Release Notes

Install & Build

First, make sure you have Expo CLI installed: npm install -g expo-cli

Install:

yarn

Run Project Locally:

yarn dev

Features

• Expo SDK 48
• React Navigation v6
• PropTypes
• Gifted Chat
• Swiper Component

Linting

• run: yarn lint for a list of linting warnings/error in cli
• prettier and airbnb config
• make sure you have prettier package installed:
  • prettier for atom
  • prettier for vscode
• then make sure to enable these options (packages → prettier):
  • eslint integration
  • stylelint integration
  • automatic format on save (toggle format on save)
• be aware of the .prettierignore file

Release Notes

version 0.4.0 (current)

• upgraded to Expo SDK 48
• upgraded to Expo SDK 47
• upgraded to Expo SDK 46
• upgraded to Expo SDK 45
• upgraded to Expo SDK 44
• upgraded to Expo SDK 43
• upgraded to React Navigation v6

version 0.3.0

• upgraded to Expo SDK 42
• upgraded to Expo SDK 41
• upgraded to React Navigation v5

version 0.2.0

• upgraded to Expo SDK 40
• upgraded to Expo SDK 39
• upgraded to React Navigation v4
• upgraded to Expo SDK 38

version 0.1.0

• upgraded to Expo SDK 37
• upgraded to Expo SDK 36
• upgraded to Expo SDK 35
• started with React Navigation v3
• initial navigation
  • chat
    • custom AccessoryBar
    • custom Message
    • custom Message Bubble
    • custom Send Button + different placement
  • drawers
    • left drawer using createDrawerNavigator
    • custom right drawer
• 3rd party packages used:
  • Gifted Chat
  • Swiper Component