Project: Airbnb Clone using React Native

So we are building Airbnb Clone in React Native.
I am studying this tutorial by cubui
The complete playlist is available below:
- https://www.youtube.com/watch?v=78Mr7gN6mE4&list=PLOg2mrFoc1TvpWTw7II_z7t-uXb1HD3w4
My system:
- Windows 10
- react-native-cli: 2.0.1
- react-native: 0.57.5
Creating a new application from CLI:
- react-native init AirbnbClone
- For more basics:
  - https://facebook.github.io/react-native/docs/getting-started.html

Git log out user from command line - Windows 10

I came across this same problem, and the above answer didn't work for me because github was being fed my credentials through windows credential manager instead of git bash.

You may have to check windows credential manager and delete the github entry under control panel > user accounts > credential manager > Windows credentials > Generic credentials

1: Airbnb Clone using React Native - Home Screen

NOTES:
- Have a directory structure first.
- It's always recommended to have an UI design build before coding.
- Strat with a LoggedOut screen first.
- CSS z-index Property:
  - The z-index property specifies the stack order of an element.
  - An element with greater stack order is always in front of an element with a lower stack order.
  - Note:
    - z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Let's first start by creating dir structure:
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
    - styles
      - colors
        
        index.js
    - screens
      - LoggedOut.js
    - img
      - airbnb-logo.png
Install react-native-vector-icons
- Run react-native link in Project CLI after installation.
- Restart the current running server.
- To use Icons from FontAwesome:
  - Import Icons from react-native-vector-icons/dist/FontAwesome

Progress so far:

Home Screen:

Facebook Button Press:

Create Account Button Press:

2: Airbnb Clone using React Native - Login Screen

Adding to directory structure:
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
      - form
        
        InputField.js
    - styles
      - colors
        
        index.js
    - screens
      - LoggedOut.js
      - LogIn.js
    - img
      - airbnb-logo.png

Add a new screen LogIn.js
Create set of form components.

Progress so far:

Log In Screen:

3: Airbnb Clone using React Native - Fix button hidden by keyboard and add password toggler

Note:
- Working of Show Password Button;
  1. Logic of show password is in it's InputField Component.
  2. If the input type is "password" we are showing the SHOW/HIDE button.
  3. The value of secureTextEntry for TextInput depends on "secureInput".
  4. The value of secureInput is set in the Component state.
    - Which have a default boolean value depending on inputType.
  5. Everytime toggleShowPassword is called, the value of secureInput is changed.

Progress so far:

Floating Next Button:

Show Password:

Handle Next Button:

4 Airbnb Clone using React Native - Login Error Message

Adding to directory structure:
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
      - form
        
        InputField.js
      - Notification.js
    - styles
      - colors
        
        index.js
    - screens
      - LoggedOut.js
      - LogIn.js
    - img
      - airbnb-logo.png

Let's build an Error message screen.

5 Airbnb Clone using React Native - Basic Login Validation (Fixing all errors)

Progress so far:

No there was no ScrollView error, it's just that iOS and Android and diffrent UX.
Error Screen:

Error-Free Screen:

Entering Value:

Entering Wrong Value:

6 Airbnb Clone using React Native - Loading Modal

Adding to directory structure:
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
    - screens
      - LoggedOut.js
      - LogIn.js
    - img
      - airbnb-logo.png

GIF Error in Android

By default the Gif images are not supported in android react native app.

You need to set use Fresco to display the gif images.

Edit your android/app/build.gradle file and add the following code:

compile 'com.facebook.fresco:animated-gif:1.10.0'
compile "com.facebook.fresco:animated-base-support:1.3.0"

// (Only if supporting WebP.)
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'

Then you need to bundle the app again;

You can display the gif images in two ways like this.

<Image source={require('./../images/load.gif')}  style={{width: 100, height: 100 }}/>
<Image source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}  style={{width: 100, height:100 }}/>

Progress so far

Loader on handleNextButton:

7: Airbnb Clone using React Native - Animated check marks

We'll add an animated checkmark when the input field has a valid value.
Let's change the keyboard if the input field is an email.
Animated Checkmark:

8: Airbnb Clone using React Native - Forgot Password

Adding to directory structure:
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
    - img
      - airbnb-logo.png

Progress so far

Forgot Password Screen:

Entering Value:

Entering Wrong Value:

9: Airbnb Clone using React Native - Add Redux

npm install --save:
- react-redux
- redux
- redux-logger
- redux-thunk

Error handling: npm ERR! Error: EPERM: operation not permitted, rename

I guess, I issue was the my node_module was turned to read only.
So I,
1. Closed my VS code.
2. deleted node_module
  - If script is not deleting, restart the system.
3. Run "npm install"
4. Retry installing the packages, (It worked.)

