React-Native-Reanimated and React-native

Question

After creating minimal react-native app with expo and typescript i got a lot of strange errors:

1. App working on web but crashes with android. I`m getting expo error on my Xiaomi S2..

There is a code i'm starting (in final without router):

import React from 'react';
import { Button, StyleSheet, View  } from 'react-native';

const styles = StyleSheet.create({
    box: {
        width: '50px',
        height: '50px',
        backgroundColor: '#000000'
    }
})


export const SignInScreen = (): JSX.Element => {

    // const offset = useSharedValue(0);

    // const animatedStyles = useAnimatedStyle(() => {
    //   return {
    //     transform: [{ translateX: offset.value * 255 }],
    //   };
    // });
  
    return (
      <>
        {/* <Animated.View style={[styles.box]} /> */}
        <View style={[styles.box]} />
        <Button
          onPress={() => {
            // offset.value = withSpring(Math.random());
          }}
          title="Move"
        />
      </>
    );
};

2. With following code

const styles = StyleSheet.create({
    box: {
        width: '50px',
        height: '50px',
        backgroundColor: '#000000'
    }
})


export const SignInScreen = (): JSX.Element => {

    const offset = useSharedValue(0);

    const animatedStyles = useAnimatedStyle(() => {
      return {
        transform: [{ translateX: offset.value * 255 }],
      };
    });
  
    return (
      <>
        <Animated.View style={[styles.box]} />
        {/* <View style={[styles.box]} /> */}
        <Button
          onPress={() => {
            offset.value = withSpring(Math.random());
          }}
          title="Move"
        />
      </>
    );
};

i'm getting error Object.values requires that input parameter not be null or undefined

Also my configs:

1. babel

module.exports = (api) => {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            [
                'module-resolver',
                {
                    alias: {
                        assets: './src/assets',
                        components: './src/components',
                        navigation: './src/navigation',
                        screens: './src/screens',
                        store: './src/store',
                        themes: './src/themes',
                    },
                },
                'react-native-reanimated/plugin'
            ],
        ],
        env: {
            production: {
                plugins: ['react-native-paper/babel'],
            },
        },
    };
};

2. package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-anchor-point": "^1.0.1",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-paper": "^4.2.0",
    "react-native-reanimated": "^2.0.0-alpha.7",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-svg": "12.1.0",
    "react-native-web": "~0.13.12",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "@types/styled-components": "^5.1.4",
    "react-native-web": "~0.13.7",
    "typescript": "~3.9.5"
  },
  "private": true
}

3. tsconfig??

{
    "compilerOptions": {
        "baseUrl": "./src",
        "allowSyntheticDefaultImports": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noEmit": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "strict": true,
        "paths": {
            "assets": ["./src/assets"],
            "components": ["./src/components"],
            "navigation": ["./src/navigation"],
            "screens": ["./src/screens"],
            "store": ["./src/store"],
            "themes": ["./src/themes"],
        }
    }
}

Maybe someone know what can be wrong? Also can add full repo link.

Answer 1

Reanimated has just released a stable version. You can try this https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0