React native Question posted in
The official React Native documentation can be found here.

How to set different colors for Top and Bottom in React Native SafeAreaView component?

The following approach seems like a good idea for changing the colors of safe areas. However, since I use TabNavigator and StackNavigator, I have difficulty implementing this approach. The bottom and top colors of each screen are different. So I need to create a dynamic structure. How can it be done?

    import { View, Text, SafeAreaView } from 'react-native';
    
    function App(){
      return(
        <View style={{ flex: 1 }}>
          <SafeAreaView style={{ flex: 0, backgroundColor: "red" }} />
          <SafeAreaView style={{ flex: 1, backgroundColor: "blue" }}>
            <View style={{ flex: 1, backgroundColor: "yellow", justifyContent: 'space-between', alignItems: 'center' }} >
                <Text>This is top text.</Text>
                <Text>This is bottom text.</Text>
            </View>
          </SafeAreaView>
    </View>
      )
    }
    
    export default App;

enter image description here

Navigation structure in my current app

    import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import { NavigationContainer } from "@react-navigation/native";
    import { createStackNavigator } from "@react-navigation/stack";
    
    import { TabBar } from "../components";
    
    import A from "../screens/A";
    import B from "../screens/B";
    import Detail from "../screens/Detail";
    
    function TabScreens() {
    
        const Tab = createBottomTabNavigator();
    
        return (
            <Tab.Navigator tabBar={props => <TabBar {...props} />} screenOptions={{ headerShown: false }}>
                <Tab.Screen name="a" component={A} />
                <Tab.Screen name="b" component={B} />
            </Tab.Navigator>
        );
    }
    
    function StackScreens() {
    
        const Stack = createStackNavigator();
        return (
            <NavigationContainer>
                <Stack.Navigator initialRouteName={"tabScreens"} screenOptions={{ headerShown: false, gestureEnabled: false }}>
                    <Stack.Screen name="tabScreens" component={TabScreens} />
                    <Stack.Screen name="detail" component={Detail} />
                </Stack.Navigator>
            </NavigationContainer>
        );
    }
    
    function App() {
        return <StackScreens />
    }
Tags:

2

Answers


  1. 0

    Create a reusable CustomScreen.js

        export default function CustomScreen({
      topColor,
      bottomColor,
      backgroundColor,
      style = { justifyContent: "space-between", alignItems: "center" },
      children,
    }) {
      return (
        <View style={{ flex: 1 }}>
          <SafeAreaView style={{ flex: 0, backgroundColor: topColor }} />

          <SafeAreaView style={{ flex: 1, backgroundColor: bottomColor }}>
            <View style={[{ flex: 1, backgroundColor }, style]}>
             {children}
            </View>
          </SafeAreaView>
        </View>
      );
    }

    import it where needed

        function OtherScreens() {
      return (
        <CustomScreen topColor="red" bottomColor="blue" backgroundColor="yellow">
          <Text>This is top text.</Text>
          <Text>This is bottom text.</Text>
        </CustomScreen>
      );
    }
    Login or Signup to reply.
  2. 0

    you could use background linear on the SafeAreaView.
    (not sure the support for it in reactNative tho)

      background: linear-gradient(
    to top,
    topColor 0%,
    topColor 50%,
    bottomColor 50%,
    bottomColor 100%
  );

    edit: looks like you need a reactnativey workaround package to do it

    https://www.npmjs.com/package/react-native-linear-gradient

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search