Comments (5)
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 :)
from react-native-modalize.
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
from react-native-modalize.
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>
</>
)
}
}```
from react-native-modalize.
I believe the main problem is react navigation header, he's visible always in every case. This is the screen in stack.
from react-native-modalize.
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
from react-native-modalize.
Related Issues (20)
- Smoother animations for alwaysOpen props HOT 1
- avoidKeyboardLikeIOS not working well on android HOT 2
- Can't scroll with adjustToContentHeight (android 10) HOT 2
- new modalize on top of previous modalize HOT 1
- TextInput with iOS hardware keyboard not working
- How to disable android back button when modalize is opened
- Determine current modal height and/or current position
- panGestureAnimatedValue doesn't change with <Modalize>.open()
- Drag event is not available when model up-down.
- Rerender "renderItem" + "keyExtractor" HOT 1
- Left hand swipe up not working
- scroll not working with HeaderComponent on android HOT 5
- how to open the modal when a success API response comes? in the then callback
- Text Flickering While Typing HOT 2
- Handle is visible above a plain view
- Modal Jumping height after opening if I'm closing it with pan gesture HOT 9
- [Error][On Android only] Open the modal and touch two fingers to close the modal HOT 2
- Error: Warning: This synthetic event is reused for performance reasons HOT 1
- Modal Size HOT 1
- how to enable gesture outside Modalize without closing it HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-modalize.