feat(exoflex): simple tab component without lazy load

packages/exoflex/example/metro.config.js

@@ -12,6 +12,8 @@ let extraNodeModules = {};
   'react-native',
   'react',
   'react-native-svg',
+  'react-native-reanimated',
+  'react-native-gesture-handler',
   'expo-font',
   '@babel/runtime',
   ...dependencies,

packages/exoflex/example/src/examples/TabExample.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { StyleSheet, View, Image, ScrollView } from 'react-native';
+import { TabView, Button } from 'exoflex';
+
+const imageUri =
+  'https://images.unsplash.com/photo-1581963857936-fae00e457fb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80';
+
+let images = [];
+for (let i = 0; i < 100; i++) {
+  images.push(
+    <Image
+      key={i.toString()}
+      source={{ uri: imageUri }}
+      style={{ width: '100%', height: 200, marginVertical: 10 }}
+    />,
+  );
+}
+
+const FirstRoute = () => (
+  <ScrollView
+    contentContainerStyle={[
+      {
+        backgroundColor: '#ff4081',
+        padding: 10,
+        paddingHorizontal: 20,
+      },
+    ]}
+  >
+    {images}
+  </ScrollView>
+);
+
+const SecondRoute = () => (
+  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
+);
+
+const ThirdRoute = (props: {jumpTo: (index: number) => void}) => {
+  return (
+    <View style={[styles.scene, { backgroundColor: 'skyblue' }]}>
+      <Button onPress={() => props.jumpTo(0)} style={{ marginTop: 100 }}>
+        Jump to Tab 1
+      </Button>
+    </View>
+  );
+};
+
+const FourthRoute = () => (
+  <View style={[styles.scene, { backgroundColor: 'green' }]} />
+);
+
+const FifthRoute = () => (
+  <View style={[styles.scene, { backgroundColor: 'goldenrod' }]} />
+);
+
+
+function TabExample() {
+  const [index, setIndex] = useState(0);
+
+  let scenes = [
+    { title: 'First', scene: FirstRoute },
+    { title: 'Second', scene: SecondRoute },
+    { title: 'Third', scene: ThirdRoute },
+    { title: 'Fourth', scene: FourthRoute },
+    { title: 'Fifth', scene: FifthRoute },
+  ];
+
+  return (
+    <TabView
+      lazyLoad={false}
+      enableSwipe
+      activeIndex={index}
+      scenes={scenes}
+      onIndexChange={setIndex}
+      // NOTE: Intentionally left these commented for easier development purpose
+      // tabItemStyle={{ backgroundColor: 'white' }}
+      // tabItemTextStyle={{ color: 'red' }}
+      // tabIndicatorStyle={{ backgroundColor: 'brown' }}
+      // style={{ backgroundColor: 'white' }}
+    />
+  );
+}
+
+TabExample.title = 'Tab';
+
+let styles = StyleSheet.create({
+  scene: {
+    flex: 1,
+  },
+});
+
+export default TabExample;

packages/exoflex/example/src/examples/index.tsx

@@ -24,6 +24,7 @@ import RadioButtonGroupExample from './RadioButtonGroupExample';
 import RichRadioButtonExample from './RichRadioButtonExample';
 import SegmentedControlExample from './SegmentedControlExample';
 import SwitchExample from './SwitchExample';
+import TabExample from './TabExample';
 import TextInputExample from './TextInputExample';
 import ToastExample from './ToastExample';
 import TypographyExample from './TypographyExample';
@@ -54,6 +55,7 @@ export let EXAMPLES = {
   segmentedcontrol: SegmentedControlExample,
   slider: SliderExample,
   switch: SwitchExample,
+  tab: TabExample,
   textinput: TextInputExample,
   toast: ToastExample,
   typography: TypographyExample,

packages/exoflex/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
   preset: './jestPresets/jest-preset',
   modulePathIgnorePatterns: ['<rootDir>/lib/', '<rootDir>/example/'],
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|react-native-paper|react-native-safe-area-view|react-native-animation-hooks|react-native-svg|react-native-calendars|react-native-multi-slider|react-native-collapsible|react-native-modal-datetime-picker|react-native-vector-icons)/)',
+    'node_modules/(?!(react-native|react-native-paper|react-native-safe-area-view|react-native-animation-hooks|react-native-svg|react-native-calendars|react-native-multi-slider|react-native-collapsible|react-native-modal-datetime-picker|react-native-vector-icons|react-native-reanimated|react-native-gesture-handler)/)',
   ],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|css|styl)$':

packages/exoflex/package.json

@@ -23,6 +23,8 @@
     "expo-font": "*",
     "react": "^16.8.0",
     "react-native": "^0.59.0 || ^0.60.0 || ^0.61.0",
