is it possible to obtain below view in react native either using canvas or View?
I'm quite sure it's achievable if you use
Grey layer - White background with grey foreground, with borderBottomLeftRadius
White Layer - borderBottomLeftRadius BorderTopRightRadius
another layer with borderTopRightRadius
Example for grey layer
<View style={{ backgroundColor: '#FFF', height: 20 }}>
<View style={{ backgroundColor: "grey", borderBottomLeftRadius: '20%'}}>
content
</View>
</View>
You just have to play around with the background colors, borderColor and borderradius etc. Though it may not look exactly the same as what you want. and may appear different on different devices
Related
I have the following image in my React Native app
I want to have this image inside a parent element with no space above or below it, and I want the image to not overshoot the left or right sides of the screen
When I have the code like this
<View style={{
marginTop: 100,
borderWidth: 2,
borderColor: 'red'
}}>
<Image
style={{
width: '100%'
}}
source={require('#images/swoosh-02.png')}
/>
</View>
I get this, because default for resizeMode is cover
When I change it to this (adding resizeMode='contain')
<View style={{
marginTop: 100,
borderWidth: 2,
borderColor: 'red'
}}>
<Image
style={{
width: '100%'
}}
resizeMode='contain'
source={require('#images/swoosh-02.png')}
/>
</View>
the image gets successfully contained horizontally, but the height of the parent element remains the same as it was when resizeMode was cover.
How can I get it so that the parent element shrinks vertically to contain only the image and not have that extra top/bottom padding?
De diference between contain and cover is :
resizeMode='contain' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
resizeMode='cover' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Maybe you should try to apply height in your View.
Read this article, should help you.
I have code that looks like this:
<View style={styles.logoContainer}>
<View style={styles.logoTextContainer}>
<Text style={styles.logoText}>{siteName}</Text>
</View>
<View style={styles.logoImageContainer}>
<Image source={logo} style={styles.logo} resizeMode="contain" />
</View>
</View>
With the relevant styles looking like this:
logoContainer: {
flex: 4,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'space-evenly',
// borderWidth: 1,
// borderColor: 'blue',
},
logoImageContainer: {
flex: 3,
justifyContent: 'center',
// borderWidth: 1,
// borderColor: 'red',
},
logo: {
width: 250,
height: 250,
},
The issue is that the (square) image does not scale to fit inside the container (the commented out borders are so that I can make sure the containers are where I think they are, and the right size - they are).
I have seen various questions about this - some concern remote images, not the case here. Other suggestions:
Set resizeMode as a prop to the Image element.
Set resizeMode as a style.
Do either of the above with the width as 'undefined' in the style.
Do either of the above with the width as 'auto' in the style.
None have made any difference, the only thing that works is setting width and height specifically, as seen in the code above. This looks ok on the more recent (read: larger) iPhone sims, but causes the image to overlap with other stuff on the iPhone 5 sim.
To check if the resizeMode prop is having any effect, I set it to 'center' (with no width or height styles). This was a bit more promising, as the image is now only slightly wider than the screen. However, it is still much taller than the view, which contradicts the docs on resizeMode: center:
center: Center the image in the view along both dimensions. If the
image is larger than the view, scale it down uniformly so that it is
contained in the view.
Trying to add width=auto/undefined to resizeMode="center", causes the image not to display at all.
The logoImageContainer is a defined size (defined through flexbox), and I just want the image scaled and centred to fit in it.
I wanted to know is it possible to achieve this kind of shape and also gradient but I want to achieve gradient over the status bar. So pretty much the same like in the attachment.
For linear gradient I know how to do it, I've used https://docs.expo.io/versions/latest/sdk/linear-gradient/
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}>
<Text>
Custom shape
</Text>
</LinearGradient>
</View>
This is the result I want to achieve. https://dribbble.com/shots/5484044-Profile/attachments/1186437
You can make a custom component and manipulate the view to achieve a certain shape. Basic shapes are described here: https://codedaily.io/tutorials/22/The-Shapes-of-React-Native , but you will surely have to experiment more yourself to achieve your effect.
I am developing an App with react native and I have graphical problem. I need to have a dynamic yellow bar(which is in a view) for my text as below:
So, it means that if I have a longer text, the bar should be longer and if the text is shorter, the bar also should be shorter and fit for it. By now I use the static method. I give 90 as the width to the bar which is not good. Here is the code:
<View style={[styles.rowSep, {width:90}]}/>
<Text style={[commonStyle.normalItem , {marginBottom:10}]}>
{I18n.t("Il_Museum_Modena")}
</Text>
Here is the style:
rowSep: {
height: 7,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#FABB00',
marginBottom:12,
},
Can you help me to have dynamic yellow bar based on the length of the text. Thanks in advance.
You can wrap Text with View and set view StyleSheet to get effect what you want.
Example:
<View style={styles.textwrapper}>
<Text>Just test</Text>
</View>
Style:
textwrapper: {
borderBottomWidth: 5px,
borderBottomColor: #234532,
borderStyle: 'solid'
}
I haven't test this code, but I hope this give you some hints.
How react native Text and Image responsive?
I only know the Flexbox can make layout responsive but seems can not apply in text and image.
e.g.Make my text and image smaller in iphone 4s, bigger in iphone 6
Thanks.
You can use Flexbox in order to make your application responsive.
For example, say you wanted to display a line of text and an image on the same line:
class ResponsiveExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Example of centered text
</Text>
<Image
resizeMode={"contain"}
style={styles.image}
source={{uri: "your image"}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
text: {
marginLeft: 20,
flex: 1
},
image: {
marginRight: 20,
height: 400,
flex: 3,
}
});
Now the text and image will be displayed relative to the screen size. The usual hangup here is that flexDirection defaults to column, which will make things line up vertically. You can see what happens when we flip from portrait to landscape orientation:
As you can see, the text and image respond to the change in orientation.
For a better overview of Flexbox, I like to refer to the following guide:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Just keep in mind that React Native defaults to a flex-direction of column, so if you want things laid out horizontally, you'll have to explicitly set it to row.
I think react-native-fit-image is useful for you.
React Native Fit Image enables you to draw responsive image component.
You can use this component as below.
<FitImage
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
style={styles.fitImage}
/>
You are right to think about Flexbox, simply wrap your Text and Image inside View and make those View flexbox responsive.