Good day! I'm creating a mobile application that I want to implement it with different color of shadows. But I tried to change hex code of colors but it does not change it is always black. How can I do it both Android and iOS platform? If impossible, suggest me any custom to create a different color of shadow. Thank you!
I haven't use shadows before, but I found someone suggest use cardview instead view to show shadow effect on both android and ios. And same suggest in many different places, maybe you can try to see. Hope it helps.(I'm not sure if it could change color from using background color)
<CardView
cardElevation={3}
cardMaxElevation={3}
cornerRadius={3}
style={{
height: 60,
justifyContent: 'center',
alignItems: 'center',
margin: 20,
backgroundColor: '#ffffff' //color?
}}
<Text>
Elevation
</Text>
</CardView>
someones answer on github
react-native-cardview
example
Related
I have a problem with ScrollView in React-Natives. I've already looked for it in the react-native docs, but still unable to find it. Because of this I need to include an image since I don't even know how to call it.
Is it possible to change the "purple" color in this picture? How? And what is this "purple" thing called?
Here's my code to give a clue.
The ScrollView:
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
>
The styles
scrollContainer: {
marginTop: 20,
marginHorizontal: 10,
color: "#fff",
},
Thank you
This is the overScroll glow effect on android devices and can be disabled using the overScrollMode prop. You need to set it to never as follows.
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
overScrollMode="never"
>
I have created a little snack that showcases this prop. Notice that I have disabled this for the horizontal scrollview and enabled it for the vertical scrollview.
Changing the color is only possible by adding <item name="android:colorEdgeEffect">#E53644</item> to your styles.xml as discussed here, whereby #E53644 is the hexcode of the color of choice.
I am new to React Native and wanted to create a text with border. Therefore I checked the docs at https://facebook.github.io/react-native/docs/text - the word "border" appears exactly zero times. However, border is available on Text and this works fine:
<Text style={{fontSize: 30, borderWidth: 1, borderColor: 'red'}}>Hello, world!</Text>
But where is this documented? Did I look at the wrong place? Thanks!
It is included under the style prop, there is a link to the inherited View Style Props that include the border details that you are after.
Looking for a solution for this problem since 2 days and the internet didn't provide me with a solution for the first time of my life, so this is my first post on StackOverflow :)
So, I'm building a react-native (0.59.8) app with Expo (3.4.1), testing with Android 9.1.
I have an email TextInput that looks like that :
const style = {
backgroundColor: '#181818',
color: '#fafafa',
width: '100%',
borderColor: $primary,
borderWidth: 1,
borderRadius: 4,
marginBottom: 16,
padding: 8,
};
return (
<TextInput
placeholder="Email"
keyboardType="email-address"
autoCompleteType="email"
style={style.input}
autoCorrect={false}
selectionColor={$primary}
/>
);
The TextInput is first shown as expected, and there are no problems when I fill it manually (typing my email address).
But, when I select an Android suggestion, the TextInput style changes (colour become light yellow, backgroundColor become yellow/green, and borderColor become orange) that is a bit ugly :/.
It looks like the behaviour is the same as -webkit-text-fill-color in standard CSS, but can't find the counterpart in RN.
Thanks for your help :)
https://developer.android.com/guide/topics/text/autofill-optimize#highlighted
You can customized the styling using the android xml files. See here for more details.
I don't know why my dash is very bad.
My react-native version: 0.57.
here is my screenshot: https://imgur.com/tOiPlEv
<View style={{ height: '80%', alignSelf: 'center',borderStyle:'dashed',borderRadius:1,borderWidth:1,borderColor: Color.dashColor}} />
Bad in what way? the number of dashes? the quality?
I assume it is the number because of how small they are,
try using a larger border radius and a more sutle color like :
> #E0E0E0
> #EEEEEE
more info might be needed though
I have a simple progress bar, it has a borderRadius and overflow set to hidden. I have a child of this, it has no borderRadius, and it is overflowing outside of the corners. Here is my markup:
<View style={style.progressbar}>
<View style={[style.progressbarfill, { width:'50%' }]} />
</View>
const style = {
progressbar: {
backgroundColor: '#ccc',
height: 25,
width: '90%',
borderRadius: 12,
overflow: 'hidden'
},
progressbarfill: {
backgroundColor: 'springgreen',
width: '10%',
height: '100%'
}
}
This is what it looks like:
I put arrows on where the green is covering the border. The green should not overflow outside the edges.
Does anyone know why this is?
Actually I'm testing it right now, seems to be working fine on iOS, but Android is the one having the issue with the overflow right now. It looks like that is still getting more support currently. A temporary fix, is to just add the same borderRadius on the progressbarfill.
Here is the issue on the React Native Docs:
The overflow style property defaults to hidden and cannot be changed
on Android This is a result of how Android rendering works. This
feature is not being worked on as it would be a significant
undertaking and there are many more important tasks.
Another issue with overflow: 'hidden' on Android: a view is not
clipped by the parent's borderRadius even if the parent has overflow:
'hidden' enabled – the corners of the inner view will be visible
outside of the rounded corners. This is only on Android; it works as
expected on iOS. See the corresponding issue.
I found that, in addition to overflow: 'hidden' needed on the parent, I also needed backgroundColor: 'transparent' added to the parent
Edit: I also found that sometimes testing this required a refresh of my app.