Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false` #31

Question

I am using React-Native-Draggable-View to add a slider into my app, but every time I touch the slider, the above error pops up. When troubleshooting, it claims to have something to do with animation/animated view, but I do not have an animated view in my code. I went further into the docs, and there is no mention of an animated view being required. I used hooks, and the docs use class format, so I am struggling to determine where/how I implement it. Below is what I have so far.

import React, { useState, useEffect, Component }from "react";
import {Alert, Dimensions, Platform, StyleSheet, Text, View, Button, TouchableOpacity, TouchableHighlight, SafeAreaView, ScrollView, ActivityIndicator, StatusBar} from "react-native";
import {ListScreen} from './ListScreen
import {CheckScreen} from './CheckScreen'
import Drawer from 'react-native-draggable-view'



function RunningScreen({navigation}) {
...

return(

...


<Drawer
    initialDrawerSize={0.3}
    finalDrawerHeight={0.5}

    //autoDrawerUp={0.5}
    renderContainerView={() => (
      <ListScreen navigation = {navigation} 

      
      />
    )}
    renderDrawerView={() => (
      
      <RunningScreen navigation = {navigation} />
    )}
      renderInitDrawerView={() => (
        <View style = {{alignItems: 'center'}}>
        <View style={{backgroundColor: '#d3d3d3', height: height*0.01, width: width*0.2, alignItems: 'center'}}>
        <StatusBar hidden={false} />
        </View>
        </View>

  )}

/>
    )
    }

...

export {RunningScreen}

Answer 1

You are using the Library "react-native-draggable-view" which doesn't have useNativeDriver true or false So you need to open the library and apply "useNativeDriver: false" in the Animated.timing.

Before :

 Animated.timing(position, {
        toValue: endPosition,
        tension: 30,
        friction: 0,
        velocity: velocityY
    }).start();

After :

 Animated.timing(position, {
        toValue: endPosition,
        tension: 30,
        friction: 0,
        velocity: velocityY,
        useNativeDriver: false
    }).start();

Answer 2

You're seeing this because react-native-draggable-view hasn't been updated in 3 years and you're using a newer version of react-native. Specifically, > 0.62 where specifying useNativeDriver is required. I'm guessing this is the offending Animated.timing call from the library. I would edit that block from node_modules/react-native-draggable-view/index.js to be

Animated.timing(position, {
  toValue: endPosition,
  tension: 30,
  friction: 0,
  velocity: velocityY,
  useNativeDriver: false,
}).start();

and see if the error goes away. If it does then you could patch the package to include that fix. You can patch with patch-package or yarn if you're using yarn v2.

Answer 3

<Carousel
    layout={'tinder'}
    autoplay
    autoplayTimeout={5000}
    loop
    index={0}
    pageSize={BannerWidth}
>
    {images.map((image, index) => this.renderPage(image, index))}
</Carousel>