How to specifiy modal height react native navigation? It default stretches full screen, how to stretch it half screen?
Can the drawer be shown from the bottom?
If you are asking for Modal in react native, you can proceed below.
1 - To reduce the modal height, you can specify the height inside the most parent View element
<View style={{height: 60%}}>
Also you can import Dimensions and use it to get screen's height and width as below,
import { Dimensions } from 'react-native';
const window = Dimensions.get('window');
const screenHeight = window.height;
const screenWidth = window.width;
and then you can use this screenHeight and screenHeight into your css.
<View style={{height: screenHeight - 80}}> // Any values
2 - Anything's possible and yes we can do that in react native too. But first they are called as ActionSheets(as in iOS) / BottomSheets(as in android). You can check these libraries for android and ios or both.
https://github.com/beefe/react-native-actionsheet (Both)
https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior (Android)
https://github.com/eyaleizenberg/react-native-custom-action-sheet (iOS)
Related
Is there an api to get the height and width of an element in React Native using a ref?
I'm not interested in the window or screen dimensions, and I understand you can use onLayout, but wanted to double check to make sure there's no api for height and width when using a ref.
Some additional verbose elaboration:
In ReactJS, clientHeight and clientWidth works, but not in React Native.
const ref = React.useRef();
const height = ref.current.clientHeight;
const width= ref.current.clientWidth;
return <div ref={ref} />;
On React Native, you can use onLayout, but is there a method for a ref?
<View
onLayout={(event) => {
const dimensions = event.nativeEvent.layout;
const {width, height} = dimensions;
}}
>
</View>
<View style={width: 20}>Hello</View>
Platform.OS ?
Dimensions.get("screen") ?
-> 1100, 1440 ... ?
How to separate width?
I want it to look the same on all devices, both Android and iPhone.
If you want to set responsive width, or the width that varies with the device width, use Dimension. Take a look at the following code:
import {Dimension, StyleSheet} from 'react-native`
.....
<View style={styles.container}>Hello</View>
.....
const styles = StyleSheet.create({
container:{
width: Dimension.get('screen').width, // the container will take the whole width of the device screen width
}
})
If you are answered let me know
You generally don't need to get Platform information for making a responsive UI.
You can simply import "Dimensions" and get width from it.
Example :
import {Dimension} from "react-native"
//for width
const SCREEN_WIDTH = Dimensions.get('screen').width;
//for height
const SCREEN_HEIGHT = Dimensions.get('screen').height;
Description
When a child of a pressable component is pressed (such as an image), the function passed to the onPress prop does not execute on android. Works as expected on iOS.
React Native version:
0.63.2
Steps To Reproduce
Open a new expo snack
Create a Pressable component that is the parent of some other component (A text or image)
Set the onPress prop to call a function that has a visual effect. (Like an alert)
Switch to the android tab, and click 'Tap to play'
Expected Results
The function is called and the effect (an Alert) is fired
Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/#razorshnegax/6c7be3
Code example:
import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';
export default class Index extends React.Component {
render() {
// The onPress function fires in iOS, but not android
return (
<View>
<Pressable onPress={() => {Alert.alert("Yeep")}}>
<Image source={require('./greatknight.png')} style={{
// So that the image is more centered
top: 100,
left: 100
}}/>
</Pressable>
</View>
);
}
}
Due to the styling, the Pressable component is not place behind the Image.
You can see this by adding a color to the Pressable component.
A fix for this would be to style the Pressable component so the image components are aligned and events bubble through.
I'm not exactly sure why the event doesn't bubble through on Android as it should based on the component hierarchy.
In my case added zindex to resolved this problem. This work even touchable also
<Pressable onPress={() => alert()} style={{zIndex: 0.5, }}>
*****
</Pressable>
how I can get scroll change from start to end with react native flat list and change the height of header base on that like bellow example
example-screenshot
for instance
const delta = end_scroll_pos - start_scroll_pos; // for example delta = 60
for example between scroll postion 220 and 280 delta 60
I've recently developed a new package, react-native-animated-screen, that does exactly what you need
Check it out
https://www.npmjs.com/package/react-native-animated-screen
import React from 'react';
import { Image, Text, View } from 'react-native';
import AnimatedScreen from 'react-native-animated-screen';
const Component = () => {
const animationStart = 90;
const animationEnd = 300; // the header will be totally collapsed by screen scrolled 300
return (
<AnimatedScreen.Wrapper>
<AnimatedScreen.Header headerMinHeight={animationStart} headerMaxHeight={animationEnd}>
<View>
<Text>Title</Text>
<AnimatedScreen.CollapsibleElement>
<Text>Subtitle</Text>
</AnimatedScreen.CollapsibleElement>
</View>
</AnimatedScreen.Header>
<AnimatedScreen.ScrollView>
<View style={{ height: '300%' }}>
<View>
<Text>Body</Text>
</View>
</View>
</AnimatedScreen.ScrollView>
</AnimatedScreen.Wrapper>
);
};
In the example above only the title is going to remain after scrolling, the subtitle (as all the elements wrapped in a CollapsibleElement) will disappear.
You can use the two params headerMinHeight and headerMaxHeight of the AnimatedHeader wrapper component to define exactly after how much scroll the animation should start and complete
I am showing pictures gallery in full screen mode. I am using scrollview in horizontal for scrolling the pictures. Right now I can scroll the pictures by swiping left or right and I using the pagingEnabled enabled props.
But I want to add more gesture, where when user tap on left or right ( a distance from the edge) , it will automatically mapping the swapping gesture. How can I do this?
I assume your scroll view looks like this with pagingEnabled and horizontal props.
<ScrollView
horizontal={true}
pagingEnabled={true}
onMomentumScrollEnd={event => {
this.setState({xOffset: event.nativeEvent.contentOffset.x })
}}>
// Content
</ScrollView>
The position can be calculated with :
this.state.xOffset/ DeviceSize.width
onMomentumScrollEnd is called each time you scroll an item in the ScrollView
(the content must be full width in this case)
Get a ref to the <ScrollView> then to scrollToEnd() or use scrollTo methods - https://facebook.github.io/react-native/docs/scrollview.html#scrollto
To calculate page number, you would use onLayout to calculate sizes of your pages. If it's the width of the device then that's easy, just use Dimensions.get('window').width then feed that to the x in scrollTo.