Discussion on: Small trick for your app to React Native - Side Menu with Overlay

[Sergey Gustun]

import React, { Component } from 'react';
import {
    View, 
    Text,
    ListView
} from 'react-native';
import MenuListItem from './MenuListItem'

export default class MenuList extends Component {
    constructor() {
        super()

        this.state = {
            list_items : [
                {
                    name : 'Главная',
                    action : null
                },
                {
                    name : 'Категории',
                    action : null
                },
                {
                    name : 'О нас',
                    action : null
                },
                {
                    name : 'Избранное',
                    action : null
                }
            ]
        }

    }

    componentDidMount() {
        let { list_items } = this.state
        let { navigation, onToggleMenu } = this.props

        list_items.map((item, index) => {
            switch(index) {
                case 0 : 
                    item.action = () => onToggleMenu()
                    break;
                case 1 :
                    item.action = () => navigation.navigate('Categories')
                    break;
                case 2 :
                    item.action = () => navigation.navigate('About')
                    break;
                case 3 :
                    item.action = () => navigation.navigate('Favorite', { items : [] })
                    break;
                default:
                    break;
            }
        })

        this.setState({
            list_items : list_items
        })
    }

    render() {


        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        let dataSource = ds.cloneWithRows(this.state.list_items)

        let { navigation } = this.props

        return (
            <ListView
                enableEmptySections={true}
                dataSource={dataSource}
                renderRow={(item) => 
                <MenuListItem 
                    navigation={navigation} 
                    item={item} 
                />}
            />
        );
    }
}