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.
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 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>
How to implement exactly the same swipeable bottom sheet in React Native:
react-swipeable-bottom-sheet (demo gif above) lib is working only in React.
I know react-native-overlay-section but it is opening to the top of the window with bounce animation.
EDIT
I also tried react-native-touch-through-view, but there is a known issue with touches through the TouchThroughView...
<View style={styles.container}>
<View style={styles.contentContainer}>
<FlatList
data={this.state.list}
renderItem={(data) => {
<View>
<Text>{"Bla bla bla"}</Text>
<TouchableOpacity onPress={()=> this.onPress()}>
<Text>{"THIS IS NOT WORKING ON ANDROID"}</Text>
</TouchableOpacity>
</View>
}} />
</View>
<TouchThroughWrapper style={styles.scrollWrapper}>
<ListView
style={styles.scroller}
dataSource={actionsList}
renderHeader={() => <TouchThroughView style={styles.touchThroughView} />}
renderRow={(rowData) => {
return (
<Text style={styles.itemRow}>{rowData}</Text>
)
}}>
</ListView>
</TouchThroughWrapper>
You can achieve your requirement with the help of following package.
https://www.npmjs.com/package/react-native-touch-through-view
This package allows scroll views and table views to scroll over interactable content without poor performing size and bounds animations.
As the title suggests, <Image src={require('...')} /> does not appear when attempting to view while offline and disconnected from react native packager.
It turns out that either because of the <TouchableOpacity> or the lack thereof <View> wrapping the <Image/>, it causes the image to not appear.
So the first example doesn't work:
<TouchableOpacity>
<Image src={require('...')} />
</TouchableOpacity>
whereas this does:
<TouchableOpacity>
<View>
<Image src={require('...')} />
</View>
</TouchableOpacity>
I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android
I'm using react native version 0.39 and the android version is 6.1.
The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I'm not getting any errors of warnings.
It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.
On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn't working. Thus, I suppose that it has something to do with memory issues. But I'm not sure.
I've added largeMemoryHeap to the manifest file.
In android studio I get log file as follows:
Thus, no errors, nothing. But the app doesn't work.
The stuck of code where those photos are rendered is as follows:
<ScrollView removeClippedSubviews={true}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
<View style={styles.container}>
{cards}
</View>
</ScrollView>
And one card is as follows, and I have a stuck of 10:
<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
<View style={styles.innerCard}>
<View style={styles.innerImageContainer}>
<Image contain='contain' style={styles.innerImage} source={this.props.image}/>
</View>
<View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
<Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
</View>
</View>
</TouchableHighlight>);
I found somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.
On IOS it works just fine.
I would be infinitely grateful if someone has an idea?