I am working on react native the below is one of the code snippet which I currently working on. My issue is with Pinch Gesture Handler.
<TapGestureHandler
numberOfTaps={2}
maxDelayMs={250}
ref={doubleTapRef}
onActivated={handleDoubleTap}
minPointers={5}
>
<Animated.View>
<PinchGestureHandler
onGestureEvent={onPinchEvent}
onHandlerStateChange={onPinchStateChange}
>
<Animated.Image
source={{ uri: imageUrl }}
style={{
width: windowWidth,
height: calculatedHeight,
borderColor: AppColors.palette.black,
transform: [{ scale: scale }]
}}
resizeMode='contain'
/>
</PinchGestureHandler>
<Animated.View style={[{
opacity,
borderRadius:100/2,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
left: 0,
right: 0,
top: 0,
bottom: 0,
}]}>
<Image style={{resizeMode:"center"}} source=
{require('../../res/assets/images/heart.png')} fadeDuration={0}/>
</Animated.View>
</Animated.View>
</TapGestureHandler>
I have added TapGestureHandler and PinchGestureHandler, my problem is PinchGestureHandler for image zooming is not working properly some times it work sometimes not can any one suggest how to solve this issue.
Related
I'm trying to position the callout at the bottom of the screen and have it fixed to this position even though the map is moving? Has anyone had any luck in achieving this with React Native Maps?
All my attempts have not fixed the callout to the bottom of the screen.
The only way I have found is to avoid using the callout component provided by react-native-maps.
Here is the code for the callout:
<Callout
tooltip
style={styles.itemContainer}
>
<CalloutSubview
style={styles.button}
onPress={closeCallout}
>
<Ionicons name="ios-close-circle" size={30} style={styles.icon} />
</CalloutSubview>
<SemiBoldHeadline
fontSize={18}
text={title}
marginTop={0}
marginBottom={4}
marginRight={30}
/>
<BodyText
fontSize={14}
lineHeight={18}
marginRight={30}
>
{editedString}
</BodyText>
<View style={styles.inlineContainer}>
<CalloutSubview onPress={() => RouteService.openMaps(coordinates.latitude, coordinates.longitude, title)}>
<SmallDirectionsButton />
</CalloutSubview>
<CalloutSubview onPress={readMoreFunction}>
<ReadMoreButton
text={'Read More'}
/>
</CalloutSubview>
</View>
</Callout>
Here is the styling of the callout:
const styles = StyleSheet.create({
itemContainer: {
borderRadius: 5,
borderWidth: 1,
borderColor: Colors.borderColor,
width: Layout.window.width - 100,
backgroundColor: Colors.white,
padding: 20,
paddingRight: 25
},
inlineContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
},
button: {
position: 'absolute',
top: 0,
right: 0,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 30,
zIndex: 10,
},
icon: {
color: Colors.almostBlack,
opacity: 0.5
}
});
If you need to render custom react components "statically" above the map you shouldn't build it with using the map's callout component. Instead, create a view and position it absolutely above the map component:
<>
<Map .../>
<View style={{ position: "absolute", bottom: "20"}}>
{/* Your custom view content goes here*/}
</View>
</>
The callout components are just build to be used directly within the map's context and are expected to move when the map moves.
I have a very basic modal component(using React-native-modal) which render its given child views. However, I dont want the behaviour similar to KeyBoardAvoiding view, i.e. I don't want the modal to be pushed up when keyboard opens.
<Modal
isVisible={isVisible}
onBackdropPress={onCartDismiss}
style={CartStyles.cartModal}
onSwipeEnd={this.onCartDismiss}
onSwipe={this.onCartDismiss}
swipeDirection="down"
swipeThreshold={200}
propagateSwipe
avoidKeyboard={false}
>
{this.props.children}
....
On ios it is working fine i.e. the keyboard opens over the modal component, but not on android. avoidKeyboard={false} is not working.
This is my style for the modal (position:'absolute' didn't work too)
cartModal: {
position: 'absolute',
justifyContent: 'flex-end',
bottom: 0,
left: 0,
right: 0,
zIndex: 1,
},
I have even tried changing softinputmode in android manifest to :
android:windowSoftInputMode="adjustPan"
<Modal
isVisible={modalVisible}
animationInTiming={500}
animationOutTiming={1000}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={1000}
onBackdropPress={() => setModalVisible(!modalVisible)}
onBackButtonPress={() => setModalVisible(!modalVisible)}
style={{
justifyContent: 'flex-end',
margin: 0,
position:'absolute'
}}
avoidKeyboard={false}
>
try this, it works for me.
Set you model height as integer value without percentage.
<Modal
// style={{backgroundColor:'red'}}
deviceHeight={screenHeight}
deviceWidth={screenWidth}
transparent={true} visible={isVisible} animated={false}>
<View style={{
backgroundColor: 'rgba(0,0,0,.6)',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<View style={{
flexDirection: 'row',
height: 200,
width: '80%',
alignSelf: 'center'
}}>
{content}
</View>
</View>
</Modal>
Give the main view inside your modal a "fixed height value" and the containing view should have a "100%" view height. Like this:
<Modal animationType={fade} ...>
<View style={{
height: "100%",
width: "100%",
alignItems: "center",
// justifyContent: "center",
backgroundColor: "rgba(0, 0, 0, 0.4)",
}}>
<View style={{
borderRadius: 10,
marginHorizontal: width * 0.05,
marginTop: height * 0.1,
width: width * 0.9
height: height * 0.8
}}>
...`enter code here`
</View>
</View>
</Modal>
I solved the issue by removing justifyContent: "center"
I have used borderRadius in Image and loop it. It works in some images however others are rectangular. If I touch it then it shows the radius and disappears as soon as it is untouched. Using overflow hidden doesn't do the trick as well.
I'm confused I used the same style but the result is different. I've tested it on Android devices only.
https://snack.expo.io/#codebyte99/multiplearrays
code:
<TouchableOpacity activeOpacity={0.8}>
<ImageBackground
source={{
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREX0q18KDbtN-obe1EFxAwNg27xgR_KItZ7U8MkXnH7zBCEr_ASQ",
}}
style={[
{
width: 200,
height: 80,
resizeMode: "center",
justifyContent: "flex-end",
alignItems: "center",
margin: 5,
marginRight: 0,
marginTop: 0,
marginBottom: 5,
borderRadius: 6,
overflow: "hidden",
},
]}
>
<Text>{childItem.title}</Text>
</ImageBackground>
</TouchableOpacity>;
You have to set the borderRadius to Image, not in style:
<Image source={{...}} borderRadius={6} .../>
And you don't set overflow: 'hidden' in image style, but in the View:
<View style={{ ..., overflow: 'hidden' }}>
<Image ..../>
</View>
Wrap the Image in a View with overflow: "hidden" and apply borderRadius to that, e.g.
<View
style={{
width: 30,
height: 30,
borderRadius: 15,
overflow: "hidden",
}}
>
<Image
style={{ width: 30, height: 30}}
source={{ uri }}
></Image>
</View>
(I could not find a way to get borderRadius to work on the image directly on Android.)
Applying the same fixed height and width to the image and borderRadius as half of the (height/width) will solve the border issue for android in react-native. Note: Make sure you have resizeMode as 'cover'
<Image key={index} source={{ 'uri' }} resizeMode='cover' style={{ height: 40, width: 40, borderRadius: 20 }} />
I'm trying to display a simple overlay, but over certain components only.
Example code:
<Animated.View style={{ flex: 1 }}>
<Text style={ [{zIndex: 0}, styles.titleText] }>Title under overlay</Text>
<Animated.View style={ [styles.overlay] } />
<View style={{ zIndex: 2, flex: 1, justifyContent: 'center' }}>
<Text style={{ zIndex: 2, fontSize: 32, fontWeight: 'bold', color: '#ffffff', textAlign: 'center' }}>Subtitle above overlay</Text>
<Text style={ [{ zIndex: 0 }, styles.descriptionText] }>Text under overlay</Text>
<Text style={ [{ zIndex: 0 }, styles.descriptionText] }>Text above overlay</Text>
</View>
</Animated.View>
As mentioned, I need some of the components above the Overlay and others under it.
Right now, all components written in code after the overlay view, comes above overlay. I want specifically the component saying "Text under overlay" to come under overlay but the other text should be above.
How do I go about it? zIndex is not working the way I want it to.
You can add the overlay the by the combination of position: 'absolute' and zIndex in the following way.
<View style={styles.container}>
<View style={{position: 'absolute', backgroundColor: 'transparent', top: 0, bottom: 0, right: 0, left: 0, zIndex: 0}} /> //... Here is the overlay
<View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 200, right: 0, left: 0, zIndex: 1}} >
// Set the elements over the overlay here
</View>
<View style={{backgroundColor: 'blue', position: 'absolute', top: 0, bottom: 100, right: 0, left: 0, zIndex: -1}} >
// Set the elements under the overlay here
</View>
</View>
Here's the sample snack demo
I want to fix my Image. I use position: 'absolute', in iOS it works fine, but in android the image disappear. This is my code:
<Image style={{width: width, zIndex: 0, position: 'absolute', top: 0}}
source={require('../assets/2piano.png')}
resizeMode="contain"
/>
Please HELP!!!
This will work on both Android and iOS. Since your image is from the local resources you should give it a width:null and height:null in order to apply your own dimensions on it.
<View style={{width: 500, height:500}}>
<Image style={{width: null, height:null, zIndex: 0, position: 'absolute', top: 0, bottom:0, left:0, right:0}}
source={require('../assets/2piano.png')}
resizeMode="contain"
/>
</View>
For style:
twoPianoStyle: {
position: 'absolute',
height: '100%',
width: '100%'
}