App.js

@@ -186,10 +186,14 @@ export default class App extends Component<Props, State> {
   }
 
   /**
-   * On component will mount
+   * contructor
    */
-  componentWillMount() {
-    if (!Text.defaultProps) Text.defaultProps = {};
+  constructor(props) {
+    super(props);
+
+    if (!Text.defaultProps) {
+      Text.defaultProps = {};
+    }
     Text.defaultProps.style = {
       fontFamily: 'Roboto',
       color: '#444',

__tests__/App.js

@@ -9,6 +9,7 @@ import {
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
+jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
 
 
 // mock backhandler

__tests__/blogs/__snapshots__/BlogsViewScreen.js.snap

@@ -186,9 +186,8 @@ exports[`blog view screen component should renders correctly 1`] = `
           style={
             Object {
               "color": "#444",
-              "fontFamily": "Roboto",
+              "fontFamily": "Roboto-Black",
               "fontSize": 22,
-              "fontWeight": "800",
               "paddingBottom": 8,
               "paddingLeft": 12,
               "paddingRight": 12,

ios/Minds/Info.plist

@@ -9,7 +9,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleGetInfoString</key>
-	<string></string>
+	<string/>
 	<key>CFBundleIdentifier</key>
 	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
@@ -42,7 +42,7 @@
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationCategoryType</key>
-	<string></string>
+	<string/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -66,7 +66,7 @@
 	<key>NSCameraUsageDescription</key>
 	<string>$(PRODUCT_NAME) needs access to use your camera in order to upload images or videos</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>$(PRODUCT_NAME) needs access to your microphone in order to record videos </string>
 	<key>NSPhotoLibraryAddUsageDescription</key>

package.json

@@ -64,6 +64,7 @@
     "react-native-qrcode-svg": "^5.2.0",
     "react-native-randombytes": "^3.5.3",
     "react-native-reanimated": "^1.3.0",
+    "react-native-redash": "^8.6.0",
     "react-native-screens": "^2.0.0-alpha.11",
     "react-native-share": "^2.0.0",
     "react-native-snap-carousel": "^3.8.2",

src/blockchain/transaction-modal/BlockchainTransactionModalScreen.js

@@ -239,7 +239,8 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   link: {
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
   },
   warning: {
     marginTop: 10,

src/blockchain/wallet/details/BlockchainWalletDetailsScreen.js

@@ -497,7 +497,8 @@ const styles = StyleSheet.create({
   label: {
     color: '#444',
     fontSize: 16,
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
   },
   supportingTextContainer: {
     flexDirection: 'row',

src/blockchain/wallet/import/BlockchainWalletImportScreen.js

@@ -135,6 +135,7 @@ export default class BlockchainWalletImportScreen extends Component {
 const styles = StyleSheet.create({
   title: {
     fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
     fontSize: 18,
     color: '#444',
     marginBottom: 8,

src/blockchain/wallet/list/BlockchainWalletListItem.js

@@ -159,7 +159,8 @@ const styles = StyleSheet.create({
   label: {
     paddingBottom: 3,
     fontSize: 16,
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
     letterSpacing: 1,
   },
   listAliasHighlight: {
@@ -190,7 +191,7 @@ const styles = StyleSheet.create({
     paddingRight: 3,
     color: 'green',
     fontSize: 20,
-    fontWeight: '800',
+    fontWeight: '700',
     textAlign: 'right',
   },
   eth: {

src/blogs/BlogsViewScreen.js

@@ -319,7 +319,8 @@ const styles = StyleSheet.create({
     fontSize: 22,
     color: '#444',
     fontFamily: 'Roboto',
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
   },
   ownerBlockContainer: {
     margin: 8,

src/comments/Comment.js

@@ -93,7 +93,7 @@ class Comment extends Component {
                   <CommentEditor setEditing={this.setEditing} comment={comment} store={this.props.store}/>
                 :
                   <DoubleTapText style={styles.message} selectable={true} onDoubleTap={this.showActions} selectable={false} onLongPress={this.showActions}>
-                    <Text style={styles.username}>@{comment.ownerObj.username} </Text>
+                    <Text style={styles.username} onPress={this._navToChannel} >@{comment.ownerObj.username} </Text>
                     { comment.description &&
                       <Tags
                         navigation={this.props.navigation}
@@ -300,7 +300,8 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   username: {
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black',
     paddingRight: 8,
     color: '#444',
   },

src/common/components/Pulse.js

 import React from 'react';
-import { View, StyleSheet, Animated, Easing, Dimensions } from 'react-native';
-
-const { height, width } = Dimensions.get('window');
-
-export default class Pulse extends React.Component {
-	constructor(props) {
-		super(props);
-
-		this.anim = new Animated.Value(0);
-	}
-
-	componentDidMount() {
-		Animated.timing(this.anim, {
-			toValue: 1,
-			duration: this.props.interval,
-			easing: Easing.in,
-		})
-		.start();
-	}
-
-	render() {
-		const { size, pulseMaxSize, borderColor, backgroundColor, getStyle } = this.props;
-
-		return (
-			<View style={[styles.circleWrapper, {
-				width: pulseMaxSize,
-				height: pulseMaxSize,
-				marginLeft: -pulseMaxSize/2,
-				marginTop: -pulseMaxSize/2,
-			}]}>
-				<Animated.View
-					style={[styles.circle, {
-						borderColor,
-						backgroundColor,
-						width: this.anim.interpolate({
-							inputRange: [0, 1],
-							outputRange: [size, pulseMaxSize]
-						}),
-						height: this.anim.interpolate({
-							inputRange: [0, 1],
-							outputRange: [size, pulseMaxSize]
-						}),
-						borderRadius: pulseMaxSize/2,
-						opacity: this.anim.interpolate({
-							inputRange: [0, 1],
-							outputRange: [1, 0]
-						})
-					}, getStyle && getStyle(this.anim)]}
-				/>
-			</View>
-		);
-	}
+import { View, StyleSheet } from 'react-native';
+import Animated, { Easing } from "react-native-reanimated";
+import { bInterpolate, loop } from "react-native-redash";
+
+const { Value, useCode, set } = Animated;
+
+export default function(props) {
+  const animation = new Value(0);
+  useCode(
+    set(
+      animation,
+      loop({
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.in(Easing.ease),
+      }),
+    ),
+    [animation],
+  );
+  const scale = bInterpolate(animation, 1, 1.3);
+  const opacity = bInterpolate(animation, 1, 0);
+  const pulseMaxSize = Math.round(1.3 * props.size);
+
+  return (
+    <View
+      style={[
+        styles.circleWrapper,
+        {
+          width: pulseMaxSize,
+          height: pulseMaxSize,
+          marginLeft: -pulseMaxSize/2,
+          marginTop: -pulseMaxSize/2,
+        }
+      ]}
+    >
+      <Animated.View
+        style={{
+          transform: [{scale}],
+          backgroundColor: 'red',
+          borderRadius: props.size / 2,
+          width: props.size,
+          height: props.size,
+          opacity,
+        }}
+      />
+      </View>
+  );
 }
 
-
 const styles = StyleSheet.create({
-	circleWrapper: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		position: 'absolute',
-		// left: width/8,
-		// top: height/2,
-	},
-	circle: {
-		borderWidth: 4 * StyleSheet.hairlineWidth,
-	},
+  circleWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    // left: width/8,
+    // top: height/2,
+  },
+  circle: {
+    borderWidth: 4 * StyleSheet.hairlineWidth,
+  },
 });
\ No newline at end of file

src/common/components/PulseAnimAvatar.js

 import React from 'react';
-import { View, Image, TouchableOpacity, Animated, Easing } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import Pulse from './Pulse';
 
 import FastImage from 'react-native-fast-image';
 
 /**
- * Based on https://github.com/wissile/react-native-pulse-anim
+ * Pulse avatar
  */
 export default class PulseAnimAvatar extends React.Component {
-	constructor(props) {
-		super(props);
+  state = {};
 
-		this.state = {
-			circles: []
-		};
+  /**
+   * Derive state from props
+   * @param {object} nextProps
+   * @param {object} prevState
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (
+      nextProps.size !== prevState.size ||
+      nextProps.avatar !== prevState.avatar
+    ) {
+      return {
+        sizeStyle: {
+          width: nextProps.size,
+          height: nextProps.size,
+        },
+        imageStyle: {
+          width: nextProps.size,
+          height: nextProps.size,
+          borderRadius: nextProps.size / 2,
+          backgroundColor: nextProps.avatarBackgroundColor
+        },
+        avatarUri: {
+          uri: nextProps.avatar
+        },
+      };
+    }
+    return null;
+  }
 
-		this.counter = 1;
-		this.setInterval = null;
-		this.anim = new Animated.Value(1);
-	}
+  /**
+   * Render
+   */
+  render() {
+    const {onPress} = this.props;
 
-	componentDidMount() {
-		this.setCircleInterval();
-	}
-
-	componentWillUnmount() {
-		clearInterval(this.setInterval);
-	}
-
-	setCircleInterval() {
-		this.setInterval = setInterval(this.addCircle.bind(this), this.props.interval);
-		this.addCircle();
-	}
-
-	addCircle() {
-		this.setState({ circles: [...this.state.circles, this.counter] });
-		this.counter++;
-	}
-
-	onPressIn() {
-		Animated.timing(this.anim, {
-			toValue: this.props.pressInValue,
-			duration: this.props.pressDuration,
-      easing: this.props.pressInEasing,
-		}).start(() => clearInterval(this.setInterval));
-	}
-
-	onPressOut() {
-		Animated.timing(this.anim, {
-			toValue: 1,
-			duration: this.props.pressDuration,
-      easing: this.props.pressOutEasing,
-		}).start(this.setCircleInterval.bind(this));
-	}
-
-	render() {
-		const { size, avatar, avatarBackgroundColor, interval, onPress } = this.props;
-
-		return (
-			<View style={{
-				// flex: 1,
-				backgroundColor: 'transparent',
-				// width: size,
-				// height: size,
-				justifyContent: 'center',
-				alignItems: 'center',
-			}}>
-				{this.state.circles.map((circle) => (
-					<Pulse
-						key={circle}
-						{...this.props}
-					/>
-				))}
-
-				<TouchableOpacity
-					activeOpacity={.5}
-					// onPressIn={this.onPressIn.bind(this)}
-          // onPressOut={this.onPressOut.bind(this)}
+    return (
+      <View style={styles.main}>
+        <Pulse
+          {...this.props}
+        />
+        <TouchableOpacity
+          activeOpacity={.5}
           onPress={onPress}
-					style={{
-							width: size,
-							height: size,
-					}}
-				>
-					<FastImage
-						source={{ uri: avatar }}
-						style={{
-							width: size,
-							height: size,
-							borderRadius: size/2,
-							backgroundColor: avatarBackgroundColor,
-							...this.props.style
-						}}
-					/>
-				</TouchableOpacity>
-			</View>
-		);
-	}
+          style={this.state.sizeStyle}
+        >
+          <FastImage
+            source={this.state.avatarUri}
+            style={[this.state.imageStyle, this.props.style]}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
 }
 
 PulseAnimAvatar.defaultProps = {
-  interval: 2000,
   size: 100,
-  pulseMaxSize: 200,
   avatar: undefined,
   avatarBackgroundColor: 'transparent',
-  pressInValue: 0.8,
-  pressDuration: 150,
-  pressInEasing: Easing.in,
-  pressOutEasing: Easing.in,
-  borderColor: '#1c1d1f',
-  backgroundColor: '#D1D1D1',
-  getStyle: undefined,
-};
\ No newline at end of file
+  style: null,
+};
+
+const styles = StyleSheet.create({
+  main: {
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

src/navigation/NavigationService.js

@@ -2,6 +2,14 @@ import { NavigationActions, StackActions, SwitchActions } from 'react-navigation
 
 let _navigator;
 
+function getStateFrom(nav) {
+  let state = nav.routes[nav.index];
+  if (state.routes) {
+    state = getStateFrom(state);
+  }
+  return state;
+}
+
 function setTopLevelNavigator(navigatorRef) {
   _navigator = navigatorRef;
 }
@@ -11,7 +19,7 @@ function getState() {
 }
 
 function getCurrentState() {
-  return _navigator.state.nav.routes[_navigator.state.nav.index];
+  return getStateFrom(_navigator.state.nav);
 }
 
 function navigate(routeName, params) {

src/styles/Common.js

@@ -529,7 +529,8 @@ export const CommonStyle = StyleSheet.create({
     fontWeight: '700'
   },
   extraBold: {
-    fontWeight: '800'
+    // fontWeight: '800'
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
   },
   fontThin: {
     fontWeight: '200'
@@ -567,7 +568,7 @@ export const CommonStyle = StyleSheet.create({
     paddingBottom: 10,
   },
   modalTitle: {
-    fontWeight: '800',
+    fontFamily: 'Roboto-Black',
     fontSize: 18,
     color: '#444',
     marginBottom: 8,

src/wallet/WalletOverviewView.js

@@ -96,7 +96,8 @@ const styles = StyleSheet.create({
   titles: {
     fontFamily: 'Roboto',
     fontSize: 12,
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
     color: '#444',
     flex: 1,
   }

src/wallet/balances/WalletBalanceTokens.js

@@ -49,7 +49,7 @@ export default class WalletBalanceTokens extends Component {
   }
 
   render() {
-    
+
     let addresses = null;
 
     if (this.props.wallet.addresses) {
@@ -130,8 +130,8 @@ const styles = StyleSheet.create({
     textAlign: 'right',
     color: colors.primary,
     fontSize: 16,
-    fontWeight: '800',
-    fontFamily: 'Roboto',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
   },
   addressesEthBalance: {
     fontSize: 12,

src/wallet/tokens/TransactionsList.js

@@ -231,7 +231,8 @@ const styles = StyleSheet.create({
   },
   count: {
     fontSize: 24,
-    fontWeight: '800',
+    // fontWeight: '800',
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
     flexGrow: 1,
   },
   positive: {

src/wallet/tokens/contributions/ContributionRow.js

@@ -27,7 +27,7 @@ export default class ContributionRow extends PureComponent {
     const item = this.props.item;
     const selected = this.state.selected;
 
-    const color = selected ? [CommonStyle.colorBlack, {fontWeight: '800'}] : [CommonStyle.colorDark];
+    const color = selected ? [CommonStyle.colorBlack, {fontFamily: 'Roboto-Black'}] : [CommonStyle.colorDark];
 
     const detail = selected ? this.getDetail() : null;
 

src/wallet/tokens/contributions/ContributionsView.js

@@ -100,9 +100,9 @@ export default class ContributionsView extends Component {
     return (
       <View style={styles.header}>
         <View style={[CommonStyle.rowJustifyStart, styles.row]}>
-          <Text style={[CommonStyle.flexContainer, {fontWeight: '800', fontSize: 10 }]}>{i18n.t('wallet.contributions.date')}</Text>
-          <Text style={[CommonStyle.flexContainer, {fontWeight: '800', fontSize: 10 }]}>{i18n.t('wallet.contributions.score')}</Text>
-          <Text style={[CommonStyle.flexContainer, {fontWeight: '800', fontSize: 10 }]}>{i18n.t('wallet.contributions.share')}</Text>
+          <Text style={[CommonStyle.flexContainer, styles.text]}>{i18n.t('wallet.contributions.date')}</Text>
+          <Text style={[CommonStyle.flexContainer, styles.text]}>{i18n.t('wallet.contributions.score')}</Text>
+          <Text style={[CommonStyle.flexContainer, styles.text]}>{i18n.t('wallet.contributions.share')}</Text>
         </View>
       </View>
     );
@@ -158,6 +158,10 @@ const styles = StyleSheet.create({
     //borderBottomWidth: 1,
     //borderBottomColor: '#ececec',
   },
+  text: {
+    fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
+    fontSize: 10,
+  },
   row: {
     paddingTop: 16,
     paddingBottom: 16,