import React, { Component } from 'react';
import { StyleSheet, Text, View, Modal, ScrollView, TouchableOpacity,
    Dimensions, PanResponder, Animated, Slider, Platform, TextInput, KeyboardAvoidingView,
    Keyboard, UIManager } from 'react-native';

import Modalize from 'react-native-modalize';

export default class App extends Component {

    modalRef = React.createRef();

    onOpen = () => {
        const modal = this.modalRef.current;
        if (modal) {
          modal.open();
        }
    }

    render() {

        return (
            <View style={styles.container}>
                <TouchableOpacity style={{marginTop:15, backgroundColor: "lightblue", padding: 15}} onPress={() => {this.onOpen()}}>
                    <Text>Toggle Modalize</Text>
                </TouchableOpacity>

                <Modalize ref={this.modalRef}
                    HeaderComponent={
                        <View style={{ padding: 15, borderBottomColor: "lightgrey", borderBottomWidth: 1}}>
                            <Text style={{fontSize: 20, fontWeight: "bold"}}>
                                Header
                            </Text>
                        </View>
                    }
                >
                    <Text style={{fontSize:25, fontWeight:"bold"}}>
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                        content i uhg iuyg iuy g iuyg uik ghiu oyhg iuo ghoi gh ioy ug iou
                    </Text>
                </Modalize>
            </View>

        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});