Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android,Ios]supporting button text resize #16351

Closed
Show file tree
Hide file tree
Changes from 12 commits
Commits
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
22 changes: 22 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

## Motivation (required)
I want to use 'react-native' more comfortable.

What existing problem does the pull request solve?
---------------------------------------------------------------------
->in this version, 'button' component couldn't change text size in 'ios'. so, I added button's props
"textSize",be able to change button's text size.
-------------------------------------------------------------

.
=======
Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Expand All @@ -13,6 +28,13 @@ Happy contributing!

(Write your motivation here.)

If you have added code that should be tested, add tests.
-----------------------------------------------------------------
Ans:
# **->testing video is here. text size is 10,20 and 30.
[IMG_1944.MOV.zip](https://github.com/facebook/react-native/files/981039/IMG_1944.MOV.zip)**
--------------------------------------------------------------------
=======
## Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Expand Down
10 changes: 10 additions & 0 deletions Libraries/Components/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ class Button extends React.Component<{
accessibilityLabel?: ?string,
disabled?: ?boolean,
testID?: ?string,
textSize?: ?string,
}> {
static propTypes = {
/**
Expand All @@ -84,6 +85,10 @@ class Button extends React.Component<{
* Used to locate this view in end-to-end tests.
*/
testID: PropTypes.string,
/**
* Used to change button's textSize
*/
textSize: PropTypes.string,
};

render() {
Expand All @@ -94,6 +99,7 @@ class Button extends React.Component<{
title,
disabled,
testID,
textSize,
} = this.props;
const buttonStyles = [styles.button];
const textStyles = [styles.text];
Expand All @@ -104,6 +110,9 @@ class Button extends React.Component<{
buttonStyles.push({backgroundColor: color});
}
}
if (textSize) {
textStyles.push({fontSize: parseInt(textSize)});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'd consider using the same terms for styling props here because you're mapping textSize to fontSize. why not name this fontSize in the first place to prevent this internal remapping?

also, your textSize propType def require a string, but here you convert it to int - consider changing the proptype def to number to remove the conversion? or make that propType accept 2 types with oneOfTypes

}
const accessibilityTraits = ['button'];
if (disabled) {
buttonStyles.push(styles.buttonDisabled);
Expand Down Expand Up @@ -155,6 +164,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
padding: 8,
fontWeight: '500',
fontSize: 18,
},
}),
buttonDisabled: Platform.select({
Expand Down