@bigbinary/neetoui-rn 0.0.254 → 0.0.256

package/index.d.ts

@@ -326,27 +326,27 @@ type ChatInputProps = {
   onOptionChange?: (option: string) => void;
   onChangeText: (text: string) => void;
   onForward?: () => void;
-  onCannedResponse?:  () => void;
+  onCannedResponse?: () => void;
   toEmails?: string;
   onReply?: () => void;
   onAddNote?: () => void;
   onAttachment?: () => void;
   attachmentsCount?: number;
-  Attachments?:  React.FC;
+  Attachments?: React.FC;
   showCannedResponsesFor?: Array<"REPLY" | "NOTE" | "FORWARD">;
   showSuggestionsFor?: Array<"REPLY" | "NOTE" | "FORWARD">;
   disabled?: boolean;
   suggestions: Array<{
-    name: string
-    imageUrl: string
-    id: string
+    name: string;
+    imageUrl: string;
+    id: string;
   }>;
 };
 
 type LineLoaderProps = {
-  backgroundColor?: string,
-  foregroundColor?: string,
-  height?: number,
+  backgroundColor?: string;
+  foregroundColor?: string;
+  height?: number;
   isLoading?: boolean;
 };
 
@@ -526,10 +526,6 @@ interface NavigationProps {
 }
 interface SegmentedTopBarProps extends MaterialTopTabBarProps {
   state?: SegmentedTopBarStateProps;
-  inactiveSegmentStyle?: ViewStyle;
-  activeSegmentStyle?: ViewStyle;
-  activeTextStyle?: TouchableProps;
-  inactiveTextStyle?: TouchableProps;
   navigation?: NavigationProps;
   height?: number;
   descriptors?: object;

package/lib/components/LineLoader.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.LineLoader=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _reactNativeSizeMatters=require("react-native-size-matters");var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/LineLoader.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var LineLoader=function LineLoader(_ref){var isLoading=_ref.isLoading,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_theme.theme.colors.background.primary:_ref$backgroundColor,_ref$foregroundColor=_ref.foregroundColor,foregroundColor=_ref$foregroundColor===void 0?_theme.theme.colors.background.base:_ref$foregroundColor,_ref$height=_ref.height,height=_ref$height===void 0?(0,_reactNativeSizeMatters.moderateScale)(1.5):_ref$height;return _react.default.createElement(_native.default,{animate:isLoading,backgroundColor:backgroundColor,foregroundColor:foregroundColor,height:height,interval:0,key:isLoading,speed:1,width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:3}},_react.default.createElement(_native.Rect,{height:height,width:"100%",x:0,y:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:5}}));};exports.LineLoader=LineLoader;LineLoader.propTypes={isLoading:_propTypes.default.bool,backgroundColor:_propTypes.default.string,foregroundColor:_propTypes.default.string,height:_propTypes.default.number};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.LineLoader=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _reactNativeSizeMatters=require("react-native-size-matters");var _theme=require("../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/LineLoader.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var LineLoader=function LineLoader(_ref){var isLoading=_ref.isLoading,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?_theme.theme.colors.background.primary:_ref$backgroundColor,_ref$foregroundColor=_ref.foregroundColor,foregroundColor=_ref$foregroundColor===void 0?_theme.theme.colors.background.base:_ref$foregroundColor,_ref$height=_ref.height,height=_ref$height===void 0?(0,_reactNativeSizeMatters.moderateScale)(3):_ref$height;return _react.default.createElement(_native.default,{animate:isLoading,backgroundColor:backgroundColor,foregroundColor:foregroundColor,height:height,interval:0,key:isLoading,speed:1,width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:3}},_react.default.createElement(_native.Rect,{height:height,width:"100%",x:0,y:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:5}}));};exports.LineLoader=LineLoader;LineLoader.propTypes={isLoading:_propTypes.default.bool,backgroundColor:_propTypes.default.string,foregroundColor:_propTypes.default.string,height:_propTypes.default.number};

package/lib/components/SegmentedTopBar/Indicator.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Indicator=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeSizeMatters=require("react-native-size-matters");var _theme=require("../../theme");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar/Indicator.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var springConfig={mass:1,overshootClamping:true,restSpeedThreshold:0.5,restDisplacementThreshold:0.5};var spacing=(0,_reactNativeSizeMatters.moderateScale)(6);var Indicator=function Indicator(_ref){var measure=_ref.measure;var x=measure.x,width=measure.width,height=measure.height;var translateX=(0,_reactNativeReanimated.useSharedValue)(0);var animatedWidth=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(function(){(0,_reactNativeReanimated.cancelAnimation)(translateX);(0,_reactNativeReanimated.cancelAnimation)(animatedWidth);translateX.value=(0,_reactNativeReanimated.withSpring)(x+spacing/2,springConfig);animatedWidth.value=(0,_reactNativeReanimated.withSpring)(width-spacing,springConfig);},[animatedWidth,translateX,width,x]);var tabTranslateAnimatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{transform:[{translateX:translateX.value}],width:animatedWidth.value};};_f._closure={translateX:translateX,animatedWidth:animatedWidth};_f.asString="function _f(){const{translateX,animatedWidth}=jsThis._closure;{return{transform:[{translateX:translateX.value}],width:animatedWidth.value};}}";_f.__workletHash=12388547266078;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar/Indicator.jsx (38:54)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.movingSegmentStyle,{height:height-spacing},tabTranslateAnimatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:5}});};exports.Indicator=Indicator;var styles=_reactNative.StyleSheet.create({movingSegmentStyle:{position:"absolute",top:spacing/2,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(6),backgroundColor:_theme.theme.colors.background.primary,shadowColor:_theme.theme.colors.background.grey,shadowOffset:{width:0,height:5},shadowOpacity:0.34,shadowRadius:6.27,elevation:10}});Indicator.propTypes={measure:_propTypes.default.shape({x:_propTypes.default.number.isRequired,width:_propTypes.default.number.isRequired,height:_propTypes.default.number.isRequired}).isRequired};

