Using default value for function parameter.

[DiegoGielda]

Hello, thank you for making this incredible library available.
I started refactoring and found a situation that I'm in doubt about. Do I have the possibility of assigning a default color value to the component parameters?

I'm trying to use colorBar = theme.colors.progressBar.default, but the following error appears

Component example:

import React, { useState, useEffect } from "react";
import { View, Text, ColorValue } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
import { useStyles } from "react-native-unistyles";
import stylesSheet from "./styles";

type ProgressBarProps = {
  title: string;
  startValue: number;
  endValue?: number;
  current?: string;
  goal?: string;
  lack?: string;
  colorBar?: ColorValue;
};

const { theme } = useStyles();

const ProgressBar = (
  {
    title,
    startValue,
    endValue = 100,
    current, goal,
    lack,
    colorBar = theme.colors.progressBar.default,
  }: ProgressBarProps) => {
  const { styles } = useStyles(stylesSheet);
  const animated = useSharedValue(0);
  const [width, setWidth] = useState(0);

  const progressBarAnimated = useAnimatedStyle(() => {
    return {
      transform: [{
        translateX: animated.value
      }],
      backgroundColor: colorBar,
    }
  });

  useEffect(() => {
    if (startValue <= endValue) {
      const growthProgressBarWidth = (-width + (width * startValue) / endValue);
      animated.value = withTiming(growthProgressBarWidth, { duration: 300 });
    } else {
      const growthProgressBarWidth = (-width + (width * endValue) / endValue);
      animated.value = withTiming(growthProgressBarWidth, { duration: 300 });
    }
  }, [startValue, width]);

  return <>
    <View style={styles.viewEdge}>
      <View style={styles.viewColumnTitle}>
        <Text style={styles.labelColumn}>{title}</Text>
        <View style={styles.viewColumnTitleResult}>
          <Text style={styles.labelColumn}>{current}</Text>
          <Text style={styles.labelColumn}>{goal}</Text>
          <Text style={styles.labelColumn}>{lack}</Text>
        </View>
      </View>

      <View style={styles.viewShadow}>
        <Animated.View
          style={[styles.viewProgressBar, progressBarAnimated]}
          onLayout={
            (event) => {
              const currentWidth = event.nativeEvent.layout.width;
              setWidth(currentWidth);
            }
          }
        />
      </View>
    </View >
  </>
};

export default ProgressBar;

respective style styles.ts

import { createStyleSheet } from "react-native-unistyles";

const stylesSheet = createStyleSheet((theme) => ({
  viewEdge: {
    width: "100%",
  },
  viewColumnTitle: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  viewColumnTitleResult: {
    flexDirection: "row",
    justifyContent: "space-between",    
    width: "55%",
  },
  labelColumn: {
    fontFamily: theme.fonts.main.regular,
    fontSize: theme.fonts.size.paragraphy,
    color: theme.colors.textLabel,
  },
  viewShadow: {
    width: "100%",
    height: 8,
    marginTop: "1%",
    borderRadius: 8,
    overflow: "hidden",
    backgroundColor: theme.colors.cardInfoBackground,
  },
  viewProgressBar: {
    width: "100%",
    height: 8,
    left: "0%",
    top: "0%",
    position: "absolute",
    borderRadius: 8,
  },
}));

export default stylesSheet;

[jpudysz]

Hello, you need to follow React rules. You can't run useStyles outside of the React component.

In order to fix it, you need to do something like this:

const ProgressBar = (
  {
     title,
     startValue,
     endValue = 100,
     current, 
     goal,
     lack,
     colorBar
  }: ProgressBarProps) => {
  const { styles, theme } = useStyles(stylesSheet);
  
const { styles } = useStyles(stylesSheet);
  const animated = useSharedValue(0);
  const [width, setWidth] = useState(0);

  const progressBarAnimated = useAnimatedStyle(() => {
    return {
      transform: [{
        translateX: animated.value
      }],
      backgroundColor: colorBar ?? theme.colors.progressBar.default,
    }
  });

}