I am integrating pinch zoom functionality to my react native app but it is not working properly as expected. I need pinch zoom functionality while sliding images
I have tried various libraries(ReactNativeZoomableView, react native pan zoom, PinchGesturehandler) but nothing work as expected.
Here's my code :
import ImageViewer from 'react-native-image-zoom-viewer';
{this.state.sessionsdetails.length > 0 ? (
<View style={{ flex: 1.7 }}>
<ImageViewer
key={this.state.counter}
ref={viewPager => (this.viewPager = viewPager)}
renderHeader={() => {
}}
renderIndicator={() => {
}}
loadingRender={() => {
return (
<ActivityIndicator style={{ alignSelf: 'center', justifyContent: 'center', height: '100%' }} size="small" color={Colors.primary} />
)
}}
index={this.state.index} imageUrls={this.state.images} style={{ flex: 1 }} onChange={(index) => {
this._onChangePage(index)
}} />
Imageviewer library works best of all libraries but it doesn't reset while sliding and also during zoomed in sliding image doesn't work properly.
Let me know if there are other ways of doing so. Any help would be appreciated.
Related
I have a component wrapped with react-native-swipe-gestures
import React from 'react'
import GestureRecognizer from 'react-native-swipe-gestures';
import Carousel from 'react-native-reanimated-carousel'
const MyComponent = () => {
return (
<GestureRecognizer
onSwipeLeft={() => { handleSwipeTask('left') }}
onSwipeRight={() => { handleSwipeTask('right') }}
>
{/*
some view children
*/}
<Carousel
loop
width={size.width}
height={size.height}
autoPlay={false}
data={lists}
scrollAnimationDuration={2000}
onSnapToItem={e => console.log(e)}
renderItem={({ item, index }) => {
return (
<View
style={{
width: '100%',
borderWidth: 1,
justifyContent: 'center',
}}
>
<FastImage
key={`attachment-${index}`}
style={{
width: '100%',
height: '100%',
}}
source={
local ? item.file_path
: {
uri: item.file_path,
priority: FastImage.priority.normal,
// cache: FastImage.cacheControl.cacheOnly
}
}
resizeMode={FastImage.resizeMode.contain}
/>
</View>
)
}}
autoPlayInterval={4000}
pagingEnabled={true}
/>
{/*
some view children
*/}
</GestureRecognizer>
)
}
with the gesture reconigzer when i swipe left or right i have to change the data of the view with handleSwipeTask method; it work well and in the data i have an array of images to show as carousel; so using react-native-reanimated-carousel i made my carousel working; but my issue when i swipe manually the caroussel my gesture recognizer detect the swipe and with the caroussel sliding my handleSwipeTask is triggered too; so what i want is to disable that recognition only for my caroussel component; i don't want to wrap every view exluding the caroussel on the gesture recognizer (it's my last option if there is no solution)
I am actually trying to design a chat application, where i rendered all the chats using a flat lists and i have ordered the chats according to their recent message time in descending order, when the order of chat messages changes, the image in chat component gets flickered. Please suggest me a way to prevent this flickering ,in whatsapp and telegram flickering doesn't happen i want to have the smooth ui experience on my chat app also.
I used React Native for the front end.
Here is the Flat list code..
<FlatList
data={state.connections}
refreshing={state.loading}
onRefresh={fetchLatestData}
ListHeaderComponent={<Searchbar
key="editor"
placeholder="Search me..."
value={state.searchValue}
style={{ margin: 15, marginTop: 0 }}
onChangeText={(value) => { fetchConnections(value) }}
/>}
ListHeaderComponentStyle={{ width: width * 1 }}
renderItem={({ item }) => {
let doc_id = getDocId(item.uid, state.userData.uid)
return <ChatCardComponent key={item.uid} data={item} navigation={navigation} userData={state.userData} latestMessageData={state.chattedFriends.get(doc_id)} />
}}
keyExtractor={(item, id) => item.uid}
/>
ChatCardComponentCode is,
I have used react-native-expo-cached-image for Image component
const uri = data.photoUrl;
return (
<View style={styles.container}>
<TouchableOpacity key={data.uid} onPress={() => { props.navigation.navigate('chatWindow', { data: data, userData: userData }) }}>
<View style={styles.chatContainer}>
<CachedImage
style={{ width: 80, height: 80, borderRadius: 60 }}
source={{ uri: uri }}
/>
</View>
</TouchableOpacity>
</View>
Please suggest me fix for this issue.
I am using rn-bottom-drawer for drawer implementation for my app. I tried several ways like PixelRatio, ModerateScale, If-else for range of screen height but i am unsuccessful in setting such a containerHeight that it works perfectly with all device screens and there is no space between my drawer and bottom of my screen.
My Code:
<BottomDrawer
ref={"_drawer"}
containerHeight={moderateScale(270)}
startUp={false}
backgroundColor={null}
downDisplay={moderateScale(200)}
onExpanded={() => this.setState({ isRecentSearchesExpanded: true })}
onCollapsed={() => this.setState({ isRecentSearchesExpanded: false })}
>
<View style={{
width: screenWidth,
}}>
<ImageBackground source={require('../../assets/tabBkgd.png')} style={{ height: "100%", width: screenWidth, justifyContent: "center", backgroundColor: "transparent" }} resizeMode="stretch">
{/* some views here */}
</ImageBackground>
</View>
</BottomDrawer>
This is the package i use for dynamic heights and widths :
rn-responsive.
Basically what you have to do is check in your phone what height suits well. Suppose you get 80 and your deviceHeight is 640 , then all you need to do is calculate (80/640)*100 i.e 12.5 so now
Just do :
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
<BottomDrawer
ref={"_drawer"}
containerHeight={hp("12.5%")}
and its fixed. Hope it helps. feel free for doubts
I'm using expo to build a pantry service app and I'm fetching a list of items from a node pantry server then render them on the app using Flatlist.
Everything works as expected except for one thing and that is the flatlist rendering when Orientation changes.
When testing with the expo app it works flawlessly even when the orientation changes.
Problem: When building android apk and testing it on device flatlist no longer renders as expected and for instance:
-> When starting the app in portrait mode you can scroll all the way to the bottom but when you rotate the device I'm unable to scroll all the way to the bottom or it seems I can but the rest of the items seem to be clipped beyond the device display borders.
-> Conversely when I start the app in landscape mode I'm able to scroll to the bottom with no issue but when I change the orientation to portrait the flatlist renders only half way through the screen, I'm still able to scroll to the end of it.
I've tried passing to extraData as well add flexgrow to contentContainerStyle,I've also tried using ScrollView instead of View but there are no noticeable improvements.
const [refreshing,setRefreshing] = useState(false)
ScreenOrientation.addOrientationChangeListener(
evt => {
setCurrOrientation(evt.orientationInfo.orientation)
setRefreshing(!refreshing)
}
)
ScreenOrientation.getOrientationAsync().then(result => setCurrOrientation(result.orientation))
keyExtractor = (item, index) => index.toString()
renderItem = ({ item,index }) => (
<ListItem
key={index}
leftAvatar={{ source: { uri: BASE_URL + ':' + PORT + '/uploads/' + item.rowid + '/image.png' } }}
title={<Text style={{ fontFamily: 'fake-receipt' }}>{item.item_name}</Text>}
subtitle={<Text style={{ fontFamily: 'fake-receipt', color: 'grey', fontSize: 10 }}>{item.item_type}</Text>}
containerStyle={{ borderBottomColor: '#F0F0F0', borderBottomWidth: 1, borderBottomStartRadius: 10, borderTopStartRadius: 10 }}
onPress={() => {
setSelectedItemIndex(index);
setSelectedItemRowID(item.rowid);
setSelectedItemSugarCondition(item.sugar === 'yes' ? 'yes' : 'no');
setOverlayVisible(true);
}}
rightIcon={<IconFA name={'plus'}
size={20}
color='#26a69a'
/>}
/>
)
<View>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
extraData={refreshing}
keyExtractor={this.keyExtractor}
data={itemsList}
renderItem={this.renderItem}
/>
</View>
Its puzzling me how it works fine in the expo app but not the expo android build, any ideas how I can fix this or if there is a better alternative?
I'm using expo 3.0.10 and device is running Android 9 Pie
I have figured it out, I used Dimensions with another view and placed flatlist inside it, this rendered the flatlist properly after orientation.
<View style={{ backgroundColor: '#f1f1f1', flex: 1 }}>
<View style={{height:Dimensions.get('window').height - 80}}>
<FlatList
extraData={refreshing}
keyExtractor={this.keyExtractor}
data={itemsList}
renderItem={this.renderItem}
/>
</View>
</View>
I'm trying to get youtube videos to play in my react-native project. I am using the react-native-youtube module and have enabled YouTubeDataAPIv3 and YouTubeAnalyticsAPI. But I'm getting a blank screen. Sometimes, after a little delay, the screen will resize leaving a smaller white square in the corner and a black background. But still no video.
MY api key does work. I tested this by passing a text-based request through postman. I've also made sure the api is also correctly being passed down to the component. I've tried different videos/videoIds. I've played around with various settings and looked at other examples of working code. My current theory is that this may have something to do with nested views/containers and settings. The videos are in component that is embedded in a parent screen. Maybe a flex:1 is overriding another view? I really don't know. . Has anyone else run into this problem? Any ideas how to fix this?
parent screen:
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<LeaderBoard />
<CurrentVideos />
</View>
</SafeAreaView>
);
}
video screen:
return (
<ScrollView style={{ flex: 1}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink'
}}
>
<YouTube
videoId={'BunklIatIK4'}
play={true}
apiKey={config.API_KEY}
controls={1}
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</View>
</ScrollView>
);
Figured it out! The issue was that I hadn't manually moved a copy of the the youtube iframe file from the node modules to the project in Xcode. Now, it's BEAUTIFUL!