react-native-gifted-charts 1.4.10 → 1.4.12

package/src/PopulationPyramid/index.tsx

@@ -1,603 +0,0 @@
-import React, {Fragment} from 'react';
-import {View} from 'react-native';
-import {
-  PopulationPyramidPropsType,
-  RulesProps,
-  ruleTypes,
-  usePopulationPyramid,
-} from 'gifted-charts-core';
-import {
-  ClipPath,
-  Line,
-  Rect,
-  Svg,
-  Text as SvgText,
-  Use,
-} from 'react-native-svg';
-import {screenWidth} from '../utils';
-
-export const PopulationPyramid = (props: PopulationPyramidPropsType) => {
-  const {
-    width,
-    verticalMarginBetweenBars,
-    barsMapToYAxisSections,
-    data,
-    hideRules,
-    yAxisColor,
-    xAxisColor,
-    xAxisThickness,
-    xAxisType,
-    xAxisNoOfSections,
-    showXAxisIndices,
-    showXAxisLabelTexts,
-    xAxisLabelShiftX,
-    xAxisLabelPrefix,
-    xAxisLabelSuffix,
-    formatXAxisLabels,
-    showVerticalLines,
-    showYAxisIndices,
-    yAxisIndicesWidth,
-    yAxisIndicesHeight,
-    yAxisIndicesColor,
-    yAxisLabelFontSize,
-    yAxisLabelFontStyle,
-    yAxisLabelFontWeight,
-    yAxisLabelFontFamily,
-    yAxisLabelColor,
-    yAxisLabelTextMarginRight,
-    yAxisLabelTexts,
-    showValuesAsBarLabels,
-    rulesThickness,
-    rulesColor,
-    rulesType,
-    dashWidth,
-    dashGap,
-    leftBarLabelWidth,
-    leftBarLabelFontSize,
-    leftBarLabelColor,
-    leftBarLabelFontStyle,
-    leftBarLabelFontWeight,
-    leftBarLabelFontFamily,
-    leftBarLabelPrefix,
-    leftBarLabelSuffix,
-    rightBarLabelFontSize,
-    rightBarLabelColor,
-    rightBarLabelFontStyle,
-    rightBarLabelFontWeight,
-    rightBarLabelFontFamily,
-    rightBarLabelPrefix,
-    rightBarLabelSuffix,
-    formatBarLabels,
-    showMidAxis,
-    midAxisLabelFontSize,
-    midAxisLabelColor,
-    midAxisLabelFontStyle,
-    midAxisLabelFontWeight,
-    midAxisLabelFontFamily,
-    leftBarColor,
-    rightBarColor,
-    leftBarBorderColor,
-    rightBarBorderColor,
-    leftBarBorderWidth,
-    rightBarBorderWidth,
-    leftBarBorderRadius,
-    rightBarBorderRadius,
-    allCornersRounded,
-    showSurplus,
-    showSurplusLeft,
-    showSurplusRight,
-    leftSurplusColor,
-    leftSurplusBorderColor,
-    rightSurplusColor,
-    rightSurplusBorderColor,
-    leftSurplusBorderWidth,
-    rightSurplusBorderWidth,
-    yAxisLabelWidth,
-    noOfSections,
-    stepHeight,
-    containerHeightWithXaxisLabels,
-    mid,
-    barWidthFactor,
-    leftXAfterMid,
-    rightXAfterMid,
-    yAxisLineProps,
-    midAxisLineCommonProps,
-    xAxisIndicesCommonProps,
-    verticalLinesCommonProps,
-    xAxisLabelsCommonProps,
-    getXLabel,
-  } = usePopulationPyramid({...props, screenWidth});
-
-  return (
-    <View style={{height: containerHeightWithXaxisLabels, width}}>
-      <Svg fill={'none'}>
-        {/**************        Y-Axis         ************/}
-        <Line {...yAxisLineProps} />
-
-        {/************        Rules, X-axis and Y-Axis labels         ***********/}
-        {Array.from(Array(noOfSections)).map((item, index) => {
-          const isLast = index === noOfSections - 1;
-          const y = stepHeight * (index + 1);
-          const rulesProps: RulesProps = {
-            x1: yAxisLabelWidth,
-            y1: y,
-            x2: width,
-            y2: y,
-            stroke: isLast ? xAxisColor : rulesColor,
-            strokeWidth: isLast ? xAxisThickness : rulesThickness,
-          };
-          if (
-            (isLast && xAxisType !== ruleTypes.SOLID) ||
-            (!isLast && rulesType !== ruleTypes.SOLID)
-          ) {
-            rulesProps.strokeDasharray = [dashWidth, dashGap];
-          } else {
-            delete rulesProps.strokeDasharray;
-          }
-          return (
-            <Fragment key={'rule' + index}>
-              {!hideRules || isLast ? <Line {...rulesProps} /> : null}
-              {showYAxisIndices ? (
-                <Line
-                  x1={yAxisLabelWidth - yAxisIndicesWidth / 2}
-                  y1={y}
-                  x2={yAxisLabelWidth + yAxisIndicesWidth / 2}
-                  y2={y}
-                  stroke={yAxisIndicesColor}
-                  strokeWidth={yAxisIndicesHeight}
-                />
-              ) : null}
-              {/**************     Y-Axis Labels      ************/}
-              {!barsMapToYAxisSections ? (
-                <SvgText
-                  x={yAxisLabelWidth - yAxisLabelTextMarginRight}
-                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
-                  stroke={yAxisLabelColor}
-                  fontSize={yAxisLabelFontSize}
-                  fontStyle={yAxisLabelFontStyle}
-                  fontWeight={yAxisLabelFontWeight}
-                  fontFamily={yAxisLabelFontFamily}
-                  textAnchor="end">
-                  {yAxisLabelTexts[index] ?? ''}
-                </SvgText>
-              ) : null}
-            </Fragment>
-          );
-        })}
-
-        {/**************     X-Axis Labels Left     ************/}
-        {Array.from(Array(xAxisNoOfSections)).map((item, index) => {
-          const x = leftXAfterMid - (leftXAfterMid * index) / xAxisNoOfSections;
-          const unformattedXLabel = getXLabel(index);
-          const xLabel = formatXAxisLabels
-            ? formatXAxisLabels(unformattedXLabel)
-            : unformattedXLabel;
-          return (
-            <Fragment key={'x-axis' + index}>
-              {showVerticalLines ? (
-                <Line {...verticalLinesCommonProps} x1={x} x2={x} />
-              ) : null}
-              {showXAxisIndices ? (
-                <Line {...xAxisIndicesCommonProps} x1={x} x2={x} />
-              ) : null}
-              {showXAxisLabelTexts ? (
-                <SvgText
-                  {...xAxisLabelsCommonProps}
-                  x={x + xAxisLabelShiftX}
-                  textAnchor="middle">
-                  {xAxisLabelPrefix + xLabel + xAxisLabelSuffix}
-                </SvgText>
-              ) : null}
-            </Fragment>
-          );
-        })}
-
-        {/**************     X-Axis Labels Right     ************/}
-        {Array.from(Array(xAxisNoOfSections)).map((item, index) => {
-          if (!index && !showMidAxis) return null;
-          const x = leftXAfterMid + (leftXAfterMid * index) / xAxisNoOfSections;
-          const unformattedXLabel = getXLabel(index);
-          const xLabel = formatXAxisLabels
-            ? formatXAxisLabels(unformattedXLabel)
-            : unformattedXLabel;
-          return (
-            <Fragment key={'x-axis' + index}>
-              {showVerticalLines ? (
-                <Line {...verticalLinesCommonProps} x1={x} x2={x} />
-              ) : null}
-              {showXAxisIndices ? (
-                <Line {...xAxisIndicesCommonProps} x1={x} x2={x} />
-              ) : null}
-              {showXAxisLabelTexts ? (
-                <SvgText
-                  {...xAxisLabelsCommonProps}
-                  x={x + xAxisLabelShiftX}
-                  textAnchor="middle">
-                  {xAxisLabelPrefix + xLabel + xAxisLabelSuffix}
-                </SvgText>
-              ) : null}
-            </Fragment>
-          );
-        })}
-
-        {/**************        Bars          ************/}
-        {data.map((item, index) => {
-          const leftWidth = item.left * barWidthFactor;
-          const rightWidth = item.right * barWidthFactor;
-          const y = stepHeight * index + verticalMarginBetweenBars;
-
-          const leftSurplusWidth = leftWidth - rightWidth;
-          const rightSurplusWidth = rightWidth - leftWidth;
-          const leftRadius =
-            item.leftBarBorderRadius ??
-            item.barBorderRadius ??
-            leftBarBorderRadius;
-          const rightRadius =
-            item.rightBarBorderRadius ??
-            item.barBorderRadius ??
-            rightBarBorderRadius;
-
-          const leftBorderWidth =
-            item.leftBarBorderWidth ??
-            item.barBorderWidth ??
-            leftBarBorderWidth;
-          const rightBorderWidth =
-            item.rightBarBorderWidth ??
-            item.barBorderWidth ??
-            rightBarBorderWidth;
-
-          const unFormattedLeftBarLabel =
-            item.leftBarLabel ??
-            (showValuesAsBarLabels ? item.left.toString() : '');
-          const leftBarLabel = formatBarLabels
-            ? formatBarLabels(unFormattedLeftBarLabel)
-            : unFormattedLeftBarLabel;
-
-          const unFormattedRightBarLabel =
-            item.rightBarLabel ??
-            (showValuesAsBarLabels ? item.right.toString() : '');
-          const rightBarLabel = formatBarLabels
-            ? formatBarLabels(unFormattedRightBarLabel)
-            : unFormattedRightBarLabel;
-
-          const leftLabelFontSize =
-            item.leftBarLabelFontSize ?? leftBarLabelFontSize;
-
-          const leftLabelX =
-            leftXAfterMid -
-            leftWidth -
-            leftBarBorderWidth / 2 -
-            yAxisLabelWidth / 2 -
-            leftBarLabelWidth / 2 +
-            28 -
-            (leftBarLabel.length * leftLabelFontSize) / 2 +
-            (item.leftBarLabelShift ?? props.leftBarLabelShift ?? 0);
-
-          const rightLabelX =
-            rightXAfterMid +
-            rightBarBorderWidth / 2 +
-            rightWidth +
-            3 +
-            (item.rightBarLabelShift ?? props.rightBarLabelShift ?? 0);
-
-          const leftBarCommonProps = {
-            x: leftXAfterMid - leftWidth - leftBarBorderWidth / 2,
-            y: y,
-            width: leftWidth,
-            height: stepHeight - verticalMarginBetweenBars * 2,
-            rx: leftRadius,
-            ry: leftRadius,
-          };
-          const rightBarCommonProps = {
-            x: rightXAfterMid + rightBarBorderWidth / 2,
-            y: y,
-            width: rightWidth,
-            height: stepHeight - verticalMarginBetweenBars * 2,
-            rx: rightRadius,
-            ry: rightRadius,
-          };
-          return (
-            <Fragment key={'bars' + index}>
-              {/**************     Y-Axis Labels      ************/}
-              {barsMapToYAxisSections ? (
-                <SvgText
-                  x={yAxisLabelWidth - yAxisLabelTextMarginRight}
-                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
-                  stroke={yAxisLabelColor}
-                  fontSize={yAxisLabelFontSize}
-                  fontStyle={yAxisLabelFontStyle}
-                  fontWeight={yAxisLabelFontWeight}
-                  fontFamily={yAxisLabelFontFamily}
-                  textAnchor="end">
-                  {item.yAxisLabel ?? yAxisLabelTexts[index] ?? ''}
-                </SvgText>
-              ) : null}
-
-              {/**************     Left Bars      ************/}
-              <Rect
-                {...leftBarCommonProps}
-                fill={item.leftBarColor ?? leftBarColor}
-                stroke={item.leftBarBorderColor ?? leftBarBorderColor}
-                strokeWidth={leftBorderWidth}
-              />
-              <ClipPath id={'cp-left' + index}>
-                <Rect {...leftBarCommonProps} />
-              </ClipPath>
-              {/*********   Hide inner border-radius ********/}
-              {!allCornersRounded && leftWidth >= leftRadius ? (
-                <>
-                  <Rect
-                    x={leftXAfterMid - leftRadius}
-                    y={y}
-                    width={leftRadius}
-                    height={stepHeight - verticalMarginBetweenBars * 2}
-                    fill={item.leftBarColor ?? leftBarColor}
-                  />
-                  {/*********   work-around for border ********/}
-                  {leftBorderWidth ? (
-                    <>
-                      <Line
-                        x1={leftXAfterMid - leftRadius}
-                        y1={y}
-                        x2={leftXAfterMid}
-                        y2={y}
-                        stroke={item.leftBarBorderColor ?? leftBarBorderColor}
-                        strokeWidth={leftBorderWidth}
-                      />
-                      <Line
-                        x1={leftXAfterMid - leftRadius}
-                        y1={y + stepHeight - verticalMarginBetweenBars * 2}
-                        x2={leftXAfterMid}
-                        y2={y + stepHeight - verticalMarginBetweenBars * 2}
-                        stroke={item.leftBarBorderColor ?? leftBarBorderColor}
-                        strokeWidth={leftBorderWidth}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : null}
-
-              {/**************     Left Bar Labels      ************/}
-              {leftBarLabel !== '' ? (
-                <SvgText
-                  x={leftLabelX}
-                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
-                  stroke={item.leftBarLabelColor ?? leftBarLabelColor}
-                  fontSize={leftLabelFontSize}
-                  fontStyle={
-                    item.leftBarLabelFontStyle ?? leftBarLabelFontStyle
-                  }
-                  fontWeight={
-                    item.leftBarLabelFontWeight ?? leftBarLabelFontWeight
-                  }
-                  fontFamily={
-                    item.leftBarLabelFontFamily ?? leftBarLabelFontFamily
-                  }
-                  textAnchor="start">
-                  {leftBarLabelPrefix + leftBarLabel + leftBarLabelSuffix}
-                </SvgText>
-              ) : null}
-
-              {/**************     Right Bars      ************/}
-              <Rect
-                {...rightBarCommonProps}
-                fill={item.rightBarColor ?? rightBarColor}
-                stroke={item.rightBarBorderColor ?? rightBarBorderColor}
-                strokeWidth={rightBorderWidth}
-              />
-              <ClipPath id={'cp-right' + index}>
-                <Rect {...rightBarCommonProps} />
-              </ClipPath>
-              {/*********   Hide inner border-radius ********/}
-              {!allCornersRounded && rightWidth >= rightRadius ? (
-                <>
-                  <Rect
-                    x={rightXAfterMid}
-                    y={y}
-                    width={rightRadius}
-                    height={stepHeight - verticalMarginBetweenBars * 2}
-                    fill={item.rightBarColor ?? rightBarColor}
-                  />
-                  {/*********   work-around for border ********/}
-                  {rightBorderWidth ? (
-                    <>
-                      <Line
-                        x1={rightXAfterMid}
-                        y1={y}
-                        x2={rightXAfterMid + rightRadius}
-                        y2={y}
-                        stroke={item.rightBarBorderColor ?? rightBarBorderColor}
-                        strokeWidth={rightBorderWidth}
-                      />
-                      <Line
-                        x1={rightXAfterMid}
-                        y1={y + stepHeight - verticalMarginBetweenBars * 2}
-                        x2={rightXAfterMid + rightRadius}
-                        y2={y + stepHeight - verticalMarginBetweenBars * 2}
-                        stroke={item.rightBarBorderColor ?? rightBarBorderColor}
-                        strokeWidth={rightBorderWidth}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : null}
-
-              {/**************     Right Bar Labels      ************/}
-              {rightBarLabel !== '' ? (
-                <SvgText
-                  x={rightLabelX}
-                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
-                  stroke={item.rightBarLabelColor ?? rightBarLabelColor}
-                  fontSize={item.rightBarLabelFontSize ?? rightBarLabelFontSize}
-                  fontStyle={
-                    item.rightBarLabelFontStyle ?? rightBarLabelFontStyle
-                  }
-                  fontWeight={
-                    item.rightBarLabelFontWeight ?? rightBarLabelFontWeight
-                  }
-                  fontFamily={
-                    item.rightBarLabelFontFamily ?? rightBarLabelFontFamily
-                  }
-                  textAnchor="start">
-                  {rightBarLabelPrefix + rightBarLabel + rightBarLabelSuffix}
-                </SvgText>
-              ) : null}
-
-              {/**************     Left Surplus      ************/}
-              {(showSurplus ||
-                showSurplusLeft ||
-                item.showSurplus ||
-                item.showSurplusLeft) &&
-              leftSurplusWidth > 0 ? (
-                <>
-                  <Rect
-                    id={'l-spls' + index}
-                    x={leftXAfterMid - leftWidth - leftBarBorderWidth / 2}
-                    y={y}
-                    width={leftSurplusWidth}
-                    height={stepHeight - verticalMarginBetweenBars * 2}
-                    stroke={
-                      item.leftSurplusBorderColor ?? leftSurplusBorderColor
-                    }
-                    strokeWidth={
-                      item.leftSurplusBorderWidth ?? leftSurplusBorderWidth
-                    }
-                  />
-                  <Use
-                    fill={item.leftSurplusColor ?? leftSurplusColor}
-                    clipPath={'#cp-left' + index}
-                    href={'#l-spls' + index}
-                  />
-                  {/*********      remove inner curve     ********/}
-                  {leftSurplusWidth >= leftRadius ? (
-                    <>
-                      <Rect
-                        id={'hide-in-left' + index}
-                        x={
-                          leftXAfterMid -
-                          leftWidth -
-                          leftBarBorderWidth +
-                          leftSurplusWidth -
-                          leftRadius
-                        }
-                        y={y}
-                        width={leftRadius}
-                        height={stepHeight - verticalMarginBetweenBars * 2}
-                      />
-                      <Use
-                        fill={item.leftSurplusColor ?? leftSurplusColor}
-                        clipPath={`url(#cp-left${index})`}
-                        href={'#hide-in-left' + index}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : null}
-              {/**************     Right Surplus      ************/}
-              {(showSurplus ||
-                showSurplusRight ||
-                item.showSurplus ||
-                item.showSurplusRight) &&
-              rightSurplusWidth > 0 ? (
-                <>
-                  <Rect
-                    id={'r-spls' + index}
-                    x={
-                      rightXAfterMid +
-                      rightBarBorderWidth / 2 +
-                      rightWidth -
-                      rightSurplusWidth
-                    }
-                    y={y}
-                    width={rightSurplusWidth}
-                    height={stepHeight - verticalMarginBetweenBars * 2}
-                    stroke={
-                      item.rightSurplusBorderColor ?? rightSurplusBorderColor
-                    }
-                    strokeWidth={
-                      item.rightSurplusBorderWidth ?? rightSurplusBorderWidth
-                    }
-                  />
-                  <Use
-                    fill={item.rightSurplusColor ?? rightSurplusColor}
-                    clipPath={'#cp-right' + index}
-                    href={'#r-spls' + index}
-                  />
-                  {/*********       remove inner curve     ********/}
-                  {rightSurplusWidth >= rightRadius ? (
-                    <>
-                      <Rect
-                        id={'hide-in-right' + index}
-                        x={
-                          rightXAfterMid +
-                          rightBarBorderWidth / 2 +
-                          rightWidth -
-                          rightSurplusWidth
-                        }
-                        y={y}
-                        width={rightRadius}
-                        height={stepHeight - verticalMarginBetweenBars * 2}
-                      />
-                      <Use
-                        fill={item.rightSurplusColor ?? rightSurplusColor}
-                        clipPath={`url(#cp-right${index})`}
-                        href={'#hide-in-right' + index}
-                      />
-                    </>
-                  ) : null}
-                </>
-              ) : null}
-            </Fragment>
-          );
-        })}
-
-        {/**************     Mid Axis      ************/}
-        {showMidAxis ? (
-          <>
-            <Line
-              {...midAxisLineCommonProps}
-              stroke={
-                props.midAxisLeftColor ?? props.midAxisColor ?? yAxisColor
-              }
-              x1={leftXAfterMid}
-              x2={leftXAfterMid}
-            />
-
-            <Line
-              {...midAxisLineCommonProps}
-              stroke={
-                props.midAxisRightColor ?? props.midAxisColor ?? yAxisColor
-              }
-              x1={rightXAfterMid}
-              x2={rightXAfterMid}
-            />
-
-            {data.map((item, index) => {
-              const y = stepHeight * (index + 0.5);
-              return (
-                <SvgText
-                  key={'ml' + index}
-                  x={mid}
-                  y={y + midAxisLabelFontSize / 2}
-                  stroke={item.midAxisLabelColor ?? midAxisLabelColor}
-                  fontSize={item.midAxisLabelFontSize ?? midAxisLabelFontSize}
-                  fontStyle={
-                    item.midAxisLabelFontStyle ?? midAxisLabelFontStyle
-                  }
-                  fontWeight={
-                    item.midAxisLabelFontWeight ?? midAxisLabelFontWeight
-                  }
-                  fontFamily={
-                    item.midAxisLabelFontFamily ?? midAxisLabelFontFamily
-                  }
-                  textAnchor="middle">
-                  {item.midAxisLabel ?? ''}
-                </SvgText>
-              );
-            })}
-          </>
-        ) : null}
-      </Svg>
-    </View>
-  );
-};

package/src/index.tsx

@@ -1,25 +0,0 @@
-export {BarChart} from './BarChart';
-export {PieChart} from './PieChart';
-export {PieChartPro} from './PieChartPro';
-export {LineChart} from './LineChart';
-export {LineChartBicolor} from './LineChart/LineChartBicolor';
-export {PopulationPyramid} from './PopulationPyramid';
-
-export {
-  barDataItem,
-  stackDataItem,
-  BarChartPropsType,
-  StackedBarChartPropsType,
-  pieDataItem,
-  PieChartPropsType,
-  lineDataItem,
-  bicolorLineDataItem,
-  LineChartPropsType,
-  LineChartBicolorPropsType,
-  popnPyramidDataItem,
-  PopulationPyramidPropsType,
-  chartTypes,
-  ruleTypes,
-  yAxisSides,
-  EdgePosition,
-} from 'gifted-charts-core';

package/src/todos.md

@@ -1,23 +0,0 @@
-## Features
-
-1. Issue with eslint - tsc https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/222
-
-## To-dos in documentation-
-
-1. Prepare a doc for Line chart with negative values
-2. Prepare a doc for gaps in data values https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/405 and https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/353
-3. Prepare a doc for Line chart with y axis on right side
-4. Prepare a doc for Line chart with gaps in the line https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/100
-5. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
-6. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
-7. Prepare a doc for labelsPosition in Pie and Donut charts
-8. Prepare a doc for adjustToWidth in Line and Area charts
-9. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
-10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
-11. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
-12. Add about endSpacing in docs
-
-## Architecture Enhancement
-
-1. Make it compliant with React js
-2. Write Snapshot tests for more example charts (snapshot tests for some charts are already written)

package/src/utils/index.ts

@@ -1,16 +0,0 @@
-import {Dimensions} from 'react-native';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const versionString = require('react-native/package.json').version;
-
-const versionAr = versionString?.split?.('.') ?? '';
-const msb = Number(versionAr[0]);
-const mid = Number(versionAr[1]);
-const lsb = Number(versionAr[2]);
-
-export const rnVersion =
-  (!isNaN(msb) ? msb : 0) * 1000000 +
-  (!isNaN(mid) ? mid : 0) * 10000 +
-  (!isNaN(lsb) ? lsb : 0);
-
-export const screenWidth = Dimensions.get('window').width;