Hi I am trying move logo out of borders for IOS it works fine but Android have a problem the logo is covered by view on background. I am tried to set up background color to transparent but doesn't work.
Any idea how to solvate it?
and here is my code:
const styles = StyleSheet.create({
wallWrapper: {
backgroundColor: '#00000000',
borderWidth: 1,
borderColor: 'green',
paddingTop: 40,
},
wallImageBorderEffect: {
borderWidth: 1,
borderColor: 'red',
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 30,
backgroundColor: 'gray',
},
});
...
render() {
return (
<View style={styles.wallWrapper}>
<View style={styles.wallImageBorderEffect}>
<Image
style={{
height: 45,
width: 105,
position: 'absolute',
bottom: 6,
overflow: 'hidden',
}}
resizeMode="cover"
source={require('./images/mock-logo.png')}
/>
</View>
<View style={{
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 400,
}}>
</View>
</View>
);
}
}
This is a known issue on Android. The overflow attribute is not supported on Android yet (only on iOS).
But you can support the feature request here.
You could maybe try to move your <Image /> component outside of the <View /> and fix the position by adjusting top props.
Related
I am trying to design below layout in react native.
I am not able to draw horizontal line as shown above.
Some how I have drawn but margin on the right is not being applied
Code
<View style={{ flexDirection: 'row' }}>
<Text style={styles.text}>
Search
</Text>
<View style={styles.viewStyleForLine1}></View>
</View>
Style
viewStyleForLine1: {
borderWidth: 1,
borderColor: '#cc0000',
alignSelf: 'stretch',
marginLeft: 5,
marginRight: 5,
width:"100%"
},
More edit on centering the content
Here is how my View is
<View style={{ flexDirection: 'row' }}>
<Text style={styles.text}>
Search</Text>
<View style={styles.viewStyleForLine1}></View>
</View>
Style
text: {
marginTop: 16,
fontSize: 30,
fontWeight: 'bold',
color: '#cc0000',
marginLeft: 15
},
viewStyleForLine1: {
borderBottomWidth: 1,
borderColor: '#cc0000',
marginLeft: 5,
alignItems:"center",
marginRight: 15,
alignSelf:"center",
flex:1
},
What modification I should do?
you can change the style width: "100%" to "flex:1". you want the right view to occupy the rest of width, then the "flex:1" means the rest of width belongs to it.it has a weight. the percentage you have to use in both components. the more tips about UI adapter you can read this article
viewStyleForLine1: {
borderWidth: 1,
borderColor: '#cc0000',
alignSelf: 'stretch',
marginLeft: 5,
marginRight: 5,
flex:1
},
This is design that I want to implement for my mobile application:
And this is what is currently accomplished to implement:
Implemented design
As you can see folowing some online examples i manage to curve the picture but its curved on both ends instead of just on the bottom.
This is my style code:
const mainStyle = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
backgroundColor: "#d3c586",
alignItems: "center",
justifyContent: "space-between",
},
cardContainer: {
flex: 1,
alignSelf: "center",
backgroundColor: "#d3c586",
alignItems: "center",
justifyContent: "space-between",
overflow: "hidden",
},
cardImageContainer: {
flex: 0.6,
borderRadius: width,
width: width,
height: width,
bottom: 0,
overflow: 'hidden',
},
cardImage: {
height: height / 2,
width: width,
bottom: 0,
marginLeft: 0,
}};
This is a list of items that can be swiped and i render it from this function:
renderItem ({item, index}) {
return (
<View style={mainStyle.cardContainer}>
<View style={mainStyle.cardImageContainer}>
<TouchableOpacity onPress={(event) => this.handleDoubleTap(item)} onLongPress={(event) => this.handlePictureShare(item)}>
<LoadImage style={mainStyle.cardImage} source={{uri: item.url}} thumbnailSource={{uri: item.url}}/>
</TouchableOpacity>
</View>
<View style={mainStyle.cardTextContainer}>
<Text numberOfLines={25} style={{fontSize: 19}}>{item.fact}</Text>
</View>
</View>
)
}
I do not have a lot of experience with CSS since most of my work is on the backend.
Check these links BorderBottomLeftRadius BorderBottomRightRadius
This way you can only give radius bottom of your image.
You can try like this:
import React, { Component } from 'react';
import { View } from 'react-native';
export default class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
<View style={{width: 100, height: 100, backgroundColor: 'steelblue', borderBottomColor: 'black', borderBottomEndRadius: 10, borderBottomStartRadius: 10 }} />
</View>
);
}
}
I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.
Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.
I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.
Here is the source code I am using which produces the result where the image is too big for the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image going off the side of the screen
And here is the Source Code I am using where the image disappears off the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
height: undefined,
width: undefined,
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image disappeared entirely
After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:
width: null,
resizeMode: 'contain',
height: 220
The Stack Overflow question this solution was taken from
As I want to overlap this icon with two other Views, as shown in the image. this code is working on IOS platform but not on android. please suggest if there is any solution for Android.
var tabs = ['Activity', 'Files', 'People'];
this.state = {
tabs
};
return (
<Container style={{backgroundColor: '#F5F5F5'}}>
<View style={styles.topStrip}>
{
this.state.tabs.map((tab, index) => (
<View key={index} >
<TouchableOpacity>
<Text style={styles.streamName}>{tab}</Text>
</TouchableOpacity>
</View>
))
}
<View style={{position: 'absolute', backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', zIndex: 5, elevation: 24, marginTop: 15, marginLeft: 300}}>
<EIcon size={40} color='#2196f3' name={'circle-with-plus'} />
</View>
</View>
<View style={{zIndex: -1}}></View>
</Container>
);
}
}
const styles = StyleSheet.create({
topStrip: {
alignItems: 'center',
},
streamName: {
marginTop: 7,
marginBottom: 6,
flexDirection: 'row',
alignSelf: 'center'
}
}
});
<View
style={{
paddingLeft: ITEM_HEIGHT * 3,
flex: 1,
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: -1
}}
>
<Image
style={styles.centerCircle}
resizeMode="contain"
source={Images.ballSmall}
/>
</View>
In android, to use zIndex you need css with position-properties with top,left,right,bottom css
Tested On: Zenfone 3, Android 7, React Native 0.55.4
This issue is not caused by zIndex (although it does cause problem on Android).
Your icon is put inside the upper container view. React Native on Android does not support overflow: visible. That's why you see your icon being clipped outside the container.
You may put the icon on the "page" component level to solve this issue.
You may also refer to https://stackoverflow.com/a/50991892/6025730.
how to bring the progress bar to the center of the screen like we do in android center in parent in relative layout and how to remove the warning message.How to change the visibility(invisible or gone or visible) in progressbar.
MyScreen
var ProgressBar = require('ProgressBarAndroid');
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
<Text style={{
backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center',
color: 'white', marginBottom: 30
}}>LOGIN</Text>
<ProgressBar style={{justifyContent:'center',alignItems:'center',styleAttr:'LargeInverse', color:'white'}} />
<View style={{ justifyContent: 'center' }}>
<TextInput
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Username' placeholderTextColor='white'
autoFocus={true}
returnKeyType='next'
keyboardType='email-address'
onChangeText={(valUsername) => _values.username = valUsername}
/>
<TextInput
secureTextEntry={true}
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Password' placeholderTextColor='white'
onChangeText={(valPassword) => _values.password = valPassword}
/>
</View>
<Button onPress={() => { _handlePress() } } label='Login' />
<View>
<Text style={{ color: 'white', justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
Forgot Password
</Text>
<Text style={{ color: 'white', marginTop: 10, justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
SignUp
</Text>
</View>
</View>
As noted by #ravi-teja, use absolute positioning. Also, your warning arises because styleAttr is not a style attribute (the name is misleading) but a prop. You can also show and hide it programmatically using a boolean (myCondition) (that you can maybe store in your state). You should do something like this:
var ProgressBar = require('ProgressBarAndroid');
// ...
render(){
const {width, heigth} = Dimensions.get('window'); // The dimensions may change due to the device being rotated, so you need to get them in each render.
return (
//...
{this.state.myCondition && <ProgressBar styleAttr={'LargeInverse'} style={{position: 'absolute', left: width/2, height: height/2, justifyContent:'center',alignItems:'center', color:'white'}} />}
//...
}
In addition to that and as others said, you should give a try to ActivityIndicator, since it works for both iOS and Android.