I am working on a react native project. I want to provide shadow to view. But it was spreading away like this.
But what I want is:
I got the answer that I need to add background color here: https://taketo.site/solved
And that actually solves my problem but only when I add background color from the stylesheet. But my problem is that I want to get the background color from props as everytime the view is rendered, it won't have the same bg color, it would be different. But when I try to provide bg color from props, it again gives shadow like in the first image. Here's my code:
component file:
import React from 'react';
import { View } from 'react-native';
import { styles } from './styles';
class ShadowCard extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View
style={[
styles.card,
{
width: this.props.width,
height: this.props.height,
backgroundColor: this.props.backgroundColor,
},
]}>
{this.props.children}
</View>
);
}
}
export default ShadowCard;
stylesheet file:
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
card: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 10,
borderRadius: 12,
margin: 12,
},
});
So what should I do so that I can take the bg color from props and the shadow shows up like in second image?
You can probably do something like this ->
Wrap your current cart View in another View with overflow hidden to prevent the shadow to show up above the box and then add some padding bottom to show the shadow underneath the box for android, and for ios, keep the shadowOffset as it currently is
<View style={{ overflow: 'hidden', paddingBottom: 60 }}>
<View
style={{
width: this.props.width,
height: this.props.height,
backgroundColor: this.props.backgroundColor,
shadowOffset: { width: 2, height: 6 },
shadowRadius: 6,
shadowOpacity: 0.2,
elevation: 15,
}}>
{this.props.children}
</View>
</View>
Related
I have a 3 titles on Text's components and a divider below each one as View's components. They have the following styles.
title: {
...PosText,
color: Palette.TEXT_ON_LIGHT,
paddingBottom: 9,
},
divider: {
height: 0.5,
backgroundColor: Palette.BACKGROUND_DIVIDERS,
marginBottom: 1,
},
I should see the title and a line divider beneath them but the first divider gets lost.
You can create a quick SeparatingLine component and set the borderWidth as you wish (add margins as needed).
I am using something like this in my project:
export default class SeparatingLine extends Component {
render() {
return (
<View style={styles.separatingLine} />
)
}
}
const styles = StyleSheet.create({
separatingLine: {
borderWidth: 0.5,
borderColor: 'grey',
},
});
Hello i was following along a tutorial and it was going fine, until the tutor used react-native-paper ProgressBar in his project, I wrote exactly same but it was not visible, I found the documentation and plugged it, still not visible.
What am i Doing wrong?
import {View, StyleSheet, Text} from 'react-native' ;
import { ProgressBar, Colors } from 'react-native-paper';
import CountDown from '../comps/CountDown.js' ;
const Timer = ({task}) => {
return (
<View style={styles.container}>
<CountDown />
<Text style={styles.text}> Focusing On:</Text>
<Text style={[styles.text, styles.textBold]}> {task} </Text>
<ProgressBar progress={0.4} color='#5E84E2' style={styles.progress}/>
</View>
) ;
}
const styles = StyleSheet.create({
container : {
flex: 1,
width: 100,
alignItems: 'center' ,
justifyContent: 'center',
paddingTop: 40,
},
text: {
// flex: 0.5,
color: 'white'
},
textBold: {
fontWeight: 'bold' ,
// borderColor: 'white',
// borderWidth: 1,
// borderStyle: 'solid' ,
},
progress: {
height: 10,
// borderColor: 'white',
// borderWidth: 1,
// borderStyle: 'solid' ,
}
}) ;
export default Timer ;
Also, If i were to Give border to the progressBar, it appears but keep on increasing in width even when width is more than the viewport width. I dont know what is happening
The problem here is when you use alignItems the children components need to have a fixed width, your progress bar doesnet have a fixed width.
You will have to provide a with in the styles.
progress: {
height: 10,
width:50
}
Based on documentation default value for width is
auto (default value) React Native calculates the width/height for the
element based on its content, whether that is other children, text, or
an image.
Better have a value for width which will solve your issue.
A responsive solution
Currently ProgressBar doesn't support the flex styling system.
If someone is also looking to make the width equal to 100% if it's parrent component, there is a good recommended solution provided here.
Just set the width to undefined:
progress: {
height: 10,
width:undefined
}
e.g.
<View style={{ flex: 2, other flex styles }}>
<ProgressBar progress={0.5} color="white" style={{ height: 5, width: undefined }} />
</View>
I have this code and it works fine to shows the overlay the requested page for 5sec and Hide to shows the requested page's contents, But when the Loader indicator disappeared its (red) background still there, how to hide the background too?
It has two part firsts one for creating Loading Indicator to be hidden after 5 sec.
Working example on Expo.io:
Live Demo -
This is requested page's code: (Please, notice has to be called from /screens)
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Loader from './screens/Loader';
export default function App() {
return (
<View style={styles.container}>
<Loader /> //<--- I put the Loader here
<Text style={styles.paragraph}>
This is the requested page should be be covered by indicator background (Red color) <br/ >
The Loader disappear after 5 sec.<br />
But, its background still there!!
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
And the Loader.js code is :
import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
class Loader extends Component {
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 5000)
componentDidMount = () => this.closeActivityIndicator()
render() {
const animating = this.state.animating
return (
<View style = {styles.container}>
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>
</View>
)
}
}
export default Loader
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 0,
position: 'absolute',
height: "100%",
width: "100%",
backgroundColor: 'red',
opacity: 0.7
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
The problem is you are always rendering the Loader and its always visible, so the easiest way to handle this would be to return null and hide the loader when its not necessary like below.
render() {
const animating = this.state.animating;
if(!this.state.animating)
return null;
return (
<View style = {styles.container}>
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>
</View>
)
}
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
App:
.....import Box from './src/box';
......
<View style={{height: 100,flexDirection:'row',flex:1}}>
<Box someText={'sushi'}
//, background source={require('./assets/sushi.png')}
//,TouchableHighlight onPress={this.message_function}
/>
</View>
box:
import { StyleSheet, Dimensions, Text,View ,Image} from "react-native";
import React from 'react' ;
export default class Box extends React.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.paragraph}> {this.props.someText}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
flex: 1,
height: 100,
//backgroundColor: '#ccc',
margin: 8,
},
paragraph: {
//margin: 24,
fontSize: 15,
textAlignVertical:10,
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'bottom',
//top:0, left: 0, right: 0,
color: '#000',
width: '100%',
height: '70%',
backgroundColor: 'rgba(255,255,255,0.8)'
}
});
You can wrap an <Image> or Icon component within your box <View>
So it will end up something like this:
<View style={styles.box}>
<Image source={require('your-image-path')} />
</View>
Image component docs: https://facebook.github.io/react-native/docs/image.html
There are several libs to handle Icon component:
React Native Elements: https://react-native-training.github.io/react-native-elements/docs/icon.html
import { Icon } from 'react-native-elements'
<Icon name='rowing' />
React Native Vector Icons: https://github.com/oblador/react-native-vector-icons
import Icon from 'react-native-vector-icons/MaterialIcons';
<Icon name="user" />
React Native Icons: https://github.com/corymsmith/react-native-icons
import Icon from 'react-native-icons';
<Icon
name='ion|beer'
size={40}
color='#887700'
/>
Hope it helps
I am currently developing an application, and I am having trouble figuring out how to get the button to change color after being pressed using TouchableHighlight. Not to be confused with the underlayColor prop which I know exists as part of TouchableHighlight which only changes the color for when the button is pressed and then returns to its regular color.
This is what I have so far (Some of the code has been omitted for simplicity):
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
} from 'react-native';
class MeetingScreen extends Component {
constructor(props){
super(props);
this.state = {
buttonColor: '#7395AE',
}
this.onButtonPress=this.onButtonPress.bind(this);
}
onButtonPress(){
this.setState({ buttonColor: 'red' });
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.talk}
color={this.state.buttonColor}
onPress={() => this.state.buttonColor}
selected={this.onButtonPress}
>
<View>
<Text style={styles.welcome} >
Talk
</Text>
</View>
</TouchableHighlight>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#7395AE',
},
welcome: {
fontSize: 30,
textAlign: 'center',
margin: 10,
color: '#ffffff',
},
talk:{
height: 200,
width: 200,
borderWidth: 5,
backgroundColor: '#7395AE',
borderRadius: 100,
borderColor: '#557A95',
justifyContent:'center',
alignItems:'center',
borderRadius: 100
},
});
export default connect(mapStoreToProps, mapDispatchToProps)(MeetingScreen);
I have looked at other answers on StackOverflow and have attempted a good portion of them but I couldn't find anything that fit specifically to my issue. I have also looked at the React Native documentation and wasn't able to find anything helpful. The code as it is right now just displays the button and when pressed it goes black but then goes back to it's original color after being pressed. What I am looking for is for the button to turn red and stay red after being pressed. Any help would be greatly appreciated. Thank you so much for any help in advance!
<TouchableHighlight
style={[styles.talk, { backgroundColor: this.state.buttonColor}]} //Or if don't want "backgroundColor:" and just need change the text color use => "color:""
onPress={() => this.state.buttonColor}
selected={this.onButtonPress}/>