Warning from react-native-reanimated about using shared value

[sagihsh]

Hi! I am using your library in my Expo app. Recently I upgraded to Expo SDK 49 which among other things upgraded my react-native-reanimated to ~3.3.0 I am now getting a warning when using the MaterialTabs component, saying:

 WARN  It looks like you might be using shared value's .value inside reanimated inline style. If you want a component to update when shared value changes you should use the shared value directly instead of its current state represented by `.value`. See documentation here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations#animations-in-inline-styles 
    at Indicator (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:311211:19)
    at RCTScrollContentView
    at RCTScrollView
    at ScrollView (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:66218:36)
    at ScrollView
    at RCTView
    at View (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:64061:43)
    at StyledNativeComponent (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:308152:21)
    at Styled(View)
    at MaterialTabs (http://<my_ip>:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:302271:21)

If I comment out the MaterialTabs tag the warning disappears. P.S I am using the MaterialTabs component inside a @gorhom/bottom-sheet component, just mentioning in case it is related. Would love your help, thanks in advance :)

[LucasTrombim]

same here

[programminPete]

Just fyi @sagihsh, @LucasTrombim, I was getting warning as well, so was thinking of moving away, but ended up being a pretty easy patch to the package. (If you're ok to use npm patch-package and just patch the package)

If you go to their Indicator.tsx component (node_modules/react-native-material-tabs/src/components/Indicator.tsx) you just need to update the "transform: translateX" to be an interpolate on the value instead of the value itself:

previous: "translateX: props.value" --> translateX: props.value.interpolate(...)

const Indicator = (props: IndicatorProps) => (
  <Bar
    color={props.color}
    style={{ transform: [{
      translateX: props.value.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }),
    }]}}
    tabWidth={props.tabWidth}
    height={props.height}
  />
);

[iRoachie]

Hey @programminPete do you mind sending a PR to include this?