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?
Related
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
When creating a border that has shadows, I noticed whatever text I put inside that border(which is a view) that my text also has the same shadow implementation.
How can I achieve this same shadow effect on my border but leave my text to the default styling?
<View style={styles.reviewBox}>
<Text style={{fontSize: 14, color: 'black'}}>
Why does this text have shadows on it
</Text>
</View>
reviewBox: {
width: 300,
height: 50,
borderTopWidth: 0,
borderBottomWidth:.5,
borderRightWidth: .5,
borderLeftWidth: .5,
borderColor: 'white',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
shadowColor: "#000000",
shadowOpacity: 1,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 1
}
}
You can try this:
backgroundColor: 'white',
shadowColor: '#000000',
shadowOffset: {
width: 3,
height: 3
},
shadowOpacity: 1.0,
borderRadius: 10,
I need to render rounded shadow on rounded button. Shadow should be render like given in image but some how i am not able to render like that.
But it is not render properly and display like below.
It looks like below
Style will be like this
const styles = StyleSheet.create({
buttonStyle : {
height: 60,
width: 60,
marginRight: 15,
shadowColor: "#4e4f72",
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0
},
borderRadius: 30,
elevation: 30,
},
})
View style
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<Image style={styles.buttonStyle} source={require('../images/google.png')} />
<Image style={styles.buttonStyle} source={require('../images/facebook.png')} />
<Image style={{ height: 60, width: 60, }} source={require('../images/instagram.png')} />
</View>
Can you try to place your image inside a View. Remove the shadow styling from the image and place it to the View. In my case this is working.
<View
style={{
height: 60,
width: 60,
marginRight: 15,
shadowColor: '#4e4f72',
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0,
},
borderRadius: 30,
elevation: 30,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image style={{ height: 60, width: 60, borderRadius: 30 }} />
</View>
Don't forget to add the require back to the Image component
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>
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" />