wcandillon / react-native-redash

The React Native Reanimated and Gesture Handler Toolbelt
https://wcandillon.gitbook.io/redash/
MIT License
1.95k stars 118 forks source link

ReText component issue on expo 35 sdk #102

Open aalbaharnah opened 4 years ago

aalbaharnah commented 4 years ago

I'm having trouble rendering ReText component. Any suggestion for a work around to render an animated Value as a string?

<ReText text={new Value("hello world")} style={{ color: "blue" }} />

Screenshot_2019-09-25-09-19-24-888

` { "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "eject": "expo eject" }, "dependencies": { "@expo/vector-icons": "^10.0.5", "d3": "^5.9.2", "d3-scale": "^3.0.0", "d3-shape": "^1.3.5", "expo": "^35.0.0", "expo-asset": "^7.0.0", "expo-constants": "^7.0.0", "expo-image-picker": "^7.0.0", "native-base": "^2.12.1", "react": "16.8.3", "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", "react-native-animatable": "^1.3.2", "react-native-calendars": "^1.196.0", "react-native-gesture-handler": "^1.3.0", "react-native-reanimated": "^1.1.0", "react-native-redash": "^5.1.0", "react-native-signalr": "^1.0.6", "react-native-svg": "^9.5.1", "react-navigation": "^4.0.6", "react-navigation-drawer": "^2.2.2", "react-navigation-stack": "^1.8.1", "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-axios-middleware": "^4.0.0", "redux-persist": "^5.10.0", "rn-snoopy": "^2.0.2", "svg-path-properties": "^0.4.9" }, "devDependencies": { "babel-preset-expo": "^5.0.0" }, "private": true }

`

alexanderwallin commented 4 years ago

We get this in standalone React Native 0.59 too. Using react-native-redash 8.0.0. iOS handles both raw val and the string template well.

const translationX = new Value(0);
const val = floor(
  interpolate(translationX, {
    inputRange: [0, WINDOW_WIDTH],
    outputRange: [1, 10],
    extrapolate: Extrapolate.CLAMP,
  })
);

<ReText text={string`${val}`} style={styles.thingy} />