feat: support to RTL

re #69 feat: support to RTL
dohooo · Jan 5, 2022 · c2c3bcf · c2c3bcf
1 parent f24ee1a
commit c2c3bcf
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 64 deletions.
diff --git a/example/package.json b/example/package.json
@@ -35,6 +35,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "8.3.0",
     "expo-cli": "^4.0.13",
+    "fiction-expo-restart": "^1.1.0",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-reanimated": "2.2.3"
   }

diff --git a/example/src/home/index.tsx b/example/src/home/index.tsx
@@ -55,7 +55,7 @@ export default Index;
 
 const styles = StyleSheet.create({
     listItem: {
-        alignItems: 'center',
+        alignItems: 'flex-start',
         borderColor: Colors.grey60,
         borderBottomWidth: 0.5,
         padding: 16,

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// @ts-ignore
+import { Restart } from 'fiction-expo-restart';
 
 import Home from './home';
 import NormalComponent from './normal';
@@ -9,6 +11,9 @@ import StackComponent from './stack';
 import ComplexComponent from './complex';
 import SnapCarouselComplexComponent from './snap-carousel-complex';
 import SnapCarouselLoopComponent from './snap-carousel-loop';
+import { I18nManager } from 'react-native';
+import { Text } from 'react-native-ui-lib';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -23,6 +28,7 @@ export type RootStackParamList = {
 };
 
 function App() {
+    const [isRTL, setIsRTL] = React.useState(I18nManager.isRTL);
     return (
         <NavigationContainer>
             <Stack.Navigator
@@ -32,6 +38,19 @@ function App() {
                         flex: 1,
                         backgroundColor: 'white',
                     },
+                    headerRight: ({ tintColor }) => (
+                        <TouchableWithoutFeedback
+                            onPress={() => {
+                                I18nManager.forceRTL(!isRTL);
+                                setIsRTL(!isRTL);
+                                Restart();
+                            }}
+                        >
+                            <Text color={tintColor}>
+                                {isRTL ? 'LTR' : 'RTL'}
+                            </Text>
+                        </TouchableWithoutFeedback>
+                    ),
                 }}
             >
                 <Stack.Screen name="Home" component={Home} />

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1517,7 +1517,7 @@
     json5 "^1.0.1"
     write-file-atomic "^2.3.0"
 
-"@expo/metro-config@0.1.84", "@expo/metro-config@^0.1.63":
+"@expo/metro-config@0.1.84", "@expo/metro-config@^0.1.16", "@expo/metro-config@^0.1.63":
   version "0.1.84"
   resolved "https://registry.nlark.com/@expo/metro-config/download/@expo/metro-config-0.1.84.tgz#ddcc7b4f1087c29f86bc9d916933d29bacd2c726"
   integrity sha1-3cx7TxCHwp+GvJ2RaTPSm6zSxyY=
@@ -5855,6 +5855,15 @@ expo-splash-screen@~0.10.2:
   dependencies:
     "@expo/configure-splash-screen" "0.3.4"
 
+expo-updates@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.npmmirror.com/expo-updates/download/expo-updates-0.4.2.tgz#15862bc209fa3fb98d3fa16b7aac4edfcc33f182"
+  integrity sha1-FYYrwgn6P7mNP6FreqxO38wz8YI=
+  dependencies:
+    "@expo/metro-config" "^0.1.16"
+    fbemitter "^2.1.1"
+    uuid "^3.4.0"
+
 expo@^41.0.0:
   version "41.0.1"
   resolved "https://registry.npmjs.org/expo/-/expo-41.0.1.tgz#2689003212dcc948d010f86dadf055721a6314b4"
@@ -6163,6 +6172,13 @@ fecha@^4.2.0:
   resolved "https://registry.npm.taobao.org/fecha/download/fecha-4.2.1.tgz?cache=0&sync_timestamp=1617642874416&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffecha%2Fdownload%2Ffecha-4.2.1.tgz#0a83ad8f86ef62a091e22bb5a039cd03d23eecce"
   integrity sha1-CoOtj4bvYqCR4iu1oDnNA9I+7M4=
 
+fiction-expo-restart@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/fiction-expo-restart/download/fiction-expo-restart-1.1.0.tgz#c8be9a5aa523c733071abd73ffd86ba506656662"
+  integrity sha1-yL6aWqUjxzMHGr1z/9hrpQZlZmI=
+  dependencies:
+    expo-updates "^0.4.1"
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.npm.taobao.org/figgy-pudding/download/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"

diff --git a/src/layouts/ParallaxLayout.tsx b/src/layouts/ParallaxLayout.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import Animated, {
     Extrapolate,
     interpolate,
@@ -44,17 +43,6 @@ export const ParallaxLayout: React.FC<{
         [vertical, width, height]
     );
 
-    const layoutStyle = React.useMemo(() => {
-        return {
-            width: !vertical
-                ? width * parallaxScrollingScale
-                : `${100 * parallaxScrollingScale}%`,
-            height: vertical
-                ? height * parallaxScrollingScale
-                : `${100 * parallaxScrollingScale}%`,
-        };
-    }, [vertical, parallaxScrollingScale, width, height]);
-
     const x = useOffsetX(
         {
             handlerOffsetX,
@@ -67,49 +55,49 @@ export const ParallaxLayout: React.FC<{
     );
 
     const offsetXStyle = useAnimatedStyle(() => {
-        const baseTranslateX = x.value - index * size;
-        const padding = (1 - parallaxScrollingScale) * size;
-        const extraOffset = index * padding + padding / 2;
+        const value = x.value / size;
+
+        const translate = interpolate(
+            value,
+            [-1, 0, 1],
+            [
+                -size + parallaxScrollingOffset,
+                0,
+                size - parallaxScrollingOffset,
+            ],
+            Extrapolate.CLAMP
+        );
 
         const zIndex = interpolate(
-            x.value,
-            [-size, 0, size],
+            value,
+            [-1, 0, 1],
             [0, size, 0],
             Extrapolate.CLAMP
         );
+
         const scale = interpolate(
-            x.value,
-            [-size, 0, size],
-            [parallaxScrollingScale, 1, parallaxScrollingScale],
-            Extrapolate.CLAMP
-        );
-        const relatedTranslateX = interpolate(
-            x.value,
-            [-size, 0, size],
-            [parallaxScrollingOffset, 0, -parallaxScrollingOffset],
+            value,
+            [-1, 0, 1],
+            [
+                Math.pow(parallaxScrollingScale, 2),
+                parallaxScrollingScale,
+                Math.pow(parallaxScrollingScale, 2),
+            ],
             Extrapolate.CLAMP
         );
 
-        if (vertical) {
-            return {
-                transform: [
-                    {
-                        translateY:
-                            baseTranslateX + extraOffset + relatedTranslateX,
-                    },
-                    { scale },
-                ],
-                zIndex,
-            };
-        }
-
         return {
             transform: [
+                vertical
+                    ? {
+                          translateY: translate,
+                      }
+                    : {
+                          translateX: translate,
+                      },
                 {
-                    translateX:
-                        baseTranslateX + extraOffset + relatedTranslateX,
+                    scale,
                 },
-                { scale },
             ],
             zIndex,
         };
@@ -137,14 +125,18 @@ export const ParallaxLayout: React.FC<{
     );
 
     return (
-        <Animated.View style={[layoutStyle, styles.container, offsetXStyle]}>
+        <Animated.View
+            style={[
+                {
+                    width,
+                    height,
+                    position: 'absolute',
+                    alignSelf: 'center',
+                },
+                offsetXStyle,
+            ]}
+        >
             <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
         </Animated.View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: 'center',
-    },
-});
diff --git a/src/layouts/StackLayout.tsx b/src/layouts/StackLayout.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-    Dimensions,
-    StyleSheet,
-    TransformsStyle,
-    ViewStyle,
-} from 'react-native';
+import { Dimensions, TransformsStyle, ViewStyle } from 'react-native';
 import Animated, {
     Extrapolate,
     interpolate,
@@ -355,18 +350,12 @@ export const StackLayout: React.FC<{
                     width,
                     height,
                     position: 'absolute',
+                    alignSelf: 'center',
                 },
                 offsetXStyle,
-                styles.container,
             ]}
         >
             <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
         </Animated.View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: 'center',
-    },
-});