I got a simple view that contains text:
<View style = {styles.container}>
<Text style = {styles.bla}>{blablabla}</Text>
</View>
container:{
marginTop: 15,
marginRight: 15,
marginLeft: 15,
flexDirection:"row",
flex:1,
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
elevation: 2,
},
The text rows will vary, so that's why I want my view to change its height depending on the text inside it.
I already tried aspectRatio, it doesn't work
I finally figured it out by wrapping my view in another view.
Related
I have a simple <Text> element in my react-native application and I can't figure out what's going on with this behavior.
When I provide a longer string and the <Text> element wraps the text, it seems to be adding a bunch of padding to the right side of the view.
Note: I've made the <Text> element have a red background just so it's easier to see what's going on in this image.
The left button has the wrapped text, the right button does not. Only when the text wraps do I see the strange padding.
Note that I'm using flexShrink: 1 so that my icon doesn't get stomped out by the text element.
<View style={styles.buttonContainer}>
<View style={styles.buttonContent}>
<Grid fill={'#fff'} style={[styles.buttonIcon, {marginRight: 6}]} />
<Text style={styles.buttonText}>
Something Longer Here
</Text>
</View>
</View>
const styles = StyleSheet.create({
buttonContainer: {
justifyContent: 'center',
paddingVertical: 14,
paddingHorizontal: 12,
borderRadius: 16,
backgroundColor: '#27292d',
opacity: 0.90,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1},
shadowOpacity: 0.8,
shadowRadius: 1,
elevation: 5
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
buttonIcon: {
width: 16,
height: 16,
flexShrink: 1
},
buttonText: {
color: 'white',
fontSize: 14,
lineHeight: 16,
backgroundColor: '#ff0000',
fontFamily: 'GeezaPro',
flexShrink: 1
}
});
Update
I've put together this small example to demonstrate the problem.
https://snack.expo.dev/72_24tf4O
When run on the web it looks like this:
But when run on android, it looks like this:
I am trying to apply a border for a view on top and bottom only with a "dashed" style. But the borderStyle not working with borderTopWidth and borderBottomWidth.
This is working,
<View
style={{
backgroundColor: 'white',
borderRadius: 10,
marginHorizontal: 20,
padding: 16,
borderStyle: 'dashed',
borderColor: 'red',
borderWidth: 1
}}>{...content...}</View>
This is not working,
<View
style={{
backgroundColor: 'white',
borderRadius: 10,
marginHorizontal: 20,
padding: 16,
borderStyle: 'dashed',
borderBottomColor: 'red',
borderBottomWidth: 1,
borderTopColor: 'red',
borderTopWidth: 1,
}}>{...content...}</View>
Is there any different way to achieve this style?
Not an exact solution, but this hack works (example - for adding bottom border)
<View style={{ overflow: 'hidden' }}>
<View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: '#000', margin: -2, marginBottom: 0 }}>
<Text>Some Data to be underlined</Text>
</View>
</View>
Basically what we are doing is:
defining an outer container which hides the overflowing parts (data, items etc).
for inner container, we set it's margins so as to go beyond outer container dimensions
Try this
import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
function Index(props) {
return <View style={styles.container}></View>;
}
const styles = StyleSheet.create({
container: {
width: 126,
height: 46,
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(255,0,0,1)",
borderWidth: 0,
borderTopWidth: 2,
borderBottomWidth: 2,
borderStyle: "dashed"
}
});
export default Index;
Note: I have design it by BuilderX
I would like to know how to apply shadow only to the main outer view. Here on applying shadow, it's getting applied to all the inner elements
The trick to make the shadow props of parent don't inherit to children element, is to set a background color to the component on which you set the shadow. For example that would be:
<View
style={{ backgroundColor: '#fff' }}
shadowOffset={{height: 10}}
shadowColor='black'
shadowOpacity={0.5}
>
<Text>{title}</Text>
</View>
Unfortunately this only works with colored backgrounds – when setting a transparent background with RGBA or 'transparent' is doesn't help.
I cannot really answer based on a simple image, but from my previous experience, setting shadow offset to the required height and width should do the trick for the iOS.
Read more about it here: Shadow Offset
Here's a picture of what my card looks like with the following style used:
marginLeft: 10,
backgroundColor: 'white',
shadowColor: 'blue',
alignItems: 'center',
shadowOffset: {width: 3, height: 3 },
shadowOpacity: 1.0,
borderRadius: 10,
My card View
Hope it works out well for you.
Display custom shadow color >= 28 or >= P for above Sdk level 28
Code
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View
style={{
shadowColor: 'purple',
height: 150,
width: '90%',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
//android specific
elevation: 10,
//ios specific
shadowOffset: { width: 1, height: 1 },
shadowRadius: 3,
shadowOpacity: 0.5,
}}>
<Text style={{ color: 'rgba(128,0,128,0.5)' }}>
Welcome to React Native
</Text>
</View>
</View>
In android we can adjust shadow by elevation property
In iOS we can adjust shadow by shadowOffset, shadowRadius,shadowOpacity property
Output android
Output iOS
Available library for further usage
react-native-shadow-2
react-native-drop-shadow
Create a Shadow.js
export const Shadow = (elevation) => { // Receive elevation as a prop
return {
elevation,
shadowColor: 'black',
shadowOffset: { width: 0, height: 0.5 * elevation },
shadowOpacity: 0.3,
shadowRadius: 0.8 * elevation,
};
};
import Shadow.js to the page where you want to apply
import Shadow from './Shadow' //path to Shadow.js
<View style={{Shadow(5)}}> // pass elevation as a prop to Shadow.js
</View>
if you want to use in styles
import Shadow from './Shadow' //path to Shadow.js
<View style={styles.shadow}>
</View>
const styles = StyleSheet.create({
shadow:{
...Shadow(5) //use spread operator
}
});
I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.
I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks
As you guys can see the text is cut at the end, how can I change that small white box size or make my text show 'Enter a postcode, street or ...' since, if, the text was smaller it would cut it and put the three dots.
TouchablePlatform is a component used to join both TouchableOpacity and TouchableComponent.
<View style={styles.subContainer1}>
<TouchablePlatform onPress={this._onBackIconPress}>
<Image
source={icon}
style={isListing ? styles.imageIconBack : styles.image}
/>
</TouchablePlatform>
<TextInput
ref={textInput => (this.textInput = textInput)}
placeholderTextColor={'#9CAFB3'}
underlineColorAndroid={'#FFFFFF00'}
placeholder={'Enter a postcode, street or area…'}
style={styles.textInput}
onFocus={this._onTextInputFocus}
value={this.state.text}
/>
</View>
These are the styles being used
const styles = StyleSheet.create({
...
subContainer1: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
marginLeft: 15,
marginTop: 10,
height: 40,
borderRadius: 5,
elevation: 4,
shadowOpacity: 0.4,
shadowRadius: 4,
shadowColor: '#073741',
shadowOffset: { height: 2, width: 0 },
},
image: {
resizeMode: 'contain',
height: 25,
width: 25,
marginLeft: 15,
},
imageIconBack: {
resizeMode: 'contain',
height: 18,
width: 18,
marginLeft: 22,
},
...
textInput: {
width: '65%',
fontSize: 14,
marginLeft: 15,
fontFamily: 'azo-sans-light',
color: '#043742',
},
});
How can I change the size of the white area? To make sure the text isn't cut, or, at least, make it cut the text, and show three dots (...) on the trimmed area.
The starting point of the TextInput is controlled by the textInput.marginLeft style, and the end point is set by textInput.width, which is set to 65% of the parent container. You can tweak these values to resize the input box.
The React Native TextInput does not support automatic ellipsization of overflowing placeholder text. If you want to do this, you could hack it by absolutely positioning a Text element on top of it with the following properties, and hiding it when the text input is focused.
<Text numberOfLines={1} ellipsizeMode="tail" pointerEvents="none" />