How to change navigation bar on android with RN with expo?

When developing apps with Expo and React Native, adjusting the Android navigation bar (specifically the bottom navigation bar that includes the back button, home button, and recent apps button) can enhance user experience and align the app with your design requirements.

Changing the color and style of the Android navigation bar in Expo can be achieved using the expo-navigation-bar module. First, ensure that this module is installed. If not, you can install it by running the following command:

bash
expo install expo-navigation-bar

After installation, you can import and use this module in your React Native project to customize the navigation bar's appearance. Here is a basic example:

javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as NavigationBar from 'expo-navigation-bar';

export default function App() {
  React.useEffect(() => {
    // Set navigation bar color
    NavigationBar.setBackgroundColorAsync('#000000');
    
    // Set navigation bar button style
    NavigationBar.setButtonStyleAsync('light');
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
});

In this example, the setBackgroundColorAsync function is used to set the background color of the navigation bar, while the setButtonStyleAsync function is used to set the style of the navigation bar buttons (light or dark). These functions are asynchronous and return a Promise, which you can handle using .then() and .catch().

By doing this, you can easily customize the appearance of the Android navigation bar to better integrate with the overall design of your app. This is very helpful for enhancing user experience and maintaining UI consistency.