I am trying to generate a box shadow equivalent for React Native.
Here is my code:
<View style={{
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 1,
shadowRadius: 5,
elevation: 5,
}}
>
<View styleName={"card promocard cardsize"} style={{
marginBottom: this.state.promoBottom, marginRight: this.state.promoRight,
}}>
<View styleName="promo-name" style={{ backgroundColor: this.rand }}>
<View styleName="promo-name-child">
<Image style={{ borderRadius: 50, resizeMode: "contain", backgroundColor: "#FFF" }} styleName="promocard-logo-img" source={{ url: this.props.promo.merchant.logo }} />
<Text style={{ color: "#fff" }} styleName="promo-name-text">{this.props.promo.merchant.name}</Text>
</View>
</View>
<View styleName="promo-inner-card">
<Image styleName="promo-main-img" source={{ url: this.props.promo.photo }} />
<View>
<View styleName="promo-title">
<Text styleName="promo-title-text">{this.props.promo.title}</Text>
</View>
<View styleName="promo-desc">
<Text styleName="promo-desc-text">{this.props.promo.text}</Text>
</View>
</View>
</View>
</View>
</View>
Rather than generate styles correctly around the rectangle (which is 330 by 175), it seems to apply the shadow to every element INSIDE the box.
I want something that looks like this:
https://ethercreative.github.io/react-native-shadow-generator/
I have been tearing my hair out, because every example I am seeing looks similar to the code I've got in my top level view, and yet I am getting shadows on all the text, and the images inside my view.
This was solved by adding a background color.
backgroundColor: "#FFF"
Related
I have two-component image and view I am trying to fit both to screen but its getting overflow and I don't want to implement scrollView.
The problem is Google sign in button is getting out of screen
Here's my approach
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
style={{ backgroundColor: 'white' }}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={this.state.keyboardOpened}
>
<View style={{ backgroundColor: "white",flex:1}}>
<Image
style={{ width: "100%",height:200, backgroundColor: "white" }}
source={require('./assets/login.gif')}
resizeMode={"contain"}
/>
</View>
<View>
{this.renderLoginDetails()}
</View>
</KeyboardAwareScrollView>
Here's its result
Find the height of your device screen.
import { Dimensions } from 'react-native';
const windowHeight = Dimensions.get('window').height;
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
style={{ backgroundColor: 'white' }}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={this.state.keyboardOpened}
>
<View style={{ backgroundColor: "white",flex:1, height: windowHeight*0.04}}>
<Image
style={{ width: "100%",height:200, backgroundColor: "white" }}
source={require('./assets/login.gif')}
resizeMode={"contain"}/>
</View>
<View style={{height: windowHeight*0.06}}>
{this.renderLoginDetails()}
</View>
</KeyboardAwareScrollView>
React Native learner here.
I am trying to show the suggestions as below:
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
}}
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<View>
<Text style={styles.itemText}>{item.title}</Text>
<Button
title={'Click'}
style={{
backgroundColor: 'green',
right: 0,
paddingRight: 0,
marginRight: 0,
}}></Button>
</View>
</TouchableOpacity>
...
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 2,
alignItems: 'flex-start',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
Output looks like below:
I want my suggestion's Text in the left side, while Click button always at the right side fixed with fixed length.
Text and Button region shouldn't overlap each other.
Any help or guidance about how to do it. Highly appreciated !!
P.S.: With style={{flexDirection: 'row'}} in <View> my Buttons in Suggestion box get pushed to right side and not visible as below:
I expect something like this:
You have to use flexDirection:'row' for inner View which contain the Text and the Button
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}}
onPress={() => {}}>
<Text style={{ maxWidth: '90%' }}>
{item.title}
</Text>
<View>
<Text style={{ backgroundColor: 'blue', alignItems: 'center' }}>
Click
</Text>
</View>
</TouchableOpacity>
Don't forget to look at : https://www.npmjs.com/package/react-native-read-more-text
this will help you get through it.
I have a screen where my data is displayed. I want to display in the form of table (The data at the bottom of screen)as shown below in screenshot.
Edited: top part code:
It's inside the movies as well
<View>
<Text key={item.symbol}>{item.symbol}<Text>
<Text key={item.open}>{item.open}<Text>
<Text key={item.close}>{item.close}<Text>
</View>
Right now my screen looks like:
I want to create an interface like below:
The data next to the close, high etc is some json data that I fetched from api.
My Code as of now :
let movie = (
<View style={styles.bottomdata}>
<Text style={styles.text} key={item.name}>
{item.name}
</Text>
<Text style={styles.text} key={item.open}>
OPEN {item.open}
</Text>
<Text style={styles.text} key={item.close}>
CLOSE{item.close}
</Text>
<Text style={styles.text} key={item.volumes}>
VOLUME{item.volumes}
</Text>
<Text style={styles.text} key={item.low}>
LOW {item.low}
</Text>
<Text style={styles.text} key={item.high}>
HIGH{item.high}
</Text>
</View>
)
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<View>{movie}</View>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
text: {
color: "black",
backgroundColor: "white",
},
bottomdata:
{
marginTop:400,
backgroundColor:"black",
}
});
The movie is the data displayed on the screen. How do I design it like that? And, at the top it is just the symbol name (same as at the bottom) and close and high values. How can I design my screen like that? I am able to fetch the data but not sure how to design it like that.
You will have to use layout the contents using a views and test which would create something like a table. The below code shows how to position items in a row.
JSX
<View style={{ flex: 1 }}>
<View
style={{
flexDirection: 'row',
backgroundColor: 'black',
alignItems: 'center',
}}>
<Text style={{ flex: 0.5, color: 'white' }}>{item.symbol}</Text>
<Text style={{ flex: 0.5, color: 'white' }} key={item.open}>{item.open}</Text>
<Text
style={{
flex: 0.5,
color: 'white',
backgroundColor: 'red',
marginVertical: 5,
paddingHorizontal: 10,
borderRadius: 10,
}}
key={item.close}>
{item.close}
</Text>
</View>
<View style={styles.bottomdata}>
<Text style={[styles.text, { alignSelf: 'center' }]} key={item.name}>
{item.name}
</Text>
<View style={styles.row}>
<View style={styles.rowItem}>
<Text style={styles.text}>OPEN</Text>
<Text style={styles.text}>{item.open} </Text>
</View>
<View style={styles.rowItem}>
<Text style={styles.text}>CLOSE</Text>
<Text style={styles.text}>{item.close}</Text>
</View>
</View>
<View style={styles.row}>
<View style={styles.rowItem}>
<Text style={styles.text}>LOW</Text>
<Text style={styles.text}>{item.low} </Text>
</View>
<View style={styles.rowItem}>
<Text style={styles.text}>HIGH</Text>
<Text style={styles.text}>{item.high}</Text>
</View>
</View>
<View style={styles.rowItem}>
<Text style={styles.text}>VOLUME</Text>
<Text style={styles.text}>{item.volumes}</Text>
</View>
</View>
</View>
Styles
const styles = StyleSheet.create({
text: {
color: 'white',
},
bottomdata: {
marginTop: 'auto',
backgroundColor: 'black',
},
row: {
flexDirection: 'row',
width: '100%',
},
rowItem: {
width: '50%',
justifyContent: 'space-between',
flexDirection: 'row',
paddingHorizontal: 5,
},
});
You just need to make divs with some alignments and all and just get those data in the relavant field
I need to align the text at center of the profile pic in the same line. But it move below the profile pic.
How can I achieve this?
<TouchableOpacity >
<View style={{flexDirection:'row',marginLeft: "8%", marginBottom:"5%",marginRight:"15%",}}>
<FastImage source={user.profilePicture} style={{width: 45, height: 45, borderRadius: 22.5}}/>
<Text style = {{fontFamily: 'Heebo-Light', fontSize:12, marginLeft:"1.5%",textAlign:'center' }}> { user.firstName } </Text>
</View>
</TouchableOpacity>
I would propose to wrap your text in another View with justifyContent: 'center' and the same height as your userIcon. Additionally, I changed the textAlign to 'left'
Complete Code:
<TouchableOpacity >
<View style={{flexDirection:'row',marginLeft: "8%", marginBottom:"5%",marginRight:"15%",}}>
<Image source={{ uri: 'https://ra.ac.ae/wp-content/uploads/2017/02/user-icon-placeholder.png' }} style={{width: 45, height: 45, borderRadius: 22.5}}/>
// Adding this View
<View style={{justifyContent: 'center', height: 45}}>
// changed textAlign to left
<Text style = {{fontFamily: 'Heebo-Light', fontSize:12, marginLeft:"1.5%",textAlign:'left' }}> Usernamed asdfklshfgkjdhgkjdfhgjk dfhljkghdfjkghfdjkgfhfjk ghsdflkaslödsfsdfdsgdkasälöjda skldjsa </Text>
</View>
</View>
</TouchableOpacity>
Output:
Working Demo:
https://snack.expo.io/#tim1717/vengeful-sandwich
Updated Version
We add another View around the Image component and we are removing the height limitation, so that all of our text is visible and the container increases depending on the text content.
Code:
<TouchableOpacity >
<View style={{flexDirection:'row',marginLeft: "8%", marginBottom:"5%",marginRight:"15%",}}>
<View style={{justifyContent: 'center'}}>
<Image source={{ uri: 'https://ra.ac.ae/wp-content/uploads/2017/02/user-icon-placeholder.png' }} style={{width: 45, height: 45, borderRadius: 22.5}}/>
</View>
<View style={{justifyContent: 'center'}}>
<Text style = {{fontFamily: 'Heebo-Light', fontSize:12, marginLeft:"1.5%",textAlign:'left' }}> Usernamed asdfklshfgkjdhgkjdfhgjk dfhljkghdfjkghfdjkgfhfjk ghsdflkaslödsfsdfdsgdkasälöjda skldjsa dasfsdkhf,jdshfkjdshfkjhdsjkfh TEST ETST fdsfgmd,gndfjghjdfkhg dfkghkjdfhgjkdf gkjdfhgjdf gkjdfhg fdg </Text>
</View>
</View>
</TouchableOpacity>
Output:
I am trying to acheive what the image below represents with Flexbox in React Native with Views, if you have a basic example of this that would be amazing:
Something like this:
<View style={{ flex: 1, flexDirection: 'column'}}>
<View style={{ height: 70, backgroundColor: 'blue' }}>
</View>
<View style={{ height: 70, backgroundColor: 'green' }}>
</View>
<View style={{ flex: 1, backgroundColor: 'yellow' }}>
</View>
</View>
Not sure if the blue lines are lines / padding / etc, but you should be able to add those into this shell.