DEV Community

Sergey Gustun
Sergey Gustun

Posted on

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

Side Menu

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>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

../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
    }
});
Enter fullscreen mode Exit fullscreen mode

How it work?

chick

Top comments (7)

Collapse
 
gaserd profile image
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} 
                />}
            />
        );
    }
}
Collapse
 
itcrafter profile image
it-crafter

Nice tutorial but where is the MenuList Component ???!!!!

Collapse
 
gaserd profile image
Sergey Gustun
Collapse
 
gtbhopale2412 profile image
gtbhopale2412

Hey,Can you provide us the MenuList Component?

Collapse
 
gaserd profile image
Sergey Gustun
Collapse
 
sagarrs profile image
Sagar R S

can u please put MenuList Component it'll be really helpfull. Thanks

Collapse
 
gaserd profile image
Sergey Gustun