package/lib/components/SegmentedTopBar/Tab.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Tab=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./..");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar/Tab.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Tab=(0,_react.forwardRef)(function(_ref,ref){var label=_ref.label,value=_ref.value,navigation=_ref.navigation,flex=_ref.flex;var handleOnPress=(0,_react.useCallback)(function(){return navigation.navigate(value);},[navigation,value]);return _react.default.createElement(_reactNative.View,{ref:ref,style:{flex:flex},__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:5}},_react.default.createElement(_.Touchable,{flex:1,justifyContent:"center",onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:7}},_react.default.createElement(_.Typography,{fontFamily:"sf500",fontSize:"xs",numberOfLines:1,textAlign:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:17,columnNumber:9}},label)));});exports.Tab=Tab;Tab.displayName="Tab";Tab.propTypes={flex:_propTypes.default.number,label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired,navigation:_propTypes.default.object};

package/lib/components/SegmentedTopBar/index.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SegmentedTopBar=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeSizeMatters=require("react-native-size-matters");var _theme=require("../../theme");var _Indicator=require("./Indicator");var _Tab=require("./Tab");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentedTopBar/index.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var SegmentedTopBar=function SegmentedTopBar(_ref){var _ref$state=_ref.state,routes=_ref$state.routes,index=_ref$state.index,navigation=_ref.navigation,height=_ref.height,descriptors=_ref.descriptors;var containerRef=(0,_react.useRef)();var _useState=(0,_react.useState)([]),_useState2=(0,_slicedToArray2.default)(_useState,2),measures=_useState2[0],setMeasures=_useState2[1];var tabsData=(0,_react.useMemo)(function(){return routes.map(function(_ref2){var _ref3,_options$tabBarLabel;var key=_ref2.key,name=_ref2.name;var options=descriptors[key].options;var label=(_ref3=(_options$tabBarLabel=options.tabBarLabel)!=null?_options$tabBarLabel:options.title)!=null?_ref3:name;return{label:label,value:name,ref:(0,_react.createRef)()};});},[]);(0,_react.useLayoutEffect)(function(){var _measures=[];tabsData.forEach(function(_ref4){var ref=_ref4.ref;ref.current.measureLayout(containerRef.current,function(x,y,width,height){_measures.push({x:x,y:y,width:width,height:height});if(_measures.length===tabsData.length){setMeasures(_measures);}});});},[measures.length]);return _react.default.createElement(_reactNative.View,{height:height,ref:containerRef,style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:5}},measures.length>0&&_react.default.createElement(_Indicator.Indicator,{measure:measures[index],__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:31}}),tabsData.map(function(_ref5){var label=_ref5.label,value=_ref5.value,ref=_ref5.ref;return _react.default.createElement(_Tab.Tab,{flex:tabsData.length>3?label.length:1,key:value,label:label,navigation:navigation,ref:ref,value:value,__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:9}});}));};exports.SegmentedTopBar=SegmentedTopBar;var styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",borderRadius:(0,_reactNativeSizeMatters.moderateScale)(6),backgroundColor:_theme.theme.colors.background.secondary}});SegmentedTopBar.propTypes={state:_propTypes.default.object,height:_propTypes.default.number,navigation:_propTypes.default.object,descriptors:_propTypes.default.object};SegmentedTopBar.defaultProps={tabs:[],height:(0,_reactNativeSizeMatters.moderateScale)(36)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.254",
+  "version": "0.0.256",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/LineLoader.jsx

