How to change background color in react-native?

Question

Please look this picture,I use createBottomTabNavigator to creat a Tabs in react-native,and both screens will use the same gradient background,so i add "backgroundColor: 'transparent'" in NavigationContainer,View and all the places i could think of, but it's background is still grey. How to solve this problem?

Here is the code:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MeshGradientView } from 'expo-mesh-gradient';
const Tab = createBottomTabNavigator();

const HomeScreen = () => (
  <View style={styles.screenContainer}>
    <Text style={styles.text}>Home Screen</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.screenContainer}>
    <Text style={styles.text}>Settings Screen</Text>
  </View>
);

export default function App() {
  return (
    <View style={styles.globalContainer}>
      <MeshGradientView
        style={styles.meshBg}
        columns={3}
        rows={3}
        colors={['red', 'purple', 'indigo', 'orange', 'white', 'blue', 'yellow', 'green', 'cyan']}
        points={[
          [0.0, 0.0],
          [0.5, 0.0],
          [1.0, 0.0],
          [0.0, 0.5],
          [0.5, 0.5],
          [1.0, 0.5],
          [0.0, 1.0],
          [0.5, 1.0],
          [1.0, 1.0],
        ]}
      />
      <NavigationContainer
        style={{ backgroundColor: 'transparent' }}
      >
        <Tab.Navigator
          style={{ backgroundColor: 'transparent' }}
          screenOptions={{
            tabBarStyle: { backgroundColor: 'transparent' },
            headerStyle: { backgroundColor: 'transparent' },
          }}
        >
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  meshBg: {
    flex: 1,
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
  },
  globalContainer: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  screenContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
});


"react-native": "0.76.7",
"@react-navigation/bottom-tabs": "^7.3.9",
"expo": "~52.0.40"

I tried out other versions and various methods, and I'm almost exhausted.😭😭

<Tab.Navigator style={{ backgroundColor: 'transparent' }} screenOptions={{ tabBarStyle: { backgroundColor: 'transparent' }, headerStyle: { backgroundColor: 'transparent' }, sceneContainerStyle: { backgroundColor: 'white' }, }} > can u try add sceneContainerStyle? To the Tab.Navigator screenOptions — Tomescu Mihail
– Tomescu Mihail, Commented Apr 12 at 11:03

Kunal Karnik · Accepted Answer · 2025-04-12 11:20:25Z

How I would approach this is, if there is a common style that is to be applied to multiple screens, I'll create a screen template for that.

Below code results in what you are looking for

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MeshGradientView } from 'expo-mesh-gradient';
const Tab = createBottomTabNavigator();

const ScreenTemplate = ({ children }) => (
  <>
    <MeshGradientView
      style={styles.meshBg}
      columns={3}
      rows={3}
      colors={[
        'red',
        'purple',
        'indigo',
        'orange',
        'white',
        'blue',
        'yellow',
        'green',
        'cyan',
      ]}
      points={[
        [0.0, 0.0],
        [0.5, 0.0],
        [1.0, 0.0],
        [0.0, 0.5],
        [0.5, 0.5],
        [1.0, 0.5],
        [0.0, 1.0],
        [0.5, 1.0],
        [1.0, 1.0],
      ]}
    />
    {children}
  </>
);

const HomeScreen = () => (
  <ScreenTemplate>
    <View style={styles.screenContainer}>
      <Text style={styles.text}>Home Screen</Text>
    </View>
  </ScreenTemplate>
);

const SettingsScreen = () => (
  <ScreenTemplate>
    <View style={styles.screenContainer}>
      <Text style={styles.text}>Settings Screen</Text>
    </View>
  </ScreenTemplate>
);

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarStyle: { position: 'absolute' },
          tabBarBackground: () => (
            <View style={{ backgroundColor: 'transparent' }} />
          ),
        }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  meshBg: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
  },
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
});

Hope this helps. PS : removed unnecessary views.

Thanks for you sharing，it looks perfect, but i still want to know why it's can't transparent.This is definitely achievable.

Collectives™ on Stack Overflow

How to change background color in react-native?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related