I am currently using an example from here: https://facebook.github.io/react-native/docs/modal.html
While I can edit the animationType={"slide"} it seems to be transitioning very slow.
Is there a way to edit the transition speed of the slide?
For anyone out there, its actually Xcode's issue
do cmnd + T and it will return to normal.
Simulator slow-motion animations are now on?
With library react-native-modal you can specify the duration of the In and out Animation
<Modal
hasBackdrop={true}
backdropOpacity={0.6}
backdropColor="#000000"
hideModalContentWhileAnimating={true}
useNativeDriverForBackdrop={true}
useNativeDriver={true}
animationInTiming={1}
animationOutTiming={1}
backdropTransitionInTiming={1}
backdropTransitionOutTiming={1}
isVisible={isVisible}
onBackdropPress={() => {
closingFunc();
}} />
Related
I have a component which when the user long press a card I show a bigger version of this card.
The ideia is that the bigger card will be shown as long as the user keep pressing the touch and then will hide only when the finger is released (something like instagram long press). I tried to archieve this using the onLongPress and the onPressOut props of <TouchableHighlight>, the thing is that the onPressOut props has something that they call "cancel",
/**
* Called when the touch is released,
* but not if cancelled (e.g. by a scroll that steals the responder lock).
*/
What is happening is that when the user hold and move the finger the onPressOut prop is called, therefore the bigger card is hidden.
This is the code:
<View style={styles.container}>
<View style={styles.separator}>
<TouchableHighlight
underlayColor="rgba(255, 255, 255, 0)"
onPress={this.cardClick}
onLongPress={this.cardLongPress}
onPressOut={this.cardPressOut}
>
{this.content}
</TouchableHighlight>
</View>
</View>
Here is a GIF to show what is happening:
GIF
What I want is something that is only triggered when the user acctually releases his finger, regardless of whether or not he is moving the finger arround. Thanks in advance for the help.
Try setting an offset https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset , or convert your root view in a touchablewithoutfeedback, and call onPressOut there
So you want an Instagram style preview modal. I got you.
As mentioned in previous comments, you should use the pressRetentionOffset prop that will let you "extend" the pressable area. https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset
But! this prop will only work if the ScrollView is disabled. so you will need to disable the scrolling when the preview modal is shown.
You can do that with the scrollEnabled prop on ScrollView and make it falsy when the preview modal is shown.
Of course, this works with onLongPress and onPressOut props.
I am using "react-native-action-bar" library for my application action bar.
It's showing white icon when I am using dark background and that's fine, But when i am using white background in case icon also showing white.
I tried with different codes but nothing helped, if anyone having solution for the same please let me know...here is my code
<ActionBar
containerStyle={{height:60,alignSelf: 'center',paddingRight:40}}
backgroundColor={'#fff'}
title={'My Tutorials'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{backgroundColor:'#333',height:18,width:18}}
/>
Try giving background color to your badgeColor
<ActionBar
containerStyle={{height:60,alignSelf: 'center',paddingRight:40}}
backgroundColor={'#fff' }
badgeColor={'#000000'}
title={'My Tutorials'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{height:18,width:18}}
/>
Its working fine for me, check this expo link i just created
https://snack.expo.io/rkMzuYrE4
This code is working for me check below example:
<ActionBar
containerStyle={{height:60,alignSelf: 'center',paddingRight:40}}
backgroundColor={'#fff'}
title={'Gallery'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{tintColor: '#000000'}}
/>
I want to display a loader image till my image is loaded to the react-native Image. Back is an image which is stored locally and it has been imported to the screen.
This code gives me a blank screen for 'Back' image. When I set the source as source={Back} it works. But the following doesn't work. What am I doing wrong here?
<View style={styles.imageWrapper}>
<NonClickableImage
source={this.state.loaded ? Back : {uri: detailedMovement.image}}
resizeMode="stretch"
width={width - 20}
height={200}
onLoad={() => this._onMovementImageLoaded()}
/>
</View>
I think your logic needs to be:
{!this.state.loaded ? Back : {uri: detailedMovement.image}}
Because you want to show the Back icon when the state is NOT loaded. Currently, if the state is loaded, then you display Back.
When i drag and release finger , flatlist will glide automatically for a while.
I want disable the auto inertia glide,it means :
after release finger, flatlist stops scrolling at once.
How to do with flatlist?
Thanks!
<FlatList
...
decelerationRate="fast"
...
/>
Scrolling will degrade much faster than normal which kind of give the feeling of no momentum.
Set the decelerationRate property to {0}.
For example:
<FlatList
...
decelerationRate={0}
...
/>
Background Transparency with BLUR
Is it possible to blur view without using background Image? I want to show the parent content on top of the background blur view in modal.
Similar kind of this:
Tried with react-native-blur :
Its actually blurring the background image. I want to blur and show the content which is behind the modal.
Tried along with react-native-overlay : But no change.
well if you are
using expo
then you should go and check out this link here
else if you are like me
who loves to use 'react-native init' and want some blurry effect based views then i have this for you!
https://github.com/voronianski/react-native-effects-view
an awesome library
it would be very simple to use it like
"if the dialogbox is open then render The blur view else render simple",
here is a simple example for basic how to use!
...imports
var EffectsView = require('react-native-effects-view');
var App = React.createClass({
renderVibrant() {
return (
<View>
<Text style={styles.text}>Do you feel blurry??</Text>
</View>
);
},
render() {
return (
<EffectsView
style={styles.view}
blurStyle="dark"
vibrantContent={this.renderVibrant()}
>
<Image style={styles.bg} source={require('image!bg')} />
</EffectsView>
);
}
});