@@ -10,7 +10,7 @@ export const LineLoader = ({
   isLoading,
   backgroundColor = theme.colors.background.primary,
   foregroundColor = theme.colors.background.base,
-  height = moderateScale(1.5),
+  height = moderateScale(3),
 }) => (
   <ContentLoader
     animate={isLoading}

package/src/components/SegmentedTopBar/Indicator.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from "react";
+import { StyleSheet } from "react-native";
+
+import PropTypes from "prop-types";
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
+
+import { theme } from "@theme";
+
+const springConfig = {
+  mass: 1,
+  overshootClamping: true,
+  restSpeedThreshold: 0.5,
+  restDisplacementThreshold: 0.5,
+};
+
+const spacing = moderateScale(6);
+
+export const Indicator = ({ measure }) => {
+  const { x, width, height } = measure;
+
+  const translateX = useSharedValue(0);
+  const animatedWidth = useSharedValue(0);
+
+  useEffect(() => {
+    cancelAnimation(translateX);
+    cancelAnimation(animatedWidth);
+
+    translateX.value = withSpring(x + spacing / 2, springConfig);
+    animatedWidth.value = withSpring(width - spacing, springConfig);
+  }, [animatedWidth, translateX, width, x]);
+
+  const tabTranslateAnimatedStyles = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+    width: animatedWidth.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.movingSegmentStyle,
+        { height: height - spacing },
+        tabTranslateAnimatedStyles,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  movingSegmentStyle: {
+    position: "absolute",
+    top: spacing / 2,
+    borderRadius: moderateScale(6),
+    backgroundColor: theme.colors.background.primary,
+    shadowColor: theme.colors.background.grey,
+    shadowOffset: {
+      width: 0,
+      height: 5,
+    },
+    shadowOpacity: 0.34,
+    shadowRadius: 6.27,
+    elevation: 10,
+  },
+});
+
+Indicator.propTypes = {
+  measure: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+  }).isRequired,
+};

package/src/components/SegmentedTopBar/Tab.jsx

@@ -0,0 +1,37 @@
+import React, { forwardRef, useCallback } from "react";
+import { View } from "react-native";
+
+import PropTypes from "prop-types";
+
+import { Typography, Touchable } from "@components";
+
+export const Tab = forwardRef(({ label, value, navigation, flex }, ref) => {
+  const handleOnPress = useCallback(
+    () => navigation.navigate(value),
+    [navigation, value]
+  );
+
+  return (
+    <View ref={ref} style={{ flex }}>
+      <Touchable flex={1} justifyContent="center" onPress={handleOnPress}>
+        <Typography
+          fontFamily="sf500"
+          fontSize="xs"
+          numberOfLines={1}
+          textAlign="center"
+        >
+          {label}
+        </Typography>
+      </Touchable>
+    </View>
+  );
+});
+
+Tab.displayName = "Tab";
+
+Tab.propTypes = {
+  flex: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  navigation: PropTypes.object,
+};

package/src/components/SegmentedTopBar/index.jsx

