In a React Native application, how can I dynamically change the background color of the background behind the views?

Question

I'm building an iOS app using react native. Using react-navigation, I open a screen using the 'modal' option. This is a common behavior for iOS applications to open a screen in a modal which animates the screen on top of the current screen, but also moves both screens down so there is a gap at the top and it reveals a black background behind the two screens. For my app, I'd like to dynamically change the color of this background to say a red, green or blue while the app is running. How do I do this in react native using react native or react-navigation apis?

Answer 1

work for me

import React, { useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';

const App = () => {
  const [bgColor, setBgColor] = useState('white');  

  const changeBgColor = () => {
    const colors = ['red', 'green', 'blue', 'yellow'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    setBgColor(randomColor);
  }

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      <Button title="Change Background Color" onPress={changeBgColor} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;