'How to fade out a splash screen in react native?

I would like to make a fade out effect in my splash screen, because it disappears at once right now.

I create the splash screen here:

public class MainActivity extends ReactActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashTheme, true);
    super.onCreate(savedInstanceState);
  }

...

}

And I hide the splash screen here:

const App = () => {

  changeNavigationBarColor('white', true, true);

  // HERE
  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    }, 3000);
  }, []);


  return (
     ...
  );
}

export default App;

I'm following this video tutorial, that uses this library.



Solution 1:[1]

There is no property like that in react-native-splash-screen. Simply you can't. But it supposes to fade out as I know. Maybe you can't see because of the emulator skipping some frames.

Solution 2:[2]

You can make use of this library which has argument called fade when executing hide function.

Simply do,

RNBootSplash.hide({ fade: true }); // fade

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mert Çal??kanyürek
Solution 2 Tarik