Home > front end >  Change react-native ScrollView color
Change react-native ScrollView color

Time:06-05

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.

enter image description here

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

CodePudding user response:

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