Build Articles Component for Your App

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

What is the Articles component and how much does it cost?

A feature that displays a scrollable list of articles and detail pages. It usually takes between 7.2 and 8.8 hours and costs $600 to add Articles to an application.

How does the Articles component work?

This feature displays a scrollable list of articles that the app's users can browse. It also includes optional detail pages that provide further information about the articles.

What is the Articles component used for?

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

As a user, I would like to browse a list of articles. As a new user, I would like to learn more about an article by tapping on its featured image.

Articles component README file

Article List and Detail


Open /src/navigator/mainNavigator.js and import the stack navigator defined in navigator.js.

import Articles from "../features/<module_directory>/navigator";

And then add it to the navigation:

Articles: {
 screen: Articles

Open store/services.js in the /src/features/article#####/ folder and update the baseURL with your application's URL followed by /modules/articles which is the endpoint (ie. The initial piece is your project name and the numeric piece is your project number.

Add the module reducer and saga to your /src/store/index.js file:

  1. Add the imports

import articlesReducer from "../features/<module_directory>/store/reducers";
import articlesSagas from "../features/<module_directory>/store/sagas";

  1. Add the reducer

    apiReducer: apiReducer,
    customReducer: customReducer,
    articlesReducer: articlesReducer

  1. Add the root saga;;;

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 Articles component.

Full Articles component code

import React, { Component } from 'react';
import {
} from 'react-native';
import { styles } from "./styles";
import { connect } from "react-redux";
import reducer from "./store/reducers"
import { article_list } from "./store/actions";

class ArticleList extends Component {
  componentDidMount() {

  renderItem = ({ item }) => (
      onPress={() => {
        this.props.navigation.navigate(this.props.detail, { id: })
      <ImageBackground source={{ uri: item.image }} style={styles.image}>
        <View style={styles.card}>
          <Text style={styles.text}>
          <Text style={}>

  render() {
    const { articles } = this.props;
    return (
        keyExtractor={item => `${}`}


const mapStateToProps = (state, ownProps) => {
  const detail = ownProps.navigation.getParam("detail", "Article");

  return {
    detail: detail,
    articles: state.articlesReducer.articles,

const mapDispatchToProps = dispatch => {
  return {
    load: () => dispatch(article_list())

export default {
  name: "Articles",
  screen: connect(mapStateToProps, mapDispatchToProps)(ArticleList),
  reducer: reducer,
  actions: [article_list]

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 Articles component.

Recommended components for you

All component categories

Add this feature to your project

Snap Articles 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 Articles to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Articles 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