Overlay doesn't go full height

[jeremybarbet]

Overlay doesn't go full height

[jeremybarbet]

I rewrote examples to make it easier to understand: https://jeremybarbet.github.io/react-native-modalize/#/EXAMPLES and I'll improve them in the future to show this behavior :)

[jeremybarbet]

Hi hi!

Thanks for using modalize.

Do you have a code to share to see how you declared modalize and where do you have the blue header also on top of the overlay

[kresogalic8]

Hey, yes, here's the code

import { View, TouchableOpacity, TextInput, Image } from 'react-native'
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons"
import Modal from "react-native-modal";
import { COLORS } from '../../common/Colors';
import Text from "../../components/CustomText/"
import Button from "../../components/Button/"
import styles from "./style";
import * as firebase from "firebase";
import 'firebase/functions'
import Modalize from 'react-native-modalize';

export default class Personality extends Component {
    state = {
        visible: false,
        visibleReviewModal: false,
        visibleText: false,
        selectedGrade: null,
        comment: '',
        grade: 0,
        isLoading: false
    }

    modal = React.createRef();

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

    _toggleModal = () => this.setState({ visible: !this.state.visible });

    _toggleReviewModal = () => this.setState({ visibleReviewModal: !this.state.visibleReviewModal });

    _toggleReview = grade => {
        this.setState({ visibleText: true, grade, selectedGrade: grade });
    }

    _sendReview = async () => {
        this.setState({ isLoading: true })
        const httpsCallable = firebase.app().functions('europe-west1').httpsCallable('giveFeedback');

        try {
            const { data } = await httpsCallable({
                grade: this.state.selectedGrade,
                characteristic: this.props.data.enum,
                comment: this.state.comment,
                to: this.props.selectedUser.userId,
                date: new Date().toISOString()
            });
            if(data.success) this.setState({ isLoading: false, visibleReviewModal: false })
        } catch (error) {
            console.log(error, "----- erro")
        }
    }

    render() {
        return (
            <>
                <View style={styles.personality}>
                    <TouchableOpacity
                        onPress={() => this.onOpen()}
                        style={{ alignItems: 'center' }}
                    >
                        <MaterialCommunityIcons name="information" size={25} color={COLORS.primary} />
                    </TouchableOpacity>

                    <TouchableOpacity onPress={this._toggleReviewModal} style={styles.personalityBtn}>
                        <View style={{ flex: 1 }}>
                            <Text style={styles.personalityTitle}>{this.props.data.name}</Text>
                            <View style={styles.personalityContainer}>
                                <Text numberOfLines={1} style={styles.personalityText}>{this.props.data.description}</Text>
                            </View>
                        </View>
                        <View style={{ backgroundColor: COLORS.green, width: 30, height: 30, borderRadius: 15, alignItems: 'center', justifyContent: 'center' }}>
                            <MaterialCommunityIcons name="chevron-right" size={25} color="#3b9b92" />
                        </View>
                    </TouchableOpacity>
                </View>

                <Modalize ref={this.modal} adjustToContentHeight>
                    <Text>...your content</Text>
                </Modalize>
            </>
        )
    }
}```

[kresogalic8]

I believe the main problem is react navigation header, he's visible always in every case. This is the screen in stack.

[jeremybarbet]

Alright, two things:

• You passed adjustToContentHeight which will resize the modal to the height of the content and won't take the full screen height.
• The bottom navigation pass on top of the modal, because the modal should wrap the navigation. You can see here: https://github.com/jeremybarbet/react-native-modalize/blob/master/examples/react-navigation/App.tsx#L41-L49 Modalize is global to the whole app and then you would need to use the toggle function that is passed from the context to open the modal: https://github.com/jeremybarbet/react-native-modalize/tree/master/examples/react-native-navigation Once again, the examples are not very clear and easy to understand, and I will rewrite them to make them simpler, I'm just quite busy right now