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

#react #javascript

Hi, everyone!

I like React Native and i writed couple of articles:

Yeah, this is most popular question, how make overlay view from side menu.

SideMenu.js

import React, { Component } from 'react';
import {
    View, 
    Text 
} from 'react-native';

import MenuList from './containers/MenuList'
import MenuOverlay from './containers/MenuOverlay'

import styles from './style/SideMenuStyle'

export default class SideMenu extends Component {
    render() {        
        let { 
            navigation,
            onToggleMenu 
        } = this.props

        return (
            <View style={styles.container}>
                <MenuOverlay 
                    onToggleMenu={onToggleMenu}
                    navigation={navigation}
                />
                <View style={styles.menu}>
                    <MenuList 
                        onToggleMenu={onToggleMenu}
                        navigation={navigation} 
                    />
                </View>
            </View>
        );
    }
}

./style/SideMenuStyle

import { StyleSheet, Dimensions } from 'react-native';

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

export default styles = StyleSheet.create({
    container : {
        flex: 1,
        position : 'absolute',
        left: 0,
        top: 0,
        width : width, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
    menu: {
        flex: 1,
        backgroundColor: '#FFF',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
    menuItem : {
        paddingTop : 10
    }
});

MenuOverlay.js

import React, { Component } from 'react';
import {
    TouchableHighlight,
    Text
} from 'react-native';

import styles from '../style/MenuOverlayStyle'

export default class MenuOverlay extends Component {

    render() {

        return (
            <TouchableHighlight 
                onPress={() => {
                    this.props.onToggleMenu()
                }}
                style={styles.overlay}>
                <Text></Text>
            </TouchableHighlight>
        );
    }
}

../style/MenuOverlayStyle

import { StyleSheet, Dimensions } from 'react-native';

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

export default styles = StyleSheet.create({
    overlay: {
        backgroundColor: 'rgba(52, 52, 52, 0.8)',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    }
});

How it work?

Top comments (7)

Sergey Gustun • Aug 3 '20

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} 
                />}
            />
        );
    }
}