Build User Profile Component for Your App

Learn how to add User Profile functionality to your custom React Native and Django app with Crowdbotics.

What is the User Profile component and how much does it cost?

A screen that displays information about the registered user in the app. It usually takes between 3.6 and 4.4 hours and costs $300 to add User Profile to an application.

How does the User Profile component work?

This feature displays user information like a profile picture, profile stats, action buttons, and images. This information is captured using input fields and the screen has a background that is customizable for branding. It also includes a second screen to modify these values later, from the settings page.

What is the User Profile component used for?

Here are some common User Profile user stories in a custom app build:

As an app user, I would like to edit the personal information I entered while registering for the app. As an app user, I would like to view the information I edited/uploaded in the app.

User Profile component README file

User Profile

The user Profile Screen is a React Native-based screen that allows the user to view other users' profiles and edit its own profile information.

Requirements

For this module to be fully functional, we recommend first installing and configuring the Basic Login Signup module available in the storyboard's list of verified modules.

Installation

After you have added the screen module into your project, you will need to configure a few items by modifying the project files in the github repository. Please note to replace ####### with the numeric sequence for your screen (found in folder name under /src/features) and also that the @BluePrint tags for ImportInsertion and NavigationInsertion will be removed in future so placement is with other imports and inside the AppNavigator above other screens.

STEP 1: Check if your project has the necessary dependencies

The react-native-elements and react-native-datepicker dependencies are already available in all newly created mobile apps within Crowdbotics platform. However, make sure to double check if they exist in the package.json file at the root folder of your project directory. If they are not available, open this file (package.json) and add the dependency after the dependencies opening line ""dependencies": {. It should look like this:

"dependencies": {
"react-native-elements": "^2.3.2",
"react-native-datepicker": "^1.7.2",

STEP 2: Add screen into your project screen navigation.

Edit File /src/navigator/mainNavigator.js:

ADD immediately below in the section labeled //@BlueprintImportInsertion:

import UserProfileNavigator from "../features/UserProfile#######/navigator";

ADD immediately below in the section inside AppNavigator definition labeled //@BlueprintNavigationInsertion section:

UserProfile: { screen: UserProfileNavigator },

Edit File /src/config/installed_blueprints.js:

Open the file and add below the comment message // access route is the route nate given to navigator:

{ name: 'UserProfile#######', human_name: 'User Profile', access_route: 'UserProfile' },

You can define the human_name for any text that you desire it to display in the side menu.

STEP 3: Add reducers to store.

/src/store/index.js ADD after Line 4 (sagas import):

import {
userRootSaga,
userReducer,
} from "../features/UserProfile#######/store";

Update your createStore code to include the userReducer. For example, if your store looks like this:

const store = createStore(
combineReducers({
apiReducer: apiReducer,
customReducer: customReducer,
authReducer: authReducer,
}),
composeEnhancers(applyMiddleware(...middlewares))
);

You should add the userReducer: userReducer after the authReducer, and it should then look like this:

const store = createStore(
combineReducers({
apiReducer: apiReducer,
customReducer: customReducer,
authReducer: authReducer,
userReducer: userReducer,
}),
composeEnhancers(applyMiddleware(...middlewares))
);

Near the end of the file, before the export { store } line, register the new sagas sagaMiddleware like this:

sagaMiddleware.run(userRootSaga);

Open your "../features/UserProfile#######/store/services.js" file check if you need to update your back-end api url at baseURL. By default, we use the url defined in the file src/config/app.js. If you rename your or use custom domains, you might need to replace that value with the proper back-end url, something like: baseURL: "https://mycustomdomain.com"

Step 4: Update Data Models

Go to your Crowdbotics' app dashboard and navigate to the Data Models page. You will see a User model. Click on the user model, then click on Edit Selected to update the user model and edit the following:

Check the box for API and add the following fields:

first_name: type as CharField
last_name: type as CharField
birth_date: type as DateField
bio: type as CharField

In the end, your data model should look like this:

After all the changes, click save for all the changes to be applied to your project.

Visit our knowledge base if you need help understanding Data Models.

Module Usage

There are two ways of using this module. First, is as a logged user profile page, where the user can view, edit and update their profile information. This module will behave like this by default.

The second use case is for displaying other users' information. For example, if you have a screen that lists all the users available in the platform, and when you click in a user name, you would like the hability to view that specific user details. For that, you need to add a navigation to the User Profile screen, and pass the user id as a parameter in the navigation call. In the code example below, whenever the button is clicked, it will navigate to the User profile screen and load the information of the user which their id equals to 123.

<Button
title="Go to User Profile"
onPress={() => this.props.navigation.navigate("UserProfile", { id: 123 })}
/>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

License

MIT

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the User Profile component.

Full User Profile component code

import React, { Component } from 'react';
import { View, ScrollView, ActivityIndicator } from 'react-native';
import { user_read, user_update } from './store/actions';
import { NavigationEvents } from 'react-navigation';
import { styles, Color } from './styles';
import { connect } from 'react-redux';
import EditUser from './edit';
import ViewUser from './view';

export class UserDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  load() {
    const { navigation } = this.props;
    const { token, auth_user } = this.props;

    if (!token && auth_user !== {}) {
      this.props.navigation.navigate('BasicLoginSignup');
      return;
    }

    const id = navigation.getParam('id', null) || auth_user.id;
    this.props.getUser(id, token);
  }

  componentDidUpdate(prevProps) {
    const { loading } = this.state;
    const { api } = this.props;

    if (loading && prevProps.api.isLoading && !api.isLoading) {
      this.setState({ loading: false });
    }
  }

  render() {
    const { loading } = this.state;
    const { isEdit } = this.props;
    return (
      <ScrollView style={styles.container} contentStyle={styles.content}>
        <NavigationEvents
          onDidFocus={() => this.load()}
          onWillFocus={() => this.setState({ loading: true })}
          onDidBlur={() => {
            this.props.navigation.setParams({ id: null });
          }}
        />
        {loading ? (
          <View>
            <ActivityIndicator color={Color.steel} />
          </View>
        ) : (
          <View>
            {isEdit ? (
              <EditUser {...this.props} />
            ) : (
              <ViewUser {...this.props} />
            )}
          </View>
        )}
      </ScrollView>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const id =
    ownProps.navigation.getParam('id', null) || state.authReducer.user.id;

  return {
    token: state.authReducer.token,
    auth_user: state.authReducer.user,
    api: state.userReducer.api,
    user: state.userReducer.users.find(user => user.id == id) || {},
    isEdit: id === state.authReducer.user.id
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getUser: (id, token) => dispatch(user_read(id, token)),
    updateUser: (data, token) => dispatch(user_update(data, token)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(UserDetail);

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the User Profile component.

Recommended components for you

Maps

Terms and Conditions

Splash Screen

Articles

Google Sign Up

Login and Signup

All component categories

Add this feature to your project

Snap User Profile into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add User Profile to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with User Profile functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building

Search All Components: