Just add useNativeDriver: true to the animation config.

const [animatePress, setAnimatePress] = useState(new Animated.Value(1))

const animateIn = () => {
  Animated.timing(animatePress, {
    toValue: 0.5,
    duration: 500,
    useNativeDriver: true // Add This line
  }).start();
}

UPDATED

Solution:

As the warning says, we need to specify the useNativeDriver option explicitly and set it to true or false .

1- Animation methods

Refer to Animated doc , with animation types or composition functions, for example, Animated.decay(), Animated.timing(), Animated.spring(), Animated.parallel(), Animated.sequence(), specify useNativeDriver .

Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Add this line
}).start();

2- Animatable components

Animated exports the following animatable components using the above wrapper:

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

When working with Animated.event() , add useNativeDriver: false/true to the animation config.

<Animated.ScrollView
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // Add this line
  )}
>
  {content}
</Animated.ScrollView>

Facing the same issue for a long time and still no update from native-base developers yet in 2021.

Meanwhile use a workaround to avoid irritating yellow warnings of useNativeDriver.

UPDATE RN V0.63 ABOVE

YellowBox is now changed and replace with LogBox

FUNCTIONAL

import React, { useEffect } from 'react';
import { LogBox } from 'react-native';

useEffect(() => {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}, [])

CLASS BASED

import React from 'react';
import { LogBox } from 'react-native';

componentDidMount() {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}

UPDATE RN V0.63 BELOW

FUNCTIONAL

import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}, [])

CLASS BASED

import React from 'react';
import { YellowBox } from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}

Seem to be a known bug of current nativebase.io Release: https://github.com/GeekyAnts/NativeBase/issues/3109

Additional Info, what exactly the issue is about: https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app

use the following code to avoid the warning message of usenativedriver

  Animated.timing(new Animated.Value(0), 
        {
          toValue: 1,
          duration: 500,
          easing: Easing.linear,
          useNativeDriver: false //make it as false
        }).start();

When using Animated.spring or any other Animation specify useNativeDriver: true of useNativeDriver: false.

Example:

Animated.spring(this.position, {
    toValue: { x: 0, y: 0 },
    useNativeDriver: true,
}).start();

The Animated.spring is being called in onPanResponderRelease function.

In react native SDK 39 you have to write following code:

LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);

native-base fixed this as of January. Get at least v2.15.2

yarn add native-base@^2.15.2

Release notes: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2

It will mostly be a matter of finding all instances of Animated.timing or Animated.spring and adding useNativeDriver: true to the config.

Using class Component just add the Animated.timing inside componentDidMount() and define useNativeDriver as true or false

class App extends Component {

    animatedValue = new Animated.Value(0);

    componentDidMount() {
        Animated.timing(this.animatedValue,
            {
                toValue: 1,
                duration: 1000,
                useNativeDriver: true
            }).start();
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.squareBG}/>
                <Animated.View style={[styles.square, {opacity: this.animatedValue}]}/>
            </View>
        );
    }
}

I just added this in my App.js and worked for me :)

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Animated: `useNativeDriver` was not specified.',
]);

if you using useeffect put inside useeffect

working for me

LogBox.ignoreLogs(['Animated: `useNativeDriver`']);

just search animated.timing on folder ~\node_modules\native-base\dist\src\basic\ and add manually useNativeDriver: true or false