Restart your server.
Add to directory structure.
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
        
        Here Reducers, Logger, ThunkMiddleware are imported, Logger is setup, Compose and ApplyMiddleware are used to setup all the middleware and then Store is created.
      - reducer // Very confusing, I might improvise latter.
        
        loggedOut.js
        
        Here createReducer() is imported from helper, also all the action Types are imported. Create reducer is passed empty state & type of action.
        
        index.js
        
        Here Combine Reducer is used to Combine all reducers exported from respective files.
      - action
        
        types.js
        
        Simple action types.
        
        loggedOut.js
        
        Login action
        
        index.js
        
        Combine all actions.
      - helpers
        
        createReducer.js
        
        Returns a function which setups reducer.
    - data
      - user.json
  - App.js
    - Store is passed down to the application here.

Error handling: Unable to connect with remote debugger

In my case the issue was that the emulator was making a request to: http://10.0.2.2:8081/debugger-ui instead of: http://localhost:8081/debugger-ui and the request was failing. To solve the issue: Before enabling remote debugging on your emulator, open http://localhost:8081/debugger-ui in chrome. Then enable remote debugging and go back to the chrome page where you should see your console logs.

Progress so far:

Nothing to show but yeah the syntax was kinda confusing, I just might simplify it latter.

Work-flow of Redux in this application:

'Provider' from react-redux will pass the 'store' to the application in App.js.
'store' is created by 'configureStore' CUSTOME FUNCTION in 'store.js'.
- Empty object is passed to 'configureStore'.
  - Then 'createStore' from 'redux' is used to create store, and is passed 'reducer', 'initialState' (which is empty) and 'enhancer'.
    - 'enhancer', CUSTOME FUNCTION uses 'compose' and 'applyMiddleware' to add middleware to store.
'reducer' uses 'combineReducers' from 'redux' to combine all the reducers inported.
Any reducers imports 'createReducer' from helper and 'action types'.
- Then specify the chance of state on a perticular action type.
  - 'createReducer' is a CUSTOME FUNCTION which takes, 'initial state, and handler to distingise between action types.
'types.js' is used to declare action types.
Any component uses Redux as follow:
1. Store is passed from 'App.js'.
2. The component imports:
  - 'connect' from 'react-redux'.
    - Connect is used to 'map state to props', which is passed 'state' and 'map dispatch to prop', which is passed state using bindActionCreator.
  - 'bindActionCreaators' from 'redux'.
    - Is used to bind all the actions created by 'ActionCreators' with dispacth and later maped to props.
      - So the component can use the functions in the component from 'props'.
  - CUSTOME FUNCTION 'ActionCreators' from 'redux/action'.
    - Combines all the actions.
3. Every action is passed dispatched which is then used to chance state.

10: Airbnb Clone using React Native - Add Navigation

Note: WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.

We'll connect everything.
- Using react-nativation and react-navigation-redux-helper to connect the navigation to the redux store.
react-navigation-redux-helper:
1. How it works:
  1. Any navigator can be passed a navigation prop to turn it into a "controlled" component, which defers state management to its parent. This mechanism is used in React Navigation to nest navigators, but it can also be used to customize state management.
  2. A Redux middleware is used so that any events that mutate the navigation state properly trigger React Navigation's event listeners.
  3. Finally, a reducer enables React Navigation actions to mutate the Redux state.
2. Note:
  - Most projects that are using both Redux and React Navigation don't need this library.
  - And passing navigation to the root navigator means that you will have to handle state persistance and BackHandler behavior yourself.

npm install:
- react-navigation
- react-navigation-redux-helpers
Restart the server.
Add to directory structure.
- root:
  - src
    - containers
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
  - App.js
We will have two navigators. One-stack navigator-which will takre care of the navigation for when the user is loged out. The other-tab navigator-which will be used once the user logged in.
Now let's create a reducer which we will use to chance screen.
Let's add the app navigator.
We will need to add the react navigation redux middleware in store.
- To dissable yellow waring:
  - console.disableYellowBox = true;
  - In App.js before App class.
Style the Top bar:
- create a NavBar button Component.
- Need to style the header for every screen.

10-1 Code Refactoring:

I just completely refactor the code for redux for my convinience.

Error: undefined is not an object (evaluating 'RNGestureHandlerModule.State')

remove node_modules and package-lock.json
npm install --save react-native-gesture-handler
react-native link

Error: Native module com.oblador.vectoricons.VectorIconsModule tried to override com.oblador.vectoricons.VectorIconsModule for module name RNVectorIconsModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice.

I solve the issue modifying the MainActivity.java file. Vector module was declarated several time. Just remove the import and it works

Much better so I did the following this specifically:
1. Moved the store to seperate file.
2. Simplify the syntax of action and reducer.
3. Placed header on all the 3 screen we currently have.
  - Added styles.
  - Navigation button.

Progress so far

Logged Out Screen:

Log In Screen:

Forgot Password Screen:

11: Airbnb Clone using React Native - Add Logged In Screen

In this section we'll create the Logged In screen which will contain the tab navigator.

Add to directory structure.
- root:
  - src
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js
Style all the currently created Tabs.
For Ionicons:
1. Import:
  - import Icon from 'react-native-vector-icons/Ionicons';
2. Find: https://ionicons.com/
Change to this screen when we log in.
Disable the back button so that user can'r go back to login screen after Logging in.

Progress so far

Logged In Screen:

12: Airbnb Clone using React Native - Turn On Notifications Screen

In this section we'll build the notifications screen which will show for the first time users when they log in.

Add to directory structure.
- root:
  - src
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js

Progress so far

Turn On Notifications Screen:

13: Airbnb Clone using React Native - Explore Tab - Part 1

Add to directory structure.
- root:
  - src
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js
Starting with Search component.

Progress so far

Explore Container Part 1:

14: Airbnb Clone using React Native - Explore Tab | Part 2

We will build the list of listtings.
- We have 2 types:
  - Experiences
  - Popular Reservations.
- They contain different elements:
  - Experiences has a star rating.
  - Favorite icon.

Add to directory structure.
- root:
  - src
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
      - listings.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js

Progress so far

Explore Container Part 2:

15: Airbnb Clone using React Native - Star Rating and Favourite Components

Continue styling rest of the Explore tab.
There are two types of heading:
- Regular
- Bold

Add to directory structure.
- root:
  - src
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - Stars.js
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
        
        HeartButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
      - listings.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js

Progress so far

Star Rating and Favourite Components:

16: Airbnb Clone using React Native - Fixing some gaps

There is no button from the Login screen to go to Forgot Password screen.
Color of the Status bar. (iOS)
- First let's make it white by default instead of black.
  1. Edit: root\ios\AirbnbClone\Info.plist
    - Add:
```
</array>
<key>UIViewControllerBasedStatusBarAppeareance</key>
<true/>
</dist>
```
  2. Then add StatusBar.setBarStyle('dark-content', true); in the desired places.
Since I am not using react-navigation-redux-helper and this is for my Android. I am skipping over it.
Since android has a seperate StatusBar from the screen.

17: Airbnb Clone using React Native - Responsive design

Things to fix:
- Big Screen: Notification, Categories list.
- Small Screen: Text on Logged Out screen, Categories list .

Add to directory structure.
- root:
  - src
    - helpers
      - utils.js
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - Stars.js
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
        
        HeartButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
      - listings.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js
First we'll create a utility function to determine what phone we're using.

18: Airbnb Clone using React Native - No Saved Listings

We'll create the No Result component for the Saved tab.

Add to directory structure.
- root:
  - src
    - helpers
      - utils.js
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - saved
        
        NoResults.js
      - Stars.js
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
        
        HeartButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
      - listings.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js

Progress so far

No Results Component for Saved Screen:

19: Airbnb Clone using React Native - Fix Android App Styling

Remove ugly buttons on press in Logged Out Screen.
- Replace TouchableHighlight for TouchableOpacity.
- We need to chance how much opacity to use.
Put whole screen inside a ScrollView because Android has all kind of devices compared to iPhone. We want to make sure the user can see everything.

20: Airbnb Clone using React Native - Create a List | Part 1

Add to directory structure.
- root:
  - src
    - helpers
      - utils.js
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - saved
        
        NoResults.js
      - Stars.js
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
        
        HeartButton.js
      - form
        
        InputField.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - CreateList.js
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
      - listings.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js
Update the navigation from like button to screen.

Error: A tab navigator contains a stack and you want to hide the tab bar on specific screens

Similar to the example above where a stack contains a tab navigator, we can solve this in two ways: add navigationOptions to our tab navigator to set the tab bar to hidden depending on which route is active in the child stack, or we can move the tab navigator inside of the stack.

Imagine the following configuration:

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: TabNavigator,
});

If we want to hide the tab bar when we navigate from the feed home to a details screen without shuffling navigators, we cannot set the tabBarVisible: false configuration in navigationOptions on DetailsScreen, because those options will only apply to the FeedStack. Instead, we can do the following:

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

Progress so far

Creating List Screen:

21: Airbnb Clone using React Native - Create a List | Part 2

Start by adding Title input filed. We can reuse the one from Login Screen.
- But need to make it flexible.

