From 9379c2cba7ed8b21dcee022a83748c4a3e715aba Mon Sep 17 00:00:00 2001
From: Wojciech Stanisz <wojciech.stanisz@swmansion.com>
Date: Thu, 13 Feb 2020 14:11:51 +0100
Subject: [PATCH 1/2] fix clickable tab bar

---
 src/components/avatar-builder/EmojiSelector.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/avatar-builder/EmojiSelector.js b/src/components/avatar-builder/EmojiSelector.js
index 4d3fc4b5414..72bf9f77979 100644
--- a/src/components/avatar-builder/EmojiSelector.js
+++ b/src/components/avatar-builder/EmojiSelector.js
@@ -324,7 +324,12 @@ export default class EmojiSelector extends PureComponent {
           blurAmount={10}
           style={[
             styles.sectionStickyBlur,
-            { width: Categories[categoryKeys[(index - 1) / 2]].width },
+            {
+              width:
+                (index - 1) / 2 <= categoryKeys.length - 1
+                  ? Categories[categoryKeys[(index - 1) / 2]].width
+                  : Categories[categoryKeys[categoryKeys.length - 1]].width,
+            },
           ]}
         >
           <Text style={styles.sectionStickyHeader}>{item.title}</Text>
@@ -369,11 +374,8 @@ export default class EmojiSelector extends PureComponent {
     this.rlv = ref;
   };
 
-  svRef = React.createRef();
-
   scrollToOffset = (position, animated) => {
-    this.rlv.scrollToOffset(0, position, animated);
-    this.svRef.current.scrollTo({ y: position, x: 0 }, animated);
+    this.rlv.scrollTo(position, 0, animated);
   };
 
   prerenderEmojis(emojisRows) {
@@ -413,7 +415,7 @@ export default class EmojiSelector extends PureComponent {
     }
 
     return (
-      <ScrollView {...props}>
+      <ScrollView {...props} ref={this.handleListRef}>
         {this.state.isReady ? children : this.prerenderEmojis(prerenderEmoji)}
       </ScrollView>
     );
@@ -483,7 +485,6 @@ export default class EmojiSelector extends PureComponent {
                   rowRenderer={this.renderItem}
                   style={{ width: deviceUtils.dimensions.width }}
                   onScroll={this.handleScroll}
-                  ref={this.handleListRef}
                   externalScrollView={this.renderScrollView}
                 />
               </StickyContainer>

From db907c2679bd3e9eef002e8dfd2c7bfa0f1a40ee Mon Sep 17 00:00:00 2001
From: Wojciech Stanisz <wojciech.stanisz@swmansion.com>
Date: Thu, 13 Feb 2020 14:52:21 +0100
Subject: [PATCH 2/2] fix emoji selector opening animation

---
 src/navigation/transitions/effects.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/navigation/transitions/effects.js b/src/navigation/transitions/effects.js
index 7ccaa9f642c..1de66e4afe2 100644
--- a/src/navigation/transitions/effects.js
+++ b/src/navigation/transitions/effects.js
@@ -17,7 +17,7 @@ const emojiStyleInterpolator = ({
 
   const translateY = current.interpolate({
     inputRange: [0, 1],
-    outputRange: [-screen.height / 2, 0],
+    outputRange: [-(screen.height / 2) + statusBarHeight + 78.5, 0],
   });
 
   const scale = current.interpolate({
@@ -27,6 +27,7 @@ const emojiStyleInterpolator = ({
 
   return {
     cardStyle: {
+      opacity: backgroundOpacity,
       transform: [{ translateY }, { scale }],
     },
     overlayStyle: {