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

React native – React-Native styles not getting appplied

React-Native styles are not getting applied in two screens, I already saved the changes but when it gets applie to one screen, the other one loses it’s style. Here is the code :

import { render } from 'react-dom';
import {NavigationContainer} from '@react-navigation/native'
import { TextInput } from 'react-native-gesture-handler';
const width = Dimensions.get('window').width
const heigth = Dimensions.get('window').height
styles = StyleSheet.create({
    Container:{
        flex:1,
        width: '100%',
        width: width -20,
        height:heigth - 10,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    ViewContainer:{
      width: width -40,
      flex:1,
      alignItems: 'center',
      backgroundColor: '#F5FCFF'
    },
    input:{
      borderBottomColor: '#F5FCFF',
      backgroundColor: '#FFFFFF',
      borderRadius:30,
      borderBottomWidth: 1,
      paddingLeft: 8,
      width:250,
      height:45,
      marginBottom:8,
      marginTop:20,
      flexDirection: 'row',
      alignItems:'center',
      marginLeft:40
  },
    Button:{
      width:"80px",
      height:"30px",
      margin:100,
      justifyContent:'flex-end',
      alignItems: "flex-end",
    },
    buttonContainer: {
      height:65,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom:20,
      width:250,
      borderRadius:30,
      marginLeft:70
    },
    Container:{
      flex:1,
      justifyContent:"flex-end",
      alignItems: "flex-end",
    },
})

and the other one here:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { render } from 'react-dom';
import {NavigationContainer} from '@react-navigation/native'
import { TextInput } from 'react-native-gesture-handler';
import { getPermissionsAsync } from 'expo-location';
const width = Dimensions.get('window').width
const heigth = Dimensions.get('window').height


styles = StyleSheet.create({
    Container:{
        flex:1,
        width: width -20,
        height:heigth-30,
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    input:{
        marginTop: heigth/4,
        margin: 20,
        borderBottomColor: '#F5FCFF',
        backgroundColor: '#FFFFFF',
        borderRadius:30,
        borderBottomWidth: 1,
        width:250,
        height:45,
        marginBottom:20,
        flexDirection: 'row',
        alignItems:'center',
        marginLeft:70
      
    },
    Button:{
      height:45,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom:20,
        width:250,
        borderRadius:60,
        borderBottomWidth: 1,
        marginTop:90,
        marginLeft:70
    },
    Button2:{
      flex:1,
      height:20,
      borderRadius:60,
      borderBottomWidth: 1,
      width:30,
      color:'#f0f8ff',
      alignSelf:'flex-end',
      borderStyle: 'dashed'
    }
})

I’m using stack navigation and think that it migth be the problem, here is the code:
function Tabnav() {

  return(
   <Tab.Navigator 
   screenOptions={{
    tabBarActiveTintColor: '#101010',
    TabBarLabelStyle: {
      fontSize: 15,
    },
    TabBarStyle: {
      backgroundColor: '#ffd700',
    
    }
  }}
 >
     <Tab.Screen name="Homescreen" component={Home} 
     options={{
      headerShown: false,
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-home" color={color} size={size} />
      )
    }}/>

     <Tab.Screen name="Perfil" component={userProfile}
     options={{
      headerShown: false,
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="ios-person" size={size} color={color} />
      )
    }}/>
    
   </Tab.Navigator> 
    
  );
}

 export default function App(){
   

    return (
      
      <NavigationContainer initialRouteName="Signin">
        <Stack.Navigator>
          <Stack.Screen name="Signin" component={Signin} />
          <Stack.Screen name="Register" component={Register}/>
          <Stack.Screen name="Forgotpass" component={Forgotpass}/>
          <Stack.Screen name="Reset" component={Reset}/>
          <Stack.Screen name="Home" component={Tabnav} options={{headerLeft:()=>null, gestureEnabled: false,}}/>
          <Stack.Screen name="Dermatologistas" component={Dermatologistas}/>
          <Stack.Screen name="Hospitais" component={Hospitais}/>
          <Stack.Screen name="Cardiologista" component={Cardiologista}/>
          <Stack.Screen name="Pneumologista" component={Pneumologista}/>
          <Stack.Screen name="Odontologo" component={Odontologo}/>
          <Stack.Screen name="Oftalmologista" component={Oftalmologista}/>
          <Stack.Screen name="UserProfile" component={userProfile}/>
          <Stack.Screen name="Profile" component={Profile}/>
         
          <Stack.Screen name="Edit" component={Edit}/>
        </Stack.Navigator>
       
      </NavigationContainer>
          
     );
   }
Tags:

2

Answers


  1. 0

    Need to import StyleSheet from react-native

    import {StyleSheet, View, Text} from "react-native";
    Login or Signup to reply.
  2. 0

    you have for got the const keyword.
    const styles = StyleSheet.create({

    you have forgot to import StyleSheet so this may be another Problem.

    if the StyleSheet is declare in separate file you must have to export it like this

    export default styles or export {styles}

    to use styles in the other files . if you do export default styles like this then import like this

    import styles from "../your/directroy/to/styles/"

    if you export like this

    export {styles}

    then import like this

    import {styles} from "../your/directroy/to/styles/"

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

Back To Top
Search