CODEWITHSUNDEEP
react-nativereact-native-navigation
Ruby Midford
Ruby Midford

Reputation: 3

How do I keep react navigation from turning the background of my component grey?

Whenever I add a component to a react navigation navigator, the background always turns grey (and some other styles change too but the background is my main issue). Why does it do this and how can I stop it? Here is one example:

import EventList from "../screens/EventList";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

function Tabs(props) {
    const Tabs = createBottomTabNavigator();

    return(<Tabs.Navigator
        screenOptions={{
            tabBarStyle: { backgroundColor: 'white' },
            headerShown: false,
        }}>
        <Tabs.Screen name="EventList" component={EventList} options={{
                title: "Events",
                tabBarLabel: () => null,
                headerShown: false,
                tabBarIcon: ({ color, size }) => (
                    <MaterialCommunityIcons name="calendar-multiple-check" color={color} size={size} />)
                }} />
    </Tabs.Navigator>)
}

export default Tabs;

import { useState, useContext } from "react";
import { Text, View, TextInput, Pressable, TouchableWithoutFeedback, StyleSheet, TouchableOpacity, Keyboard, Image } from "react-native";

function EventList(props) {

    return(<View style={styles.page}>
        <Text>Hi</Text>
    </View>)
}

const styles = StyleSheet.create({
    page: {
        margin: 'auto',
        backgroundColor: 'white',
    }
});

export default EventList;

What my phone looks like

Upvotes: 0

Views: 29

Answers (1)

satya164
satya164

Reputation: 10152

You can change default colors with a theme. Example:

import {
  NavigationContainer,
  DefaultTheme,
} from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'white',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>
      {/* your code *}
    </NavigationContainer>
  );
}

https://reactnavigation.org/docs/themes

Upvotes: 0

Related Questions