Airbnb App Clone in React Native

This is my first React Native project done with expo. Demo Video

Desktop version in React can be found here.

Goal

• Componentize reusable features
• Learn to utilize popular libraries
• Add messaging feature using socket.io

Librares used

• react navigation
• socket.io
• redux
• formik
• yup
• react-native-calendars
• lodash
• moment
• react-native-maps

Features Implemented

Signup and Login

• Error handling

Home

• Search filter
• Calendar
• Counter

List & Details

• Fetching data
• Google maps
• Image slider

Host

• Adding images using native ImagePicker
• Getting current location

Message

• Creating socket connection
• Sending and receiving messages

Features componentized

colors

Example

import colors from "../config/colors.js";

// inline style
<View style={{color: colors.red}} />

// styled components
const Container = styled.View`
	color: ${colors.red}
`

Typography

Font family

--App.js--

const Common = styled.SafeAreaView`
  ${Platform.select({
    ios: {
      fontFamily: "Avenir",
    },
    android: {
      fontFamily: "Roboto",
      paddingTop: StatusBar.currentHeight,
    },
  })}
`;

Types

Example

import * as Typography from "../config/typography.js";

<Typography.H1 color={colors.red}>Welcome to Airbnb</Typography.H1>

Buttons

Button Types

1. Contained Button

2. Outlined Button

3. Icon Button

4. Floating Action Button

5. Text Button

6. Underlined Text Button

Anatomy

Example

import * as Button from "../components/Button.js";

<Button.BtnContain
  icon="search"
  label="Next"
	labelcolor={colors.white}
  color={colors.red}
  size="small"
  disabled={false}
  onPress={() => onNavigate()}
/>

Lists

List Types

1. Default list item with contained icon

2. Default list item with icon to the right

3. User list item

List Anatomy

Example

import * as List from "../components/List.js";

<ListItem.Default
  title="Title"
	secondary="Secondary Text"
  containedicon="location"
  onPress={() => onNavigate(item.title)}
/>

<List.UserList
  title="User Name"
  secondary="Secondary Text"
  image={userimage}
  meta={item.dates}
  onPress={() => handleNavigation(item)}
  RightActions={() => (
    <DeleteItem onPress={() => handleDelete(item)} />
  )}
/>

Cards

Card Types

1. Default

2. Review

Card Anatomy

Example

import * as Cards from "../components/Cards.js";

<Cards.Image
  image={image}
  sub="Subheader"
  title="Title"
  secondary="Secondary text"
  action="View More"
  onPress={() => console.log(item)}
/>

Issues to resolve in the future

• keyboardshouldpersist
• Typescript