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.
Related
In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.
Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.
Here is code example:
<FlatList
data={actionSheet._data}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(_, index) => index}
renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
ItemSeparatorComponent={() => (
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
)}
/>
OR
<ScrollView>
{
actionSheet._data.map((item, index) => (
<>
<ActionSheetClickableItem data={item} index={index} key={index}/>
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
</>
))
}
</ScrollView>
So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It have to correct view as we expecting, why its behave like this, any solution??????
I was facing the same issue.
That might be with Emulator or Your screen.
You can use also increase the height of itemSeparater or make the background color more darker.
If you check it in real device then it displays all the separaters.
I have problems with the transparency of a View in React Native Expo, within the View I have text but this is not seen on iphone devices and on androids the text is seen with transparency but it is not what I want.
Code:
<View style= {{paddingHorizontal:30, borderRadius:1, marginTop:5}}>
<View style={{alpha = 1.0, alignItems:'center', borderRadius:10, backgroundColor: 'white', alignContent:'center', paddingVertical:10}}>
<Text style={{fontSize:15, color:'white', fontWeight: 'bold'}}>Iniciar Sesión</Text>
</View>
</View>
What I want to do:
enter image description here
What i get:
enter image description here
The alpha on the style is applied to the entire view and as a result also causes the all child components to become transparent. You want to apply your alpha only to the background color of the parent view. In react-native you can achieve that by defining your backgroundcolor rgba format
Color documentation can be found
https://reactnative.dev/docs/colors
And here is an expo snack to demonstrate the behavior.
https://snack.expo.io/sl8VafHil
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
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.
In my app I'm using <ScrollView /> to view pages of a book scrolling horizontally. When a user gets to the end of the <ScrollView /> there is a bounce that shows a white area to the right that is only visible if the user drags the last page to the left. I want to add some text there that says "The End" vertically. How can I add content to the right of the <ScrollView /> in the bounce area?
I ALMOST figured it out. This is close but shows up in the right side of the last page but not off the page on the right in the bounce area. I want it to show up "to the right of the page" not "on the right side of the page." Any other ideas?
Create a <View style={styles.end} /> with this style:
theEnd: {
position: 'absolute',
top: 0,
right: 0,
width: 100,
height: 768, // Device height
alignItems: 'center',
}
Place it right before the <ScrollView /> and put whatever you want to show inside of the View component with the "theEnd" style.
This probably doesn't apply to your content, but I had the same situation except with a large image for the ScrollView content. I wanted both horizontal and vertical scrolling, where the edge of the image would show up only in the bounce margin. I figured out that the scale transformation works great for this:
<ScrollView horizontal={true}>
<Image
source={require('./img/map.jpg')}
style={{transform: [{scale: 1.1}]}}
/>
</ScrollView>
So the image takes up 110% of the height and width of its box (which is then inside a yet smaller ScrollView).
EDIT: FYI, after testing, discovered this only works on iOS, not Android. (Android won't allow vertical scrolling if you set horizontal to true, and also I think it didn't render the parts outside of the normal viewing area, so the bounce margin was empty.)
there is a prop for this called contentContainerStyle
<ScrollView
horizontal={true}
contentContainerStyle={{
paddingLeft: 25,
paddingRight: 25,
}}>
*** CONTENT ***
</ScrollView>