Same issue for both line graph and contribution graph. The background is always black
contribution graph
Tried to set chartConfig, not working.
chartConfig={{
backgroundColor: "white",
backgroundGradientFrom: "white",
backgroundGradientTo: "white",
backgroundGradientFromOpacity: 0,
backgroundGradientToOpacity: 0,
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`
}}
Also tried to set style
style={{backgroundColor: "white",}}
Need some help here..
Related
I need to add a blur effect on a text.
If I were using React, I would use the filter css property.
But I can't find the equivalent syntax to use it in a React native stylesheet.
How do i need to write it ?
you can install react-native-blur / expo-blur
If it's not working for you, this is a workaround/hack that clones the look of blurry text. You can adjust the values to your liking.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
Package used: react-native-shadow
Problem: How to shape the shadow if the view is circular-shaped? I have used Avatar and want shadow behind it with the same shape.
Code Used:
<BoxShadow setting={{
width: 90,
height: 90,
color: "#000",
radius: 20,
opacity: 0.1,
x: 2,
y: 3,
style: { marginVertical: 7 }
}}>
<Avatar size={90} overlayContainerStyle={{ backgroundColor: '#bf1e2e' }} rounded title="GS" onPress={() => console.log("Works!")} activeOpacity={0.7} />
</BoxShadow>
Solution Tried: I tried making radius 44, 48 but gives error after 50 If someone can give a reason would be great.
Current Output:
Click Here: Shadow Shape is rectangular
Expected Output:
Click Here: Shadow Shape is circular and blurred
Please add and try this in your code:
<BoxShadow
setting={{
width: 90,
height: 90,
border: 10, //Add this
color: '#8d1622',
radius: 45, //Change here
opacity: 1, //Change here
x: 0, //Change here
y: 0, //Change here
style: { marginVertical: 7 },
}}>
<Avatar
size={90}
overlayContainerStyle={{ backgroundColor: '#bf1e2e' }}
rounded
title="GS"
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
</BoxShadow>
<BarChart
data={data}
width={Dimensions.get('window').width}
height={300}
chartConfig={{
backgroundColor: 'white',
backgroundGradientFrom: 'white',
backgroundGradientTo: 'white',
decimalPlaces: 0,
color: (opacity = 0) => `rgba(90, 90, 90, ${opacity})`,
style: {borderRadius: 0,},
propsForBackgroundLines:{stroke:"#ffffff"},
barRadius: 16,
fillShadowGradient: 'blue',
fillShadowGradientOpacity: '5'
}}
style={{
marginVertical: 8,
borderRadius: 16,
padding: 5
}}
verticalLabelRotation={45}
withHorizontalLabels={false}
/>
Hi all, the above is my code and how my graph looks like. I am currently using react-native-chart-kit. However, i am lost as to how to move the graph to my left, since i don't need the y axis labels. Any help would be grateful, thank you.
Application
You can add paddingRight: 0 inside the style props to remove the padding altogether. The code might look like
<BarChart
{...}
style={{
marginVertical: 8,
borderRadius: 16,
padding: 5,
paddingRight: 0
}}
/>
Adding paddingRight: 0 in style will solve this issue.
<LineChart
data={}
chartConfig={chartConfig}
bezier
withHorizontalLabels={false}
withDots={false}
withVerticalLabels={false}
withInnerLines={false}
style={{
paddingRight: 0,
}}
/>
The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.
The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".
How can we blur a Text component in React Native?
Info: I just want to make an app where the user does not see the answer directly (via blurring).
If you don't want to install react-native-blur / expo-blur or it's not working for you, this is a workaround/hack that mimics the look of blurred text in a View. The values can be adjusted as necessary.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
Install react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...
You can simply use css to do it, feel free you change the amount of opacity, offset, color, radius as your requirement
<Text
style={{
color: "#fff0",
textShadowColor: "rgba(255,255,255,0.8)",
textShadowOffset: {
width: 0,
height: 0,
},
textShadowRadius: 10,
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
}}
>
Blurred
</Text>
I'm trying to create a little floating "vote up/down" widget in the bottom of my app screen. I'm using React Native with Nativebase and Entypo Icons.
The problem is the icons just dont seem to be vertically aligned very well, at least not through the center as I'd expect/hope. See below:
(dotted lines added to show the issue, I'd expect those to align with their counterparts)
When hovering the icon itself in the element inspector it appears to be equally padded (or lack there of) on every side, so I'm not sure that it's a code issue:
Here is the code:
<View style={{flexDirection:'row', borderWidth: 0.5, borderColor: '#d8d8d8', borderRadius: 50, backgroundColor: 'rgba(255, 255, 255, .7)', shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 1.5, elevation: 3,alignItems:'center', marginBottom: 10, position: 'absolute', left: '50%', marginLeft: -87, width: 174, paddingLeft: 5, paddingRight: 5, bottom: 0,justifyContent:'space-between'}}>
<Icon name='triangle-down' onPress={ this.swipeLeft} active color="white" style={{fontSize: 60, marginTop:0, paddingTop:0, paddingBottom: 0, marginBottom: 0, alignSelf: 'center', height: 60,color: '#FF003C',backgroundColor:'transparent'}} />
<Icon name='cw' style={{fontSize: 26, lineHeight: 26, height: 26, borderRadius: 50, color: '#d8d8d8',backgroundColor:'transparent'}} />
<Icon name='triangle-up' onPress={ this.swipeRight} active color="white" style={{fontSize: 60, marginTop:0, paddingTop:0, paddingBottom: 0, marginBottom: 0, alignSelf: 'center',color: '#00C176', height: 60, backgroundColor:'transparent'}} />
</View>
(complete with way too many inline styles but this is pre-cleanup so try to bear with me)
Is there any way I can get the icons to align better? Also, is there any way to shrink the padded space around the icon (highlighted blue) without shrinking the actual icon?