From 9ebe866e99cd941a17573a941c7519fded97021e Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Sun, 7 May 2017 07:27:25 +0900 Subject: [PATCH 1/9] (modified)button props added "textSizeIOS" for setting button size in ios (ver2) --- Libraries/Components/Button.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index b6692afb230f59..8c1beb19d092f8 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -14,7 +14,6 @@ const ColorPropType = require('ColorPropType'); const Platform = require('Platform'); const React = require('React'); -const PropTypes = require('prop-types'); const StyleSheet = require('StyleSheet'); const Text = require('Text'); const TouchableNativeFeedback = require('TouchableNativeFeedback'); @@ -57,17 +56,18 @@ class Button extends React.Component { accessibilityLabel?: ?string, disabled?: ?boolean, testID?: ?string, + textSizeIos?:?string, }; static propTypes = { /** * Text to display inside the button */ - title: PropTypes.string.isRequired, + title: React.PropTypes.string.isRequired, /** * Text to display for blindness accessibility features */ - accessibilityLabel: PropTypes.string, + accessibilityLabel: React.PropTypes.string, /** * Color of the text (iOS), or background color of the button (Android) */ @@ -75,15 +75,19 @@ class Button extends React.Component { /** * If true, disable all interactions for this component. */ - disabled: PropTypes.bool, + disabled: React.PropTypes.bool, /** * Handler to be called when the user taps the button */ - onPress: PropTypes.func.isRequired, + onPress: React.PropTypes.func.isRequired, /** * Used to locate this view in end-to-end tests. */ - testID: PropTypes.string, + testID: React.PropTypes.string, + /** + * Size to change button's textSize (only in IOS) + */ + textSizeIos: React.PropTypes.string, }; render() { @@ -94,6 +98,7 @@ class Button extends React.Component { title, disabled, testID, + textSizeIos, } = this.props; const buttonStyles = [styles.button]; const textStyles = [styles.text]; @@ -103,6 +108,9 @@ class Button extends React.Component { } else if (color) { buttonStyles.push({backgroundColor: color}); } + if (textSizeIos&&Platform.OS==='ios') { + textStyles.push({fontSize:parseInt(textSizeIos)}); + } if (disabled) { buttonStyles.push(styles.buttonDisabled); textStyles.push(styles.textDisabled); @@ -125,7 +133,7 @@ class Button extends React.Component { disabled={disabled} onPress={onPress}> - {formattedTitle} + {formattedTitle} ); From e5f3b26f85331186e43d0f8bfe12626d44555602 Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Sat, 2 Sep 2017 18:11:54 +0900 Subject: [PATCH 2/9] Update PULL_REQUEST_TEMPLATE.md --- .github/PULL_REQUEST_TEMPLATE.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index de18092adff89b..1153d6f9c44f7e 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,19 +1,31 @@ Thanks for submitting a PR! Please read these instructions carefully: -- [ ] Explain the **motivation** for making this change. -- [ ] Provide a **test plan** demonstrating that the code is solid. -- [ ] Match the **code formatting** of the rest of the codebase. -- [ ] Target the `master` branch, NOT a "stable" branch. +- [x] Explain the **motivation** for making this change. +- [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 +"textSizeIOS" for can change button's text size(May be it's similar 'change button size' in ios.) +------------------------------------------------------------- + + . ## Test Plan (required) A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more. 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)** +-------------------------------------------------------------------- ## Next Steps From 6749869dd5201709dcc1b71bfdb14082b36ea0ea Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Sat, 2 Sep 2017 18:13:07 +0900 Subject: [PATCH 3/9] Update PULL_REQUEST_TEMPLATE.md --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 1153d6f9c44f7e..23d4714c59933d 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -11,7 +11,7 @@ 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 -"textSizeIOS" for can change button's text size(May be it's similar 'change button size' in ios.) +"textSizeIOS",be able to change button's text size(May be it's similar 'change button size' in ios.) ------------------------------------------------------------- . From 568e8d71d0dca3ac93652e0b694a6602513b448a Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Sat, 2 Sep 2017 18:24:31 +0900 Subject: [PATCH 4/9] Update Button.js --- Libraries/Components/Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index 8c1beb19d092f8..1b81b6591d2a67 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -56,7 +56,7 @@ class Button extends React.Component { accessibilityLabel?: ?string, disabled?: ?boolean, testID?: ?string, - textSizeIos?:?string, + textSizeIos?: ?string, }; static propTypes = { From 09b5752c462c002b153580538ea4d93be0935414 Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Fri, 13 Oct 2017 09:05:14 +0900 Subject: [PATCH 5/9] support resize btn text in both platform. --- Libraries/Components/Button.js | 82 ++++++++++++++++------------------ 1 file changed, 38 insertions(+), 44 deletions(-) diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index 1b81b6591d2a67..3fc214208f91d5 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -14,6 +14,7 @@ const ColorPropType = require('ColorPropType'); const Platform = require('Platform'); const React = require('React'); +const PropTypes = require('prop-types'); const StyleSheet = require('StyleSheet'); const Text = require('Text'); const TouchableNativeFeedback = require('TouchableNativeFeedback'); @@ -47,27 +48,24 @@ const invariant = require('fbjs/lib/invariant'); * */ -class Button extends React.Component { - - props: { - title: string, - onPress: () => any, - color?: ?string, - accessibilityLabel?: ?string, - disabled?: ?boolean, - testID?: ?string, - textSizeIos?: ?string, - }; - +class Button extends React.Component<{ + title: string, + onPress: () => any, + color?: ?string, + accessibilityLabel?: ?string, + disabled?: ?boolean, + testID?: ?string, + textSize?: ?string, +}> { static propTypes = { /** * Text to display inside the button */ - title: React.PropTypes.string.isRequired, + title: PropTypes.string.isRequired, /** * Text to display for blindness accessibility features */ - accessibilityLabel: React.PropTypes.string, + accessibilityLabel: PropTypes.string, /** * Color of the text (iOS), or background color of the button (Android) */ @@ -75,19 +73,19 @@ class Button extends React.Component { /** * If true, disable all interactions for this component. */ - disabled: React.PropTypes.bool, + disabled: PropTypes.bool, /** * Handler to be called when the user taps the button */ - onPress: React.PropTypes.func.isRequired, + onPress: PropTypes.func.isRequired, /** * Used to locate this view in end-to-end tests. */ - testID: React.PropTypes.string, - /** - * Size to change button's textSize (only in IOS) - */ - textSizeIos: React.PropTypes.string, + testID: PropTypes.string, + /** + * Used to change button's textSize + */ + textSize: PropTypes.string, }; render() { @@ -98,32 +96,32 @@ class Button extends React.Component { title, disabled, testID, - textSizeIos, + textSize, } = this.props; const buttonStyles = [styles.button]; const textStyles = [styles.text]; - const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; - if (color && Platform.OS === 'ios') { - textStyles.push({color: color}); - } else if (color) { - buttonStyles.push({backgroundColor: color}); + if (color) { + if (Platform.OS === 'ios') { + textStyles.push({color: color}); + } else { + buttonStyles.push({backgroundColor: color}); + } } - if (textSizeIos&&Platform.OS==='ios') { - textStyles.push({fontSize:parseInt(textSizeIos)}); + if (textSize) { + textStyles.push({fontSize: parseInt(textSize)}); } + const accessibilityTraits = ['button']; if (disabled) { buttonStyles.push(styles.buttonDisabled); textStyles.push(styles.textDisabled); + accessibilityTraits.push('disabled'); } invariant( typeof title === 'string', 'The title prop of a Button must be a string', ); const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title; - const accessibilityTraits = ['button']; - if (disabled) { - accessibilityTraits.push('disabled'); - } + const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; return ( - {formattedTitle} + {formattedTitle} ); } } -// Material design blue from https://material.google.com/style/color.html#color-color-palette -let defaultBlue = '#2196F3'; -if (Platform.OS === 'ios') { - // Measured default tintColor from iOS 10 - defaultBlue = '#0C42FD'; -} - const styles = StyleSheet.create({ button: Platform.select({ ios: {}, android: { elevation: 4, - backgroundColor: defaultBlue, + // Material design blue from https://material.google.com/style/color.html#color-color-palette + backgroundColor: '#2196F3', borderRadius: 2, }, }), text: Platform.select({ ios: { - color: defaultBlue, + // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/ + color: '#007AFF', textAlign: 'center', padding: 8, fontSize: 18, }, android: { - textAlign: 'center', color: 'white', + textAlign: 'center', padding: 8, fontWeight: '500', + fontSize: 18, }, }), buttonDisabled: Platform.select({ From 6da750b28dd190171f4e85fade4ab86b2c800cce Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Fri, 13 Oct 2017 11:48:57 +0900 Subject: [PATCH 6/9] Update PULL_REQUEST_TEMPLATE.md --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index b4141a0ff0f923..db277056c6a6d4 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -12,7 +12,7 @@ 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 -"textSizeIOS",be able to change button's text size(May be it's similar 'change button size' in ios.) +"textSize",be able to change button's text size. ------------------------------------------------------------- . From 652ab55fd6e5ebb9329c004953f83132e8e4dc9d Mon Sep 17 00:00:00 2001 From: Yang-Kichang Date: Sat, 14 Oct 2017 05:19:19 +0900 Subject: [PATCH 7/9] Update PULL_REQUEST_TEMPLATE.md --- .github/PULL_REQUEST_TEMPLATE.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index db277056c6a6d4..a9d4c74430256e 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,7 +1,6 @@