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>
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)"
}}
/>
My goal is to render an image with a shadow, I usually generate my shadows using this website: https://ethercreative.github.io/react-native-shadow-generator/
I tried this and it works fine in iOS but I cannot see any shadow in android, this website automatically generates with the elevation property so I don't know what the issue is, here is my code:
Main js file
<View style={styles.coverImageContainer}>
<Image
source={{
uri: coverUrl,
}}
style={styles.coverImage}
/>
</View>
Styles
coverImageContainer: {
shadowColor: '#000',
backgroundColor: 'transparent',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.32,
shadowRadius: 5.46,
elevation: 9,
},
coverImage: {
height: 243,
width: 150,
marginTop: '5%',
alignSelf: 'center',
resizeMode: 'cover',
borderRadius: 4,
},
Any help would be appreciated,
Thanks
I'm using native-base's Content to scroll and i want a fixed button on bottom when scrolling. How can i show the shadow of fixed button over scroll view Items like this.
But what i achieve is this
My Code
<Container>
<Content>
...
</Content>
<View style={styles.footer}>
<Button style={styles.footerBtn}>
<Text>{strings('consultant_profile.book_an_appointment')}</Text>
</Button>
</View>
</Container>
//Css
footer: {
padding: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
},
It is hard to implement such gradient effect in react-native because of the limitation of it on shadow. For Android API 27 or below, you cannot even change the color of elevation in Android by using shadowColor.
For your situation, I would recommend you to use react-native-linear-gradient.
After installed the package simply place the below component at the top of your button, it might do the trick.
<LinearGradient colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']} {...otherGradientProps} />
Try to add to following style to the button styles:
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4
If it's not working then please share more of the your component code so it will be easier to try help you out.
You can animate items opacity to get something similar look.
Using react-navigations - createBottomTabNavigator, im trying to push the icons down a bit but its getting cut off and im not sure as to why.
Is there a way to fix this by any chance? or if you could direct me to some info about this.
The icon style is below:
<Icon
name="heart"
color={tintColor}
size={28}
style={{ marginTop: '20' }}
/>
And heres the tab bar options:
tabBarOptions: {
showLabel: false,
activeTintColor: '#e91e63',
indicatorStyle: {
height: 100
},
style: {
position: 'absolute',
backgroundColor: 'transparent',
height: 50,
width: DEVICE_WIDTH * 0.94,
borderTopColor: 'transparent',
borderBottomLeftRadius: 33,
borderBottomRightRadius: 33,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
bottom: 0,
margin: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0.3
},
shadowRadius: 5,
shadowOpacity: 0.1
},
tabStyle: {}
}
Many thanks in advance
Thanks for Samitha, had to set the icon height:
<Icon
name="heart"
color={tintColor}
size={28}
style={{ marginTop: 30 , height: 28 }}
/>
The bottom of the iPhone X is reserved for the home swipe bar
react-navigation like allot of other libraries implement the new SafeAreaView or add their own padding to the bottom of the iPhone X to stop you from putting content in that zone.
It's unlikely your buttons will work properly if placed that low so there's not much you can do here.
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?