Create a new form component:
Add to directory structure.
- root:
  - src
    - helpers
      - utils.js
    - containers
      - ExploreContainer.js
      - SavedContainer.js
      - ProfileContainer.js
      - TripsContainer.js
      - InboxContainer.js
    - components
      - saved
        
        NoResults.js
      - Stars.js
      - SearchBar.js
      - explore
        
        Categories.js
        
        Listings.js
      - buttons
        
        RoundedButtons.js
        
        NextArrowButton.js
        
        NavBarButton.js
        
        HeartButton.js
      - form
        
        InputField.js
        
        RadioInput.js
      - Notification.js
      - Loader.js
    - styles
      - colors
        
        index.js
      - navigator.js
    - screens
      - CreateList.js
      - LoggedOut.js
      - LogIn.js
      - ForgotPassword.js
      - LoggedIn.js
      - TurnOnNotification.js
    - img
      - airbnb-logo.png
    - redux
      - store.js
      - reducer
        
        loggedOut.js
        
        index.js
        
        navigation.js
      - action
        
        types.js
        
        loggedOut.js
        
        index.js
      - helpers
        
        createReducer.js
    - data
      - user.json
      - Categories.js
      - listings.js
    - navigators
      - AppNavigator.js
      - AppRouteConfigs.js
      - LoggedInTabsNavigator.js
  - App.js

Progress so far

Public Radio Button:

Private Radio Button:

22: Airbnb Clone using React Native - Create a List | Part 3

Progress so far

Create List Screen .

Disabled buttom when no text.

Loading.

26: Airbnb Clone using React Native - Connecting to GraphQL backend using Apollo Client

In this section we'll add apollo to the react native app and try to get some listings from the simple qraphql backend we created.

First we need to ad couple of dependencies.
Let's start the server and run the backend containers.
Integrate apollo into our application.

Adding to dir:
- root
  - src
    - config
      - index.js
Add apollo provider in App.js
Now let's see if we can run somr GraphQL queries to fetch some listings.
GraphQL Queries:

Get lists.

query {
    multipleListings {
        id,
        title,
        description
    }
}

Mutation addListing:

mutation addListing {
    addListing(data: {
        title: "My fourth listing",
        description: "Sample description"
    }) {
    title,
    description
  }
}
//... till fourth

Let's try to fetch the list inside the app.
- ExploreContainer.js
Check data avilability in the app.

Name		Name	Last commit message	Last commit date
Latest commit History 39 Commits
android		android
ios		ios
screenshots		screenshots
src		src
.babelrc		.babelrc
.buckconfig		.buckconfig
.flowconfig		.flowconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.watchmanconfig		.watchmanconfig
App.js		App.js
README.md		README.md
app.json		app.json
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json
yarn.lock		yarn.lock

thisis-Shitanshu/airbnb-clone-react-native-apollo-client-frontend

Folders and files

Latest commit

History

Repository files navigation

Project: Airbnb Clone using React Native

Git log out user from command line - Windows 10

1: Airbnb Clone using React Native - Home Screen

Progress so far:

2: Airbnb Clone using React Native - Login Screen

Progress so far:

3: Airbnb Clone using React Native - Fix button hidden by keyboard and add password toggler

Progress so far:

4 Airbnb Clone using React Native - Login Error Message

5 Airbnb Clone using React Native - Basic Login Validation (Fixing all errors)

Progress so far:

6 Airbnb Clone using React Native - Loading Modal

GIF Error in Android

Progress so far

7: Airbnb Clone using React Native - Animated check marks

8: Airbnb Clone using React Native - Forgot Password

Progress so far

9: Airbnb Clone using React Native - Add Redux

Error handling: npm ERR! Error: EPERM: operation not permitted, rename

Error handling: Unable to connect with remote debugger

Progress so far:

Work-flow of Redux in this application:

10: Airbnb Clone using React Native - Add Navigation

Note: WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.

Next:

10-1 Code Refactoring:

Error: undefined is not an object (evaluating 'RNGestureHandlerModule.State')

Error: Native module com.oblador.vectoricons.VectorIconsModule tried to override com.oblador.vectoricons.VectorIconsModule for module name RNVectorIconsModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice.

Progress so far

11: Airbnb Clone using React Native - Add Logged In Screen

Progress so far

12: Airbnb Clone using React Native - Turn On Notifications Screen

Progress so far

13: Airbnb Clone using React Native - Explore Tab - Part 1

Progress so far

14: Airbnb Clone using React Native - Explore Tab | Part 2

Progress so far

15: Airbnb Clone using React Native - Star Rating and Favourite Components

Progress so far

16: Airbnb Clone using React Native - Fixing some gaps

17: Airbnb Clone using React Native - Responsive design

18: Airbnb Clone using React Native - No Saved Listings

Progress so far

19: Airbnb Clone using React Native - Fix Android App Styling

20: Airbnb Clone using React Native - Create a List | Part 1

Error: A tab navigator contains a stack and you want to hide the tab bar on specific screens

Progress so far

21: Airbnb Clone using React Native - Create a List | Part 2

Progress so far

22: Airbnb Clone using React Native - Create a List | Part 3

Progress so far

26: Airbnb Clone using React Native - Connecting to GraphQL backend using Apollo Client

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages