Chessboard unresponsive, most black pieces rendered incorrectly

[faiz-akhtar]

App.js file below:

import React from 'react';
import { View } from 'react-native';
import Chessboard from 'react-native-chessboard';

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Chessboard />
    </View>
  )
};

[faiz-akhtar]

Wrapping <Chessboard /> in <GestureHandlerRootView></GestureHandlerRootView> fixes the gestures.

[faiz-akhtar]

Oddly enough, adding some random colour to the black pieces png files fixes the rendering problem. But then we end up with ugly pieces.

[faiz-akhtar]

The UI rendering issue occurs only when dark background (night mode) is enabled in android. Maybe this is an android issue, or a React Native issue, not an issue with the library. Still would welcome any workaround if there is any, for dark mode.

[artiphishle]

@faiz-akhtar it feels like 2 subjects:

1. unresponsive pieces?

You have to install this library (like i the example in the README.md:

import { GestureHandlerRootView } from "react-native-gesture-handler";

and wrap your <View> with it.

2. coloring (e.g. darkmode)

it looks like you are coloring the pieces yourself or your darkmode function does so. If you apply the params like mentioned in README.md only the Square color changes. Without having looked into it, I assume pieces are SVG and therefore styled using fill property.

Still an issue?

[faiz-akhtar]

@scha-ch

1. The unresponsive pieces issue was resolved by wrapping with GestureHandlerRootView .
2. The coloring issue was not resolved last time I checked. But that was in February. I am no longer working on the project which needed this repository. However, it is easy to check for anyone building an app with this chessboard. Just enable night mode in android and see if the pieces render correctly.

I am going to close this issue as it is too old and I haven't verified if it still exists.