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
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.
I make check box list on Model Pop up by using react native multiple select
checkbox list listed but it take full screen height
i am not able to fix this issue
please Any body help me
Outer Element would be a modal, then make a view of a specific height inside that modal,
Example
<Modal transparent={true}
visible={this.state.showDialog}
animationType='fade'>
<View style={{opacity:.5, backgroundColor:'black',flex:1}}/>
<View
style={{position:'absolute',padding:16,top:0,bottom:0,left:0,right:0
,justifyContent:'center',alignContent:"center",
alignItems:'center'}}>
<View style={{backgroundColor:’red’,padding:16,borderRadius:5,
width:'60%',height:'10%',alignContent:'center',alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:14,alignSelf:'center',textAlign:'center'}}>
Sorry!!
</Text>
<Text style={{marginTop:5,fontSize:12,alignSelf:'center',textAlign:'center',color:’black’}}>
{this.props.errorMessage}
</Text>
<Button title='close'
onPress={()=>this.setState({showDialog:false})}/>
</View>
</View>
</Modal>
I need to put two components at two ends of the screen. Following is my code.
<View style = {{flexDirection:"row"}}>
<Text>cancel</Text>
<Text style={{justifyContent:"flex-end",alignItems:"flex-end"}}>cancel</Text>
The two buttons are near to each other and I want to push the second button to the extreme right end of the screen without margin, how to do it by properties? It is not working currently. Thank you.
You need to do something like this
<View style={{flex:1,flexDirection:"row",justifyContent:"space-between"}}>
<View style={{flex:0.5}}>
<Text>Cancel 1</Text>
</View>
<View style={{flex:0.5,alignItems:"flex-end"}}>
<Text>Cancel 2</Text>
</View>
</View>
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?
I have a image in my component and I am trying to place an image on top of that. But only the first image shows, the one I am trying to place on top of it doesn't.
React Native supports zIndex. You can give your second image a style like this { zIndex: 1, position: 'absolute', ... // other position style } to put it on top of other view.
See https://facebook.github.io/react-native/docs/layout-props.html#zindex for reference.
Put the second Image inside the first one:
<View style={Styles.container}>
<View style={Styles.viewStyle}>
<Image
style={Styles.imageStyle}
source={require('./Bakgrundsbild.png')} >
<View style={Styles.logoViewStyle}>
<Image
style={Styles.logoStyle}
source={require('./Logo.png')}
/>
</View>
</Image>
</View>
</View>
You need to give ImageBackground & then give Image
<ImageBackground>
<Image></Image>
</ImageBackground>
like this