Skip to content
This repository has been archived by the owner on Sep 9, 2024. It is now read-only.

Feature custom button container style #62

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature custom button container style #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f51f6af
add buttonContainerStyle prop
IjzerenHein Aug 2, 2023
2f2219c
fix customLeftButtonSize prop not used
IjzerenHein Aug 2, 2023
693bcf1
add buttonContainerStyle to readme
IjzerenHein Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import PinView from 'react-native-pin-view';
|inputAreaStyle |ViewStyle |`{ marginVertical: 12 }` | No |
|inputViewStyle |ViewStyle |- | No |
|inputViewEmptyStyle |ViewStyle |- | No |
|buttonContainerStyle |ViewStyle |- | No |
|buttonViewStyle |ViewStyle |- | No |
|buttonAreaStyle |ViewStyle |`{ marginVertical: 12 }` | No |
|inputViewFilledStyle |ViewStyle |- | No |
Expand Down
16 changes: 14 additions & 2 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const ViewButton = ({
accessibilityLabel,
disabled,
customTextStyle,
customContainerStyle,
}) => {
return (
<TouchableOpacity
Expand All @@ -21,7 +22,7 @@ const ViewButton = ({
accessibilityLabel={customComponent !== undefined ? accessibilityLabel : text}
activeOpacity={activeOpacity}
disabled={disabled}
style={PinViewStyle.buttonContainer}
style={[PinViewStyle.buttonContainer, customContainerStyle]}
onPress={onButtonPress}>
<View
style={[
Expand Down Expand Up @@ -108,6 +109,7 @@ const PinView = React.forwardRef(
buttonSize,
buttonViewStyle,
buttonTextStyle,
buttonContainerStyle,
inputViewEmptyStyle,
inputViewFilledStyle,
showInputText,
Expand Down Expand Up @@ -181,6 +183,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.one}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -191,6 +194,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.two}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -201,6 +205,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.three}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -211,6 +216,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.four}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -221,6 +227,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.five}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -231,6 +238,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.six}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -241,6 +249,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.seven}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -251,6 +260,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.eight}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
<ViewButton
disabled={disabled}
Expand All @@ -261,6 +271,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.nine}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
/>
{customLeftButton ? (
<ViewButton
Expand All @@ -271,7 +282,7 @@ const PinView = React.forwardRef(
onButtonPress={() => onButtonPress("custom_left")}
customViewStyle={customLeftButtonViewStyle}
customComponent={customLeftButton}
buttonSize={customRightButtonSize ? customRightButtonSize : buttonSize}
buttonSize={customLeftButtonSize ? customLeftButtonSize : buttonSize}
/>
) : (
<ViewHolder />
Expand All @@ -284,6 +295,7 @@ const PinView = React.forwardRef(
text={buttonTextByKey.zero}
customTextStyle={buttonTextStyle}
customViewStyle={buttonViewStyle}
customContainerStyle={buttonContainerStyle}
buttonSize={buttonSize}
/>
{customRightButton ? (
Expand Down
1 change: 1 addition & 0 deletions react-native-pin-view.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ declare module "react-native-pin-view" {
inputViewEmptyStyle?: ViewStyle
buttonViewStyle?: ViewStyle
buttonAreaStyle ?: ViewStyle
buttonContainerStyle?: ViewStyle
inputViewFilledStyle?: ViewStyle

inputTextStyle?: TextStyle
Expand Down