search

oblador / react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
MIT License
2.82k stars 502 forks source link

UseNativeDriver is now a required prop for Animated #136

Closed tClelford closed 2 months ago

tClelford commented 4 years ago

See the React dev blog. Currently this is an annoying warning but might actually break something in the future

https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated

repro steps:

tClelford commented 3 years ago

Looks like there's an underlying issue which needs fixing first: https://github.com/react-native-community/react-native-modal/issues/163

SeanRenet commented 3 years ago

This is what worked for me. ` import React, { useEffect, useRef } from "react"; import { Animated, StyleSheet, View, } from 'react-native'

const Ball = (props)=>{ const position = useRef(new Animated.ValueXY(0, 0)).current; useEffect(() => { Animated.spring(position, { toValue: { x: 200, y: 500}, friction: 1, useNativeDriver: true, }).start(); }, []);

return (
    <Animated.View style={{  transform: position.getTranslateTransform()  }}>
        <View style={styles.ball}/>
    </Animated.View>  
)

}

const styles = StyleSheet.create({

ball: { height: 60, width: 60, borderRadius: 30, borderWidth: 30, backgroundColor: '#3a78cf', color: 'blue', }, });

export default Ball `

gustawdaniel-acaisoft commented 2 years ago

To hide this warning

import {LogBox} from 'react-native';

LogBox.ignoreLogs(['Animated.event now requires a second argument for options']);

Context:

By default there is used {nativeDriver: false} so our code will work. There is patch in neact-native-gifted-chat that was described in. https://github.com/FaridSafi/react-native-gifted-chat/issues/2124 https://github.com/FaridSafi/react-native-gifted-chat/issues/1924

There is patch for this lib https://github.com/FaridSafi/react-native-gifted-chat/issues/1825#issuecomment-718463680