+    "react-native-gesture-handler": ">=1.1.0",
+    "react-native-reanimated": ">=1.4.0",
     "react-native-svg": ">=9.3.3"
   },
   "dependencies": {
@@ -63,6 +65,8 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-native": "0.61.5",
+    "react-native-gesture-handler": "1.5.6",
+    "react-native-reanimated": "1.7.0",
     "react-native-svg": "9.13.5",
     "react-native-testing-library": "1.12.0",
     "react-native-vector-icons": "6.6.0",

packages/exoflex/src/components/Tab/TabBar.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import TabItem from './TabBarItem';
+import TabIndicator from './TabIndicator';
+
+type TabBarProps = {
+  activeIndex: number;
+  titles: Array<string>;
+  onTabPress: (index: number) => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  indicatorStyle?: StyleProp<ViewStyle>;
+};
+
+export default function TabBar(props: TabBarProps) {
+  let {
+    activeIndex,
+    titles,
+    onTabPress,
+    style,
+    textStyle,
+    indicatorStyle,
+  } = props;
+
+  let [width, setWidth] = useState(0);
+
+  let indicatorWidth = width / titles.length;
+
+  return (
+    <View
+      accessibilityRole="tablist"
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+      style={styles.tabBar}
+    >
+      <TabIndicator
+        width={indicatorWidth}
+        activeIndex={activeIndex}
+        maxIndex={titles.length}
+        style={indicatorStyle}
+      />
+      {titles.map((title, index) => (
+        <TabItem
+          key={index}
+          title={title}
+          onPress={() => onTabPress(index)}
+          style={style}
+          textStyle={textStyle}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    height: 50,
+    flexDirection: 'row',
+  },
+});

packages/exoflex/src/components/Tab/TabBarItem.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import color from 'color';
+import Text from '../Text';
+
+import useTheme from '../../helpers/useTheme';
+
+type TabBarItemProps = {
+  title: string;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+};
+
+export default function TabBarItem(props: TabBarItemProps) {
+  let { onPress, title, style, textStyle } = props;
+  let { colors } = useTheme();
+
+  let customStyle = StyleSheet.flatten(style);
+  let backgroundColor = customStyle?.backgroundColor || colors.primary;
+
+  let activeOpacity = color(backgroundColor).isLight() ? 0.5 : 0.8;
+
+  let textColorStyle = {
+    color: color(backgroundColor).isLight() ? colors.text : colors.surface,
+  } as TextStyle;
+
+  return (
+    <TouchableOpacity
+      accessible
+      accessibilityLabel={`Tab ${title}`}
+      accessibilityHint={`Change the screen to ${title}`}
+      accessibilityRole="tab"
+      activeOpacity={activeOpacity}
+      onPress={onPress}
+      style={[styles.item, { backgroundColor }, style]}
+    >
+      <Text style={[textColorStyle, textStyle]}>{title}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

packages/exoflex/src/components/Tab/TabContent.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+
+import { useTab } from './useTab';
+
+import { TabScenes } from './types';
+import { IS_WEB } from '../../constants/platforms';
+
+type TabContentProps = {
+  lazyLoad: boolean;
+  enableSwipe: boolean;
+  activeIndex: number;
+  scenes: TabScenes;
+  onIndexChange: (index: number) => void;
+};
+
+export default function TabContent(props: TabContentProps) {
+  let {
+    scenes,
+    // lazyLoad = false,
+    enableSwipe = true,
+    activeIndex,
+    onIndexChange,
+  } = props;
+
+  let [width, setWidth] = useState(0);
+  let [x, setX] = useState(new Animated.Value<number>(0));
+
+  let totalScene = scenes.length;
+
+  let { transformStyle, onPanGestureEvent, onHandlerStateChange } = useTab({
+    x,
+    width,
+    activeIndex,
+    onIndexChange,
+    totalScene,
+  });
+
+  useEffect(() => {
+    let newLeft = new Animated.Value(width * activeIndex * -1);
+    setX(newLeft);
+  }, [width, activeIndex]);
+
+  let onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
+
+  return (
+    <View onLayout={onLayout} style={styles.root}>
+      <PanGestureHandler
+        enabled={IS_WEB ? false : enableSwipe}
+        minDist={50}
+        onGestureEvent={onPanGestureEvent}
+        onHandlerStateChange={onHandlerStateChange}
+      >
+        <Animated.View
+          style={
+            [
+              styles.container,
+              transformStyle,
+              IS_WEB && { left: x },
+            ] as ViewStyle
+          }
+        >
+          {scenes.map(({ scene, title }) => (
+            <View style={{ flex: 1 }} key={title}>
+              {React.createElement(scene, { jumpTo: onIndexChange })}
+            </View>
+          ))}
+        </Animated.View>
+      </PanGestureHandler>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  container: {
+    flexDirection: 'row',
+    height: '100%',
+  },
+});