user profile display once logged in + shopping cart

Guest User

Hi Team

I need some help with user profile when a user register and logged in must show user profile on top and navigate to shopping cart in react-native some examples, will appreciate it and thanks a lot.

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Brahma Prakash Shukla3y ago
Accepted answer
First, you'll need to create a registration and login system using a server-side technology such as Node.js with Express or Firebase Authentication. Once the user is authenticated, you can store their user data in a global state using a state management library like Redux or Context API.

To display the user profile on the top of the app, you can create a header component that shows the user's name or profile picture along with an icon to navigate to the shopping cart. This header component can be rendered on each screen of your app using a navigation library like React Navigation.

Here's an example of how the header component might look like:
```
import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { useSelector } from 'react-redux';

const Header = ({ navigation }) => {
  const user = useSelector(state => state.user);

  return (
    
      
        
        {user.name}
      
       navigation.navigate('Cart')}>
        
      
    
  );
};

const styles = {
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    height: 80,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  profile: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  profileImage: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  profileName: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  cartIcon: {
    width: 30,
    height: 30,
  },
};

export default Header;
```
In this example, the user data is retrieved from the Redux store using the useSelector hook. The TouchableOpacity the component is used to create a button that navigates to the shopping cart screen when pressed.

Finally, you'll need to create the shopping cart screen, which can display the items the user has added to their cart and allow them to proceed with the checkout process. This screen can also be implemented using Redux or Context API to manage the state of the shopping cart.

I hope this helps you get started with implementing the user profile and shopping cart features in your React Native app!

Tuhin Paul3y ago

Here is the refactored code with TypeScript :

import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';

type Props = {
  navigation: any; // change "any" to a more specific type if possible
}

type User = {
  photoUrl: string;
  name: string;
}

const Header: React.FC = ({ navigation }) => {
  const user: User = useSelector((state: any) => state.user);

  return (
    
       navigation.navigate('Cart')}>
        
      
      
        
        {user.name}
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    height: 80,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  profile: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  profileImage: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  profileName: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  cartIcon: {
    width: 30,
    height: 30,
  },
});

export default Header;

I added types to the Props and User objects, as well as to the useSelector hook. The Props object now has a "navigation" property of type "any" (although it would be better to specify a more specific type if possible). The User object has "photoUrl" and "name" properties, both of type "string". The useSelector hook now takes in a type parameter that specifies the shape of the Redux store, so that we can access the "user" property in the store with type safety.

Tuhin Paul3y ago

import React from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';

const Header = ({ navigation }) => {
  const user = useSelector(state => state.user);

  return (
    
       navigation.navigate('Cart')}>
        
      
      
        
        {user.name}
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    height: 80,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  profile: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  profileImage: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  profileName: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  cartIcon: {
    width: 30,
    height: 30,
  },
});

export default Header;

the styles object has been replaced with a StyleSheet.create call, which is a best practice for performance reasons in React Native. The TouchableOpacity component has also been moved above the View containing the user profile information, which makes the cart icon appear on the left and the user profile information on the right.

Guest User3y ago
Hi Brahmna

Thanks for the clarification, i have firebase as a backend so now i know must only create a header to get the user profile, after user logs in be redirected to this component. I have Homescreen and LoginScreen, so must add this component as a third component in order to display user profile.