Has anyone ever implemented some sort of image slide show in React Native? I've currently been trying to implement React Native Swiper ( https://github.com/leecade/react-native-swiper ) and while it works, the performance switching picture to picture has a very choppy feel.
Is there any sort of solution for Picture Slideshows that other people have worked with. Ideally it would be dynamic so I could load in views upon loading the system
Any advice would be spectacular!
Right now here is my current implementation, it works.. but it isnt great. Figured this is pretty much irrelevant but decided to include it anyways just in case someone would want to see it
PictureFeed(){
var array = ["pic1","pic2","pic3","pic4"];
let Arr =array.map((a, i) => {
return(
<View key={i} style={styles.slide}>
<Image source={{uri: {a}.a }} style={styles.image} />
</View>
);
})
return(
<Swiper style={styles.wrapper} showsButtons={true}>
{Arr}
</Swiper>
);
}
Related
Hi so I am having the issue where after navigating to a different screen. My items.map does not seem to be executing...
The console.log() within the array.map is working it will execute after on mount of the screen it just is not returning the component inside of it until the screen is updated either by saving in visual studio or touching the screen because I have a pan responder implemented...
The below snippet of code draws a line for me a on players finger drag and the goal is to have them match them with different tabs that will appear but that is beside the point...
return (
<View style={{ flex: 1 }} {...panResponder.panHandlers}>
<Text>Hello World</Text>
<Svg>
{items.map((item) => {
console.log("IS THIS WORKING??");
return (
<MatchingDisplay
key={item.id}
listItems={item}
randItems={item}
numOptions={numOptions}
/>
);
})}
<Line
x1={startX}
y1={startY}
x2={endX}
y2={endY}
strokeWidth="5"
stroke="black"
/>
</Svg>
</View>
);
Is there a way to manually update the screen when the navigation first takes place or am I missing something in my code that I just can't seem to see.
I have already done something like this on two other screens and do not understand why now it is not working...
I should also add the device I am testing on is an Android device.
Any and all help is appreciated
In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.
Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.
Here is code example:
<FlatList
data={actionSheet._data}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(_, index) => index}
renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
ItemSeparatorComponent={() => (
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
)}
/>
OR
<ScrollView>
{
actionSheet._data.map((item, index) => (
<>
<ActionSheetClickableItem data={item} index={index} key={index}/>
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
</>
))
}
</ScrollView>
So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It have to correct view as we expecting, why its behave like this, any solution??????
I was facing the same issue.
That might be with Emulator or Your screen.
You can use also increase the height of itemSeparater or make the background color more darker.
If you check it in real device then it displays all the separaters.
hello I am new to react native I have given a task to create an image slider as shown in the picture
I have not found any library matching this design so I want to create a custom carousel how can I create this. Any sort of help will be appreciated.
Can you provide more details as to what is the requirements of this?
Seems like you are trying to create introductory slides in the app.
This plugin is really flexible and customisable. You might want to check this one out.
https://www.npmjs.com/package/react-native-app-intro-slider
Also if you desire to make a custom slider, you can use ScrollView and use the following configuration to the scrollView
<ScrollView
style={{ flex: 1 }}
pagingEnabled={true}
horizontal={true}
scrollEventThrottle={16} >
<View>
<Text>Screen 1</Text>
</View>
<View>
<Text>Screen 2</Text>
</View>
</ScrollView>
Tag me if you have any more questions regarding this.
Give this article a read to understand it better.
https://medium.com/backticks-tildes/create-a-custom-app-intro-slider-in-react-native-4308fae83ad1
I have spent hours trying to fix this issue, but can't seem to get around it. I am using react-native-cube-navigation library to incorporate cube navigation into my app. Inside the cube navigation, I have videos that are pulled from a database that play when inserted. I have created a working pause function, but when the videos are places inside of CubeNavigation, the pause function stops working, as well as all buttons on screen. CubeNavigation uses a Animated.ScrollView, so I need to figure out how to allow touchable to work inside of this.
This is the code from the home Screen.
CubeNavigation>
{posts.map(
({url, owner, description, encores, comments, shares}) => (
<View style={[styles.container, { backgroundColor: "#ddd" }]}>
<Videos url={url} owner={owner} description={description} encores={encores} comments={comments} shares={shares}/>
</View>
)
)}
</CubeNavigation>
This is the code from Videos.js
<TouchableWithoutFeedback onPress={() => setPlaying(!playing)} >
<View style={{flex:1}}>
<Video
paused={playing}
style={[styles.backgroundVideo, {width: w, height: h}]}
source={{uri: url}}
repeat
ref={videoRef}
resizeMode="cover"
retainOnceInViewPort={false}
/>
</View>
</TouchableWithoutFeedback>
I am working on a react native project. Where I need to implement drop-down with an input field. When I type anything in the input field it should filter the dropdown content.
I can't use react-native-dropdown on anything because it placed a mask on the whole screen and I am not able to type anything when the dropdown is open.
So I tried to implement my own drop-down.
<View style = {{position:'absolute', zIndex:5, backgroundColor:'red'}}>
<View style = {[Styles.dropdownView, {display:this.props.display}]}>
<ScrollView style={{ top:0, bottom:0}}>
{ listData.map((val, i) => <Text key = {i} > {val} </Text> )}
</ScrollView>
</View>
</View>
Every thing is working fine but I am not able to scroll it vertically. Though it's working fine with horizontal scroll.
Please help me to fix this or suggest some other way.