The delete button style does not change

[talut]

The delete button style does not change

[talut]

Hi, buttonDeleteStyle only accept style object not a component.

[hosseinpro]

I also tried this code but does not work.

buttonDeleteStyle={{fontSize: 16}}

[talut]

@hosseinpro buttonDeleteStyle is changing style of delete button not delete button text. So you can't use fontSize etc.

[hosseinpro]

So, do you have an example of that?
For example, how can I hide the delete button permanently?

[talut]

So, do you have an example of that?
For example, how can I hide the delete button permanently?

There is no special props for changing delete button text style you can use keyboardViewTextStyle but this props changing all button text styles.

 keyboardViewTextStyle={{
            fontSize: 11,
          }}

There is no props for hiding the delete button. And I'm not adding new features 'cause I'm rewriting this package with modern practices.

[hosseinpro]

Thank you for the quick response.
So, can I change the color of the delete button? Do you have an example?

[talut]

Thank you for the quick response.
So, can I change the color of the delete button? Do you have an example?

You can change text color of buttons with keyboardViewTextStyle also you can change deleteButton background color with buttonDeleteStyle

[hosseinpro]

I tested this code but it does not work:

buttonDeleteStyle={{ backgroundColor: "Green" }}

What is the problem?

[talut]

buttonDeleteStyle={{ backgroundColor: "Green" }}

"Green" > "green"

[hosseinpro]

buttonDeleteStyle={{ backgroundColor: "Green" }}

"Green" > "green"

same result. this is my code:

`<PinView

         onComplete={(pass, clear) => {
          clear();
          this.setState({ visible: false });
          this.state.onComplete(pass);
        }}
        pinLength={4}
        delayBeforeOnComplete={0}
        buttonBgColor={Colors.secondary}
        buttonTextColor={Colors.secondary}
        inputBgColor={Colors.primaryText}
        buttonDeleteStyle={{ backgroundColor: "green" }}

/>`

[talut]

import React, { Component } from "react"
import { View } from "react-native"
import PinView from "react-native-pin-view"

type Props = {}
export default class Test extends Component<Props> {
  constructor(props) {
    super(props)
    this.onComplete = this.onComplete.bind(this)
    this.state = {
      pin: "896745",
    }
  }
  onComplete(inputtedPin, clear) {
    if (val !== this.state.pin) {
      clear()
    } else {
      console.log("Pin is correct")
    }
  }
  onPress(inputtedPin, clear, pressed) {
    console.log("Pressed: " + pressed)
    console.log("inputtedPin: " + inputtedPin)
    // clear();
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#f1f1f1",
          justifyContent: "center",
        }}>
        <PinView
          onPress={this.onPress}
          onComplete={this.onComplete}
          buttonDeleteStyle={{ backgroundColor: "green" }}
          pinLength={this.state.pin.length}
          // pinLength={6} // You can also use like that.
        />
      </View>
    )
  }
}

[hosseinpro]

What version do you use? 2.4.1 or 2.5.0?

[talut]

"react-native-pin-view": "^2.5.0",

[hosseinpro]

Solved. I removed the "react-native-pin-view" package and installed it again.

[talut]

So I'm closing the issue if is K?

[hosseinpro]

yes. thank you.