app/src/component/rewardCard/view.js

@@ -72,16 +72,7 @@ class RewardCard extends React.PureComponent<Props> {
         }
       }}>
         <View style={rewardStyle.leftCol}>
-          {!isPending && <TouchableOpacity onPress={() => {
+
-              if (!claimed) {
-                this.onClaimPress();
-              }
-            }}>
-            <Icon name={claimed ? "check-circle" : "circle"}
-                  style={claimed ? rewardStyle.claimed : (canClaim ? rewardStyle.unclaimed : rewardStyle.disabled)}
-                  size={20} />
-          </TouchableOpacity>}
-          {isPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
         </View>
         <View style={rewardStyle.midCol}>
           <Text style={rewardStyle.rewardTitle}>{reward.reward_title}</Text>
@@ -92,6 +83,16 @@ class RewardCard extends React.PureComponent<Props> {
                 error={'The transaction URL could not be opened'} />}
         </View>
         <View style={rewardStyle.rightCol}>
+          {!isPending && <TouchableOpacity onPress={() => {
+              if (!claimed) {
+                this.onClaimPress();
+              }
+            }}>
+            <Icon name={claimed ? "check-circle" : "circle"}
+                  style={claimed ? rewardStyle.claimed : (canClaim ? rewardStyle.unclaimed : rewardStyle.disabled)}
+                  size={20} />
+          </TouchableOpacity>}
+          {isPending && <ActivityIndicator size="small" color={Colors.LbryGreen} />}
           <Text style={rewardStyle.rewardAmount}>{reward.reward_amount}</Text>
           <Text style={rewardStyle.rewardCurrency}>LBC</Text>
         </View>

app/src/page/rewards/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import {
+  doClaimRewardType,
   doRewardList,
   selectEmailVerifyErrorMessage,
   selectEmailVerifyIsPending,
@@ -23,6 +24,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
+  claimReward: reward => dispatch(doClaimRewardType(reward.reward_type, true)),
   fetchRewards: () => dispatch(doRewardList()),
   notify: data => dispatch(doToast(data)),
   pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_REWARDS))

app/src/page/rewards/view.js

@@ -25,7 +25,8 @@ class RewardsPage extends React.PureComponent {
     isIdentityVerified: false,
     isRewardApproved: false,
     verifyRequestStarted: false,
-    revealVerification: true
+    revealVerification: true,
+    firstRewardClaimed: false
   };
 
   scrollView = null;
@@ -44,7 +45,8 @@ class RewardsPage extends React.PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { emailVerifyErrorMessage, emailVerifyPending, user } = nextProps;
+    const { emailVerifyErrorMessage, emailVerifyPending, rewards, user } = nextProps;
+    const { claimReward } = this.props;
     if (emailVerifyPending) {
       this.setState({ verifyRequestStarted: true });
     }
@@ -64,6 +66,17 @@ class RewardsPage extends React.PureComponent {
         isRewardApproved: (user && user.is_reward_approved)
       });
     }
+
+    if (rewards && rewards.length && this.state.isRewardApproved && !this.state.firstRewardClaimed) {
+      // claim new_user and new_mobile rewards
+      for (let i = 0; i < rewards.length; i++) {
+        const { reward_type: type } = rewards[i];
+        if ('new_user' === type || 'new_mobile' === type) {
+          claimReward(rewards[i]);
+        }
+      }
+      this.setState({ firstRewardClaimed: true });
+    }
   }
 
   renderVerification() {

app/src/styles/reward.js

@@ -135,12 +135,12 @@ const rewardStyle = StyleSheet.create({
     color: Colors.LbryGreen
   },
   leftCol: {
-    width: '15%',
+    width: '5%',
     alignItems: 'center',
     paddingLeft: 6
   },
   midCol: {
-    width: '65%'
+    width: '75%'
   },
   rightCol: {
     width: '18%',