Conditional styling not working as intended

Creating tabs always works well in React and this is working when opening in a browser, but the 'tabActive' styling is not removed when another tab gets clicked. 'tabActive' styling is getting applied onPress to other tabs, but none of them are getting removed afterwards. This seems really unusual behaviour that I haven't experienced before. How can I fix this?

import React, { useState } from 'react';
import { View, Text, StyleSheet, Pressable, ScrollView, Dimensions } from 'react-native';
import Header from './Header';
import FAB from './FAB';
// Import Tabs styles
import { Tabs } from '../Styles';

export default function Jobs({ navigation }) {

  const [activeTab, setActiveTab] = useState("All Jobs");

  return (
    <>
      <Header screen="Jobs" />
      <View style={styles.container}>
        <View style={Tabs.container}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            bounces={false} // iOS
            overScrollMode="never" // Android
          >
            {["All Jobs", "Your Posted Jobs", "Active Jobs"].map((tabTitle) => (
              <Pressable
              key={tabTitle}
              style={activeTab == tabTitle ? styles.tabActive : styles.tab}
              onPress={() => setActiveTab(tabTitle)}
            >
                <Text style={Tabs.tabTxt}>{tabTitle}</Text>
              </Pressable>
            ))}
          </ScrollView>
        </View>
      </View>
      <FAB navigation={navigation} />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  tabActive:{
    height: 50,
    backgroundColor: '#dfdfdf',
    paddingVertical: 10,
    paddingHorizontal: 20,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 2
},
tab:{
    height: 50,
    backgroundColor: 'unset',
    paddingVertical: 10,
    paddingHorizontal: 20,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 2
},
});

Imported styles:

import { Dimensions } from "react-native"

let screenWidth = Dimensions.get('window').width

//Tabs
export const Tabs = {
    container: {
        width: screenWidth * 0.9,
        height: 70,
        marginHorizontal: screenWidth* 0.05,
        borderWidth: 1,
        borderColor: '#f1f1f1',
        borderRadius: 8,
        flexDirection: 'row',
        alignItems:'center',
        overflow: 'scroll'
    },
    tabActive:{
        height: 50,
        backgroundColor: '#dfdfdf',
        paddingVertical: 10,
        paddingHorizontal: 20,
        margin: 10,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 2
    },
    tab:{
        height: 50,
        backgroundColor: 'unset',
        paddingVertical: 10,
        paddingHorizontal: 20,
        margin: 10,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 2
    },
    tabTxt:{
        fontFamily: 'Satoshi',
        fontSize: 16,
        color: '#071B26'
    }
}

I've tried rewriting the styling in multiple ways and even using functions to return styling, but nothing seems to be changing the outcome of the active style being removed. I have cleared the cache in Expo and again nothing has changed. I am using Expo Go on Apple 13 mini and have opening in IOS simulator and browser. Only the browser is giving me the expected behaviour.

Solution

Sometimes string comparison return unexpected results. i think it is better to use some function instead of == Here you have the code:

style={activeTab.localeCompare(tabTitle) === 0 ? styles.tabActive : styles.tab}

I hope that helps!

Edit!

Maybe you can try to change the background insted of unset it:

backgroundColor: '#fff',

backgroundColor: 'transparent',