how to change seperator line color

[mostafaolyai]

how to change seperator line color? tnx

[danaee123]

how to change seperator line color?

[mostafaolyai]

yes default color is white

[jollimies]

I think you can change the color only by editing directly the node_package which is anti pattern.

try editing your ReactWheelCurvedPicker.java

...
    @Override
    protected void drawForeground(Canvas canvas) {
        super.drawForeground(canvas);

        Paint paint = new Paint();
        paint.setColor(Color.WHITE); // try changing this to Color.BLACK
        int colorFrom = 0x00FFFFFF;//Color.BLACK;
        int colorTo = Color.WHITE;
        LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR);
        paint.setShader(linearGradientShader);
        canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint);
        canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint);
    }
...

I solved this issue by rendering a view with absolute position and styled borders top of the picker... which isn't good solution either.

[mostafaolyai]

ill try this dude, tnx

[mostafaolyai]

@jollimies one question when you edit this , line sep show correctly in ios & android?

[Foveluy]

 @Override
    protected void drawForeground(Canvas canvas) {
        super.drawForeground(canvas);

        Paint paint = new Paint();
        paint.setColor(Color.BLACK); // change this 
        int colorFrom = 0x00FFFFFF;//Color.BLACK;
        int colorTo = Color.BLACK;  // change this 
        LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR);
        paint.setShader(linearGradientShader);
        canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint);
        canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint);
    }

for someone wants to change their border, you have to edit paint.setColor(Color.BLACK); // change this and int colorTo = Color.BLACK; // change this.

why?

 LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR);
        paint.setShader(linearGradientShader);

here is the key

[KingAmo]

能不能加个props修改分隔线的颜色呢？作者不维护这个项目了吗？ @lesliesam

[mikeyamato]

Has anyone been successful in updating the border colors by going into the Java file? I've tweaked it using different standard colors but it doesn't have any visible effect.

I'm also trying to update the itemSpace but that's a whole different can of worms.

[Foveluy]

@mikeyamato check out the code i posted above

[mikeyamato]

@mikeyamato check out the code i posted above

@Foveluy I did but without success. That's why I was wondering if anyone was able to change it.

I changed the color from white to red but what I'm seeing (iOS) is still unchanged.

[mikeyamato]

@Foveluy out of curiosity were you able to update the line color in iOS or are you working with Android only?

[Foveluy]

@mikeyamato very interesting. can you post all drawForeground function out?

i update this line color in Android for sure.

[mikeyamato]

@Foveluy I wonder if this is a iOS vs Android limitation.

As requested...

protected void drawForeground(Canvas canvas) {
    super.drawForeground(canvas);

    Paint paint = new Paint();
    paint.setColor(Color.RED);  // originally 'Color.WHITE'
    int colorFrom = 0x00FFFFFF;//Color.BLACK;
    int colorTo = Color.RED;  // originally 'Color.WHITE'
    LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR);
    paint.setShader(linearGradientShader);
    canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint);
    canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint);
}

[mikeyamato]

I took a look at PR #8 and even changed my code to how it was done but was unsuccessful 🙁

[mikeyamato]

Okay, so the following solution is a temporary solution for iOS that worked for me. You'll need to go into the RCTPicker.m file through the following path: */node_modules/react-native/React/Views/RCTPicker.m

Right below the line label.font = _font; place the following:

pickerView.subviews[1].backgroundColor = [UIColor darkGrayColor];
pickerView.subviews[2].backgroundColor = [UIColor darkGrayColor];

You'll need to stop your current Metro Bundler process then re-start react-native run-ios.

Although I'm using darkGray you can find additional color options here.

Just remember, since this is saved to your node_modules anytime you re-install you'll need to repeat this process.

[AarshOza]

Has anyone been successful in updating the separator color ??? If so please give the solution

[m3rlin94]

Has anyone been successful in updating the separator color ??? If so please give the solution

I have forked and exposed the line color, and gradient start, gradient end (if gradient is necessary. otherwise solid color can be set from line color prop) as react props. check this out.

https://github.com/m3rlin94/react-native-wheel-picker