Increase width of number grid

[alberthitanaya]

Would it be possible to make something like this using the props currently provided?:

I can see that grid imposes a maxwidth on the number pads, would it be possible to expose that or some other control so we can control the width of the number pad?

Thanks

[jeremy-farnault]

Hi,

I've managed to do this with minor changes, I'll try to publish it soon :).

Cheers,
Jeremy

[jeremy-farnault]

Hi,

With the latest version, you can now use the full width.
I've done something real quick that looks like that:

So you should be able to reach your goal!

class PinCode extends React.PureComponent<IProps, IState> {

  render() {
    return (
      <PINCode
        status={'choose'}
        stylePinCodeButtonCircle={styles.buttonCircle}
        stylePinCodeEmptyColumn={styles.colEmpty}
        stylePinCodeColumnButtons={styles.colButtonCircle}
      />
    )
  }
}

export default PinCode

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  colButtonCircle: {
    marginLeft: grid.unit / 2,
    marginRight: grid.unit / 2,
    alignItems: 'center',
    width: grid.unit * 8,
    height: grid.unit * 4
  },
  colEmpty: {
    marginLeft: grid.unit / 2,
    marginRight: grid.unit / 2,
    width: grid.unit * 8,
    height: grid.unit * 4
  },
  buttonCircle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: grid.unit * 8,
    height: grid.unit * 4,
    backgroundColor: 'rgb(242, 245, 251)',
    borderRadius: grid.unit * 4
  }
})

Cheers,
Jeremy