@@ -0,0 +1,128 @@
+import React, {
+  createRef,
+  useState,
+  useMemo,
+  useRef,
+  useLayoutEffect,
+} from "react";
+import { StyleSheet, View } from "react-native";
+
+import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
+
+import { theme } from "@theme";
+
+import { Indicator } from "./Indicator";
+import { Tab } from "./Tab";
+
+/**
+ *
+ * A Segment Picker component that provides toggling between two or more views.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/toptabbar/toptabbar-1.png" />
+ *   <img src="screenshots/toptabbar/toptabbar-2.png" />
+ * </div>
+ *
+ *   ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+ * import { NavigationContainer } from "@react-navigation/native";
+ *
+ * import { SegmentedTopBar } from '@bigbinary/neetoui-rn';
+ *
+ * const Tab = createMaterialTopTabNavigator();
+ *
+ * export default function Main(){
+ *
+ *  return (
+ *    <NavigationContainer>
+ *      <Tab.Navigator tabBar={props => <SegmentedTopBar {...props} />} >
+ *        <Tab.Screen
+ *          name="Home"
+ *          component={HomeScreen}
+ *        />
+ *
+ *        <Tab.Screen
+ *          name="Settings"
+ *          component={SettingsScreen}
+ *        />
+ *      </Tab.Navigator>
+ *    </NavigationContainer>
+ *  );
+ * }
+ * ```
+ */
+
+export const SegmentedTopBar = ({
+  state: { routes, index },
+  navigation,
+  height,
+  descriptors,
+}) => {
+  const containerRef = useRef();
+
+  const [measures, setMeasures] = useState([]);
+
+  const tabsData = useMemo(
+    () =>
+      routes.map(({ key, name }) => {
+        const { options } = descriptors[key];
+        const label = options.tabBarLabel ?? options.title ?? name;
+
+        return { label, value: name, ref: createRef() };
+      }),
+    []
+  );
+
+  useLayoutEffect(() => {
+    const _measures = [];
+
+    tabsData.forEach(({ ref }) => {
+      ref.current.measureLayout(containerRef.current, (x, y, width, height) => {
+        _measures.push({ x, y, width, height });
+
+        if (_measures.length === tabsData.length) {
+          setMeasures(_measures);
+        }
+      });
+    });
+  }, [measures.length]);
+
+  return (
+    <View height={height} ref={containerRef} style={styles.container}>
+      {measures.length > 0 && <Indicator measure={measures[index]} />}
+      {tabsData.map(({ label, value, ref }) => (
+        <Tab
+          flex={tabsData.length > 3 ? label.length : 1}
+          key={value}
+          label={label}
+          navigation={navigation}
+          ref={ref}
+          value={value}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    borderRadius: moderateScale(6),
+    backgroundColor: theme.colors.background.secondary,
+  },
+});
+
+SegmentedTopBar.propTypes = {
+  state: PropTypes.object,
+  height: PropTypes.number,
+  navigation: PropTypes.object,
+  descriptors: PropTypes.object,
+};
+
+SegmentedTopBar.defaultProps = {
+  tabs: [],
+  height: moderateScale(36),
+};

package/src/components/SegmentedTopBar.jsx

@@ -1,211 +0,0 @@
-import React, { useEffect } from "react";
-import { Dimensions, Platform, StyleSheet } from "react-native";
-
-import PropTypes from "prop-types";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-
-import { Typography, Touchable } from "@components";
-import { theme } from "@theme";
-
-const defaultShadowStyle = {
-  shadowColor: theme.colors.background.grey800,
-  shadowOffset: {
-    width: 0,
-    height: moderateScale(2),
-  },
-  shadowOpacity: 0.23,
-  shadowRadius: moderateScale(2.62),
-  elevation: 4,
-};
-
-// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
-const DEFAULT_SPRING_CONFIG = {
-  stiffness: 150,
-  damping: 20,
-  mass: 1,
-  overshootClamping: false,
-  restSpeedThreshold: 0.001,
-  restDisplacementThreshold: 0.001,
-};
-
-// So that it stretches in landscape mode.
-const width = Dimensions.get("screen").width - moderateScale(32);
-
-/**
- *
- * A Segment Picker component that provides toggling between two or more views.
- *
- * <div class="screenshots">
- *   <img src="screenshots/toptabbar/toptabbar-1.png" />
- *   <img src="screenshots/toptabbar/toptabbar-2.png" />
- * </div>
- *
- *   ## Usage
- * ```js
- * import * as React from 'react';
- * import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
- * import { NavigationContainer } from "@react-navigation/native";
- *
- * import { SegmentedTopBar } from '@bigbinary/neetoui-rn';
- *
- * const Tab = createMaterialTopTabNavigator();
- *
- * export default function Main(){
- *
- *  return (
- *    <NavigationContainer>
- *      <Tab.Navigator tabBar={props => <SegmentedTopBar {...props} />} >
- *        <Tab.Screen
- *          name="Home"
- *          component={HomeScreen}
- *        />
- *
- *        <Tab.Screen
- *          name="Settings"
- *          component={SettingsScreen}
- *        />
- *      </Tab.Navigator>
- *    </NavigationContainer>
- *  );
- * }
- * ```
- */
-
-export const SegmentedTopBar = ({
-  state: { routes, index },
-  inactiveSegmentStyle,
-  activeSegmentStyle,
-  activeTextStyle,
-  inactiveTextStyle,
-  navigation,
-  height,
-  descriptors,
-}) => {
-  const translateValue = (width - 4) / routes?.length;
-  const tabTranslateValue = useSharedValue(0);
-  useEffect(() => {
-    tabTranslateValue.value = withSpring(
-      index * Number(translateValue),
-      DEFAULT_SPRING_CONFIG
-    );
-  }, [index]);
-
-  const tabTranslateAnimatedStyles = useAnimatedStyle(() => ({
-    transform: [{ translateX: tabTranslateValue.value }],
-  }));
-
-  return (
-    <Animated.View
-      style={[styles.defaultSegmentedControlWrapper, inactiveSegmentStyle]}
-    >
-      <Animated.View
-        style={[
-          styles.movingSegmentStyle,
-          activeSegmentStyle,
-          defaultShadowStyle,
-          StyleSheet.absoluteFill,
-          {
-            width: (width - moderateScale(4)) / routes?.length,
-          },
-          tabTranslateAnimatedStyles,
-        ]}
-      />
-      {routes.map((route, i) => {
-        const currentIndexTextStyle =
-          index === index + 1 ? activeTextStyle : inactiveTextStyle;
-        const { options } = descriptors[route.key];
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
-
-        return (
-          <Touchable
-            alignItems="center"
-            elevation={Platform.OS === "android" ? 9 : null}
-            flex={1}
-            height={height}
-            justifyContent="center"
-            key={i}
-            onPress={() => navigation.navigate(route.name)}
-            {...currentIndexTextStyle}
-          >
-            <Typography
-              color="font.grey800"
-              fontFamily="sf500"
-              fontSize="xs"
-              textAlign="center"
-            >
-              {label}
-            </Typography>
-          </Touchable>
-        );
-      })}
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  segmentedControlWrapper: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: moderateScale(8),
-    width,
-  },
-  defaultSegmentedControlWrapper: {
-    position: "relative",
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: moderateScale(8),
-    backgroundColor: "#F6F6FA",
-    width,
-    marginBottom: moderateScale(5),
-  },
-  movingSegmentStyle: {
-    top: 0,
-    marginVertical: moderateScale(2),
-    marginHorizontal: moderateScale(2),
-    borderRadius: moderateScale(6),
-    backgroundColor: "#FFFFFF",
-  },
-});
-
-SegmentedTopBar.propTypes = {
-  /**
-   * Navigation routes and additional data.
-   */
-  state: PropTypes.object,
-  /**
-   * To change the inactive segment container style.
-   */
-  inactiveSegmentStyle: PropTypes.object,
-  /**
-   * To change the active segment container style.
-   */
-  activeSegmentStyle: PropTypes.object,
-  /**
-   * To change the inactive segment font style.
-   */
-  inactiveTextStyle: PropTypes.object,
-  /**
-   * To change the active segment font style.
-   */
-  activeTextStyle: PropTypes.object,
-  height: PropTypes.number,
-  navigation: PropTypes.object,
-  descriptors: PropTypes.object,
-};
-
-SegmentedTopBar.defaultProps = {
-  tabs: [],
-  height: moderateScale(32),
-};