fix: fix showing unwanted rotations in header back button (#2051)

callstack · Jul 16, 2020 · db622d5 · db622d5
1 parent 676de43
commit db622d5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 53 deletions.
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
@@ -1,16 +1,8 @@
 import * as React from 'react';
-import {
-  View,
-  Image,
-  I18nManager,
-  StyleSheet,
-  Platform,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
 import { $Omit } from './../../types';
 import AppbarAction from './AppbarAction';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import AppbarBackIcon from './AppbarBackIcon';
+import { StyleProp, ViewStyle } from 'react-native';
 
 type Props = $Omit<
   React.ComponentPropsWithoutRef<typeof AppbarAction>,
@@ -79,50 +71,8 @@ class AppbarBackAction extends React.Component<Props> {
   };
 
   render() {
-    return (
-      <AppbarAction
-        {...this.props}
-        icon={({ size, color }: { size: number; color: string }) =>
-          Platform.OS === 'ios' ? (
-            <View
-              style={[
-                styles.wrapper,
-                {
-                  width: size,
-                  height: size,
-                  transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
-                },
-              ]}
-            >
-              <Image
-                source={require('../../assets/back-chevron.png')}
-                style={[styles.icon, { tintColor: color }]}
-              />
-            </View>
-          ) : (
-            <MaterialCommunityIcon
-              name="arrow-left"
-              color={color}
-              size={size}
-              direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
-            />
-          )
-        }
-      />
-    );
+    return <AppbarAction {...this.props} icon={AppbarBackIcon} />;
   }
 }
 
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    height: 21,
-    width: 21,
-    resizeMode: 'contain',
-  },
-});
-
 export default AppbarBackAction;
diff --git a/src/components/Appbar/AppbarBackIcon.tsx b/src/components/Appbar/AppbarBackIcon.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Platform, I18nManager, View, Image, StyleSheet } from 'react-native';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
+
+const AppbarBackIcon = ({ size, color }: { size: number; color: string }) =>
+  Platform.OS === 'ios' ? (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          width: size,
+          height: size,
+          transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+        },
+      ]}
+    >
+      <Image
+        source={require('../../assets/back-chevron.png')}
+        style={[styles.icon, { tintColor: color }]}
+      />
+    </View>
+  ) : (
+    <MaterialCommunityIcon
+      name="arrow-left"
+      color={color}
+      size={size}
+      direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+    />
+  );
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    height: 21,
+    width: 21,
+    resizeMode: 'contain',
+  },
+});
+
+export default AppbarBackIcon;