Merge pull request #960 from esteemapp/bugfix/points

Fixed point dropdown style

src/components/dropdownButton/view/dropdownButtonView.js

@@ -17,9 +17,22 @@ import styles from './dropdownButtonStyles';
  *
  */
 
-const renderDropdownRow = (rowData, rowID, highlighted, rowTextStyle, noHighlight) => (
+const renderDropdownRow = (
+  rowData,
+  rowID,
+  highlighted,
+  rowTextStyle,
+  noHighlight,
+  dropdownRowWrapper,
+) => (
   <TouchableHighlight style={styles.rowWrapper} underlayColor="#E9F2FC">
-    <View style={[styles.dropdownRow, !noHighlight && highlighted && styles.highlightedRow]}>
+    <View
+      style={[
+        styles.dropdownRow,
+        dropdownRowWrapper,
+        !noHighlight && highlighted && styles.highlightedRow,
+      ]}
+    >
       <Text
         style={[
           rowTextStyle || styles.rowText,
@@ -50,9 +63,12 @@ const DropdownButtonView = ({
   style,
   noHighlight,
   isLoading,
+  dropdownRef,
+  dropdownRowWrapper,
 }) => (
   <View style={[styles.container, dropdownButtonStyle]}>
     <ModalDropdown
+      ref={dropdownRef}
       style={[!style ? styles.button : style]}
       textStyle={[textStyle || styles.buttonText]}
       dropdownStyle={[styles.dropdown, dropdownStyle, { height: 35 * (options.length + 1) }]}
@@ -64,7 +80,14 @@ const DropdownButtonView = ({
       defaultValue={defaultText}
       renderSeparator={() => null}
       renderRow={(rowData, rowID, highlighted) =>
-        renderDropdownRow(rowData, rowID, highlighted, rowTextStyle, noHighlight)
+        renderDropdownRow(
+          rowData,
+          rowID,
+          highlighted,
+          rowTextStyle,
+          noHighlight,
+          dropdownRowWrapper,
+        )
       }
     >
       {isHasChildIcon && !isLoading ? (

src/components/points/view/pointsStyles.js

@@ -15,15 +15,13 @@ export default EStyleSheet.create({
     alignSelf: 'center',
     flex: 1,
   },
-  dropdownWrapper: {
-    flex: 1,
-  },
   dropdownRowText: {
     fontSize: 14,
     color: '$primaryDarkGray',
+    textAlign: 'center',
   },
-  dropdownStyle: {
-    minWidth: '$deviceWidth * 0.7',
+  dropdownRowStyle: {
+    marginLeft: 0,
   },
   dropdownButtonStyle: {
     justifyContent: 'center',

src/components/points/view/pointsView.js

@@ -31,6 +31,8 @@ class PointsView extends Component {
   constructor(props) {
     super(props);
     this.state = {};
+
+    this.dropdownRef = React.createRef();
   }
 
   // Component Functions
@@ -72,6 +74,10 @@ class PointsView extends Component {
     return <Text style={styles.subText}>{intl.formatMessage({ id: 'points.no_activity' })}</Text>;
   };
 
+  _showDropdown = () => {
+    this.dropdownRef.current.show();
+  };
+
   render() {
     const {
       claimPoints,
@@ -89,8 +95,12 @@ class PointsView extends Component {
         <LineBreak height={12} />
         <ScrollView style={styles.scrollContainer} refreshControl={this.refreshControl()}>
           <View style={styles.pointsWrapper}>
-            <Text style={styles.pointText}>{get(userPoints, 'points')}</Text>
+            <Text onPress={this._showDropdown} style={styles.pointText}>
+              {get(userPoints, 'points')}
+            </Text>
             <DropdownButton
+              dropdownRowWrapper={styles.dropdownRowStyle}
+              dropdownRef={this.dropdownRef}
               isHasChildIcon
               iconName="arrow-drop-down"
               options={['Transfer', 'Promote']}