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
Related
I would like to use two previews of the same camera(just front or just back) in the same view, with React Native, but i wasn't able to do that.
Basically like this:
<Camera />
<Text>some text...</Text>
<Camera />
For the camera I've tried to used both expo-camera and react-native-vision-camera
I've tried to copy the Camera with ViewShot from "react-native-view-shot", but it is too slow, and there is a very annoying flickering when updating the image.
<SafeAreaView>
<ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
<Camera style={styles.camera} type={type} ref={ref => {setCameraRef(ref); }}>
</ViewShot>
<Image fadeDuration={0} source={source} style={dimension} />
</SafeAreaView>
Has anybody had the same issue and solved it? Thanks.
Currently I am using NativeBase in my React Native expo project. However I don't understand style of NativeBase components.
For example this is the code I have.
<Box style={{ marginLeft: 20 }}>
// image here
</Box>
<Box marginLeft={20}>
// image here
</Box>
<Box style={{ marginLeft: 50 }}>
// image here
</Box>
<Box marginLeft={50}>
// image here
</Box>
And this is the result
https://imgur.com/2doj3kQ
Can someone explain this to me. Thank you
NativeBase does not have token 50 for spacing. You can refer this to read about design tokens in NativeBase.
You must differentiate between styling using
the style prop that is available for every React Native core component and also in NativeBase components because they implement React Native's View (used for Box 1 and 3 in your example)
utility props exposed by NativeBase (used for Box 2 and 4 in your example)
When using the style prop, you're stating absolute values. Using the utility props exposed by NativeBase, you're stating design tokens that translate to a specific absolute value. The design system has the advantage of customization: adapting the design tokens propagates to your whole application.
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 am using React Native View Shot and I need our product to be able to capture live streaming from a m3u8 uri from React Native video package.
Currently on android it is capturing the screen fine, but on IOS there seems to be an issue of View Shot capturing just a blank video. How it looks on IOS
The livestream is the one playing below and the screenshot is the one taken of the video.
Are they just not compatible, or how would I resolve the issue of capturing a screenshot of a live stream on ios?
<TouchableOpacity onPress={()=>saveCapturedImage()} style={capturedShot ? styles.capturedShotStyle : styles.beforeShotStyle}>
{capturedShot ? <Text/> : <Text>Click to capture shot</Text> }
</TouchableOpacity>
<Image style={capturedShot ? styles.captureContainerPost : styles.captureContainerPre} source={capturedShot ? {uri: capturedShot } : null} />
{/* Viewshot component from React Native Viewshot */}
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
{/* Video component from React Native Video, resizeMode cover to get full height on the component. Add pause controls for default, and controls can be toggled true/false */}
{videoUri && <Video
source={{
uri: videoUri,
}}
style={{
width: "100%",
height: "100%",
}}
resizeMode="cover"
controls={true}
paused = {false}
/>}
</ViewShot>
If anyone else wants an answer for this problem in future, I wrapped View shot capturing screen over a react native webview component playing a video on ios. It took a photo of a paused Youtube video playing. But even though View Shot captured a WebView of a video embedded, the content of the video was empty.
Not sure if this is because of RN View Shot, have emailed the founder of the package. Or does Ios block video content playing?
<View collapsable={false} style=Template:Height: "80%">
<WebView
originWhitelist={["*"]}
source={{
html:
'<iframe playsinline controls autoplay src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" ></iframe>',
}}
useWebKit={true}
originWhitelist={["*"]}
allowsInlineMediaPlayback={true}
style={{
height: 600,
width: 400,
}}
/>
</View>
</ViewShot>
But if anyone finds a better alternative solution let me know.
Hello i'm new on react native. I am using react native elements slider in my project but want to select range with two marker. It is working with one marker.
Here is my code :
<View style={{backgroundColor: "#fff"}}>
<Slider
style={{ width: '90%',marginLeft:20,marginRight:20 }}
minimumValue={0}
maximumValue={100}
step={1}
value={this.state.cost}
onValueChange={cost => console.log(cost)}
/>
<Text style={{marginLeft:20,marginRight:20}}>{this.state.cost}</Text>
</View>
React Native Elements slider doesn't support multiple marker. However you can use this library if you need multiple markers