Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6215

React-Native-Reanimated and React-native

$
0
0

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.Web app I`m getting expo error on my Xiaomi S2.S2 screen log.

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 errorObject.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'],            },        },    };};
  1. 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}
  1. 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.


Viewing all articles
Browse latest Browse all 6215

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>