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.
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.
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.
Article List and Detail
Setup
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:
//@BlueprintImportInsertion
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. demo0122202101-24002.botics.com/modules/articles). 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:
- Add the imports
import articlesReducer from "../features/<module_directory>/store/reducers";
import articlesSagas from "../features/<module_directory>/store/sagas";
- Add the reducer
combineReducers({
apiReducer: apiReducer,
customReducer: customReducer,
articlesReducer: articlesReducer
}),
- Add the root saga
sagaMiddleware.run(rootSaga);
sagaMiddleware.run(customRootSaga);
sagaMiddleware.run(articlesSagas);
<![CDATA[import React, { Component } from 'react';
import {
Text,
FlatList,
View,
TouchableOpacity,
ImageBackground
} 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() {
this.props.load();
}
renderItem = ({ item }) => (
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate(this.props.detail, { id: item.id })
}}>
<ImageBackground source={{ uri: item.image }} style={styles.image}>
<View style={styles.card}>
<Text style={styles.text}>
{item.title}
</Text>
<Text style={styles.author}>
{item.author}
</Text>
</View>
</ImageBackground>
</TouchableOpacity>
);
render() {
const { articles } = this.props;
return (
<FlatList
data={articles}
renderItem={this.renderItem}
keyExtractor={item => `${item.id}`}
/>
);
}
}
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]
}]]>
