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
Related
A part of my react native application currently looks like this:
Where the graph and picture are next to each other. My current code is:
<View style={{flexDirection:"row", backgroundColor:'#FFFFFF', borderRadius:10}}>
<View style={{flex:1, padding:10}}>
<Card.Cover source={{uri: props.url}}/>
</View>
<View style={{flex:1, padding:10}}>
<BarChartExample></BarChartExample>
</View>
</View>
I was wondering if anyone could help me fix what is wrong in my code to get my image looking like the example image.
You can try setting the resizeMode props on the component to contain.
More information here: https://reactnative.dev/docs/image#resizemode
I am trying to create a tablet application, and I want my layout to have a sidebar and then content inside but I'm not able to do that I tried searching for how to create a nested navigator that will work independently of its parent and render inside its parent but wasn't able to find any help about it anyone knows how to do that or if its possible to define a fixed component for all navigator children.
I tried working on react-native-navigation, react-navigation and react-native-router-flux but none of them till now have helped me with my problem, anyone got any solution?
sorry if it wasn't clear, please ask questions in the comment if you didn't understand what I'm trying to reach
I found the solution by using React Navigation by Facebook where you can create a navigator and a view but either one that is preceeding the other won't show if you don't give it height and width
<View>
<View style={{ height: "100%", width: 150 }}>
<SideBar navigation={navigation} />
</View>
<View>
<ContentNavigator />
</View>
</View>
I've used deckSwiper of native-base in react native project. I want the users to be able to zoom the image in it as well. I didn't find anything to do that. How can I zoom the image of deck swiper in native base?
Code:
<DeckSwiper
ref={(c) => this._deckSwiper = c}
dataSource={cards}
renderEmpty={() =>
<View style={{alignSelf: "center"}}>
<Text>Over</Text>
</View>}
renderItem={item =>
<Card style={{elevation: 3}}>
<CardItem cardBody>
<Image style={{height: 300, flex: 1}} source={item.image}/>
</CardItem>
</Card>
}
/>
No, DeckSwiper doesn't provide zoom functionality. However you can use 3rd party library for that feature instead of using <Image>
Here are few 3rd party libraries which i have used in my applications.
1) react-native-image-zoom
2) react-native-image-viewer
But still, before using any of this library, you should check your requirement and check which one is best suited for you.
Its not about Deck Swiper supporting Image zoom feature
If React Native Image provides zoom feature by default, then NativeBase will obviously support this
I was just wondering if it was possible, in React Native, to create a vertical overlay ; by that, I mean being on a page and when swiping down, an overlay comes down, covering the page, with various information on it (and the same when swiping up, an overlay coming from the bottom). I wanted to use react-native-swiper at first, but the vertical swiping is not compatible with Android.. So if anyone has another solution to offer, be my guest ! Thanks
check react-native-parallax-view hope this can help you.
EDIT
example:
return (
<View style={[{ flex: 1 }]}> {/* add parent container and then ParallaxView as specified in documentation */}
<ParallaxView
backgroundSource={require('image!backgroundImage')}
windowHeight={300}
header={(
<Text style={styles.header}>
Header Content
</Text>
)}
scrollableViewStyle={{ backgroundColor: 'red' }}
>
<View>
// ... scrollview content
</View>
</ParallaxView>
</View>
);
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>
);
}