new2

import React, { Component }  from 'react';
import {
    View,
    FlatList,
    Alert
} from 'react-native';
import {
    ThemeProvider,
    Toolbar,
    ListItem
} from 'react-native-material-ui';
import getPlatformElevation from 'react-native-material-ui/src/styles/getPlatformElevation';

export default class recentChatListScreen extends Component
{
    constructor(props) {
        super(props);
        this.state = { elevation: 0 };
    }

    onScroll = (e) => {
        const { contentOffset } = e.nativeEvent;

        if (contentOffset.y <= 0) {
            this.setState({ elevation: 0 });
        } else if (contentOffset.y < 7) {
            this.setState({ elevation: Math.round(contentOffset.y) });
        } else {
            this.setState({ elevation: 7 });
        }
    };

    _renderItem = ({item}) => (
        <ListItem
            divider={true}
            centerElement={item.lastMessage}
        />
    );

    render() {
        return (
            <ThemeProvider uiTheme={uiTheme}>
                <View style={{flex:1}}>
                    <Toolbar
                        leftElement="menu"
                        centerElement="Aloha"
                        searchable={{
                            autoFocus: true,
                            placeholder: 'Search your chats',
                        }}
                        onLeftElementPress={() => Alert.alert('Menu Icon pressed')}
                        style={{container: getPlatformElevation(this.state.elevation)}}
                    />

                    <View style={{flex:1, flexDirection: 'column'}}>
                        <FlatList
                            data={[
                                {
                                    userId: 1,
                                    lastMessage: 'This line here will show the last message and takes up the whole line'
                                },
                                {
                                    userId: 2,
                                    lastMessage: 'This line here will show the last loooooong message'
                                },
                                {
                                    userId: 3,
                                    lastMessage: 'This line here will show the last message and takes up the whole line'
                                },
                                {
                                    userId: 4,
                                    lastMessage: 'This line here will show the last loooooong message'
                                },
                                {
                                    userId: 5,
                                    lastMessage: 'This line here will show the last message and takes up the whole line'
                                },
                                {
                                    userId: 6,
                                    lastMessage: 'This line here will show the last loooooong message'
                                },
                                {
                                    userId: 7,
                                    lastMessage: 'This line here will show the last message and takes up the whole line'
                                },
                                {
                                    userId: 8,
                                    lastMessage: 'This line here will show the last loooooong message'
                                },
                                {
                                    userId: 9,
                                    lastMessage: 'This line here will show the last message and takes up the whole line'
                                },
                                {
                                    userId: 10,
                                    lastMessage: 'This line here will show the last loooooong message'
                                },
                            ]}
                            renderItem={this._renderItem}
                            keyExtractor={item => item.userId}
                            onScroll={this.onScroll}
                        />
                    </View>
                </View>
            </ThemeProvider>
        );
    }
}