Conditional CSS not rendering in React Native

Question

I'm working on creating a chess game with React Native, but I'm having a hard time rendering the background colors for squares. It's supposed to be like a regular chessboard in the sense that black and white alternate across rows. The game is loosely based off of a tutorial that was written in React, but I've rebuilt the front end to work with React Native. It's almost functional, but I'm stuck with this one issue.

I've tried moving around props and stylesheets, adjusting syntax, and doing that sort of thing but I'm not getting anywhere.

Here is my "square" component (Square.js)

export default function Square(props) {
    return (
        <TouchableOpacity style={styles.button} onPress={props.onPress}>
            <Image 
                style={{height: 25, width: 25}} 
                source={props.source}
            />
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    button: { 
        padding: 5,
        width: 35,
        fontSize: 24,
        lineHeight: 2,
        height: 35,
        marginRight: 1,
        marginTop: 1,
        backgroundColor: 'transparent',
    },
});

and here is my board component (Board.js)

const styles = StyleSheet.create({
    boardRow: {
      flexDirection: "row",
      margin: 1,
    },
      darkSquare: {
        backgroundColor: 'black',
    },
      lightSquare: {
        backgroundColor: 'white',
    }
});

export default class Board extends React.Component {
  renderSquare(i, squareShade) {
    return <Square 
      piece = {this.props.squares[i]} 
      source = {this.props.squares[i]? this.props.squares[i].source : null}
      style = {[styles.button, this.props.styles]}
      shade = {squareShade}
      onPress={() => this.props.onPress(i)}
    />
  }

  render() {
    const board = [];
    for(let i = 0; i < 8; i++){
      const squareRows = [];
      for(let j = 0; j < 8; j++){
        const squareShade = (isEven(i) && isEven(j)) || (!isEven(i) && !isEven(j))? styles.lightSquare : styles.darkSquare;
        squareRows.push(this.renderSquare((i*8) + j, squareShade));
      }
      board.push(<View style={styles.boardRow}>{squareRows}</View>)
    }

    return (
      <View>
        {board}
      </View>
    );
  }
}

function isEven(num){
  return num % 2 == 0
}

I'm not really getting any error messages, but I'm under the impression that something isn't being passed correctly. If I change the backgroundColor in Square.js, then it will make all of the squares on the board appear as that color but the conditional aspect of it is giving me problems. Any help is appreciated!

Orgil Orgil · Accepted Answer · 2019-08-07T10:42:26

it is actually quite simple, maybe you should check your condition, try following code

const styles = {
  button: {
    width: 35,
    height: 35,
  },
};

const Square = (props) => {
  const { isEven } = props;
  const squareStyle = {
    backgroundColor: isEven ? '#000' : '#FFF',
    ...styles.button
  }

  // depending on the isEven prop background color is conditional
  return (
    <TouchableOpacity style={squareStyle}>
      <Image/>
    </TouchableOpacity>
  )
};

Conditional CSS not rendering in React Native

1 Answers