loading...

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

gaserd profile image Sergey Gustun ・2 min read

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

./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?

chick

Discussion

pic
Editor guide
Collapse
gaserd profile image
Sergey Gustun Author
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
Collapse
gtbhopale2412 profile image
gtbhopale2412

Hey,Can you provide us the MenuList Component?

Collapse
gaserd profile image
Collapse
sagarrs profile image
Sagar R S

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

Collapse
gaserd profile image