Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

272
Views
The style of Tab.Navigator doesn't work - REACT

I am learning react-native and I am doing a tabBar to navigate between components but I have a problem.

The style for the shadow doesn't want to work, can anyone help me please ? especially line 27 : "...styles.shadow"

I tried to put it line 29 but it still the same

Thanks you

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { StyleSheet } from 'react-native';

import colors from '../conf/color'
import Joueurs from '../screens/Joueurs';
import Actus from '../screens/Actus';
import Ionicons from 'react-native-vector-icons/Ionicons';

//Some importations not really important, they can be replaced by anything

const Tab = createBottomTabNavigator();

const Tabs = () => {
    return(
      <Tab.Navigator
        screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        tabBarActiveTintColor: colors.white,
        tabBarStyle: { 
          position: 'absolute', 
          bottom: 25, 
          left: 20, 
          right: 20, 
          elevation: 0,
          height: 90,
          borderRadius: 15,
          backgroundColor: colors.grey, 
          ...styles.shadow //There is the problem
          },
          
        }}
      >
          <Tab.Screen name= 'Actus' component={Actus}  />
          <Tab.Screen name='Joueurs' component={Joueurs} />
      </Tab.Navigator>
    )
}

export default Tabs;

const styles = StyleSheet.create({
  shadow: {   //the style I defined
    shadowColor: 'red',
    shadowOfset: {
      width: 46,
      height: 10,
    },
    shadpwOpacity: 0.25,
    shadowRadius: 3.25,
    elevation: 5,
  }
})
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!