Touchable Opacity - v4.0.1

[saltxf]

When using the className prop on TouchableOpacity, the appearance does not change. However, when using regular CSS styles, the appearance changes as expected. This can be observed in the difference between image 1 using className and image 2 using regular CSS styles.

Code:

import {
  View,
  TouchableOpacity,
  Text,
  ImageBackground,
  TextInput,
  Platform,
  StatusBar as StatusBarReact,
} from 'react-native';
import '@/global.css';
import React from 'react';

import { MagnifyingGlassIcon } from 'react-native-heroicons/outline';

const index = () => {
  return (
    <View className='flex-1 relative '>
      <ImageBackground
        className={`flex-1 flex `}
        source={require('@/assets/images/bg.png')}
        resizeMode='cover'
        style={{
          paddingTop:
            Platform.OS === 'android' ? StatusBarReact.currentHeight : 0,
        }}
      >
        <View style={{ height: '10%' }} className='mx-4'>
          <View className='flex-row items-center rounded-full  bg-white'>
            <TextInput
              placeholder='Search city'
              placeholderTextColor={'gray'}
              className='pl-6 h-10 flex-1 text-base text-white'
            />
            <TouchableOpacity
              onPress={() => {}}
              // className={'rounded-full p-3 m-1 bg-blue-600'}
              style={{
                backgroundColor: '#1E90FF',
                borderRadius: 50,
                padding: 10,
                margin: 1,
              }}
            >
              <MagnifyingGlassIcon size='20' color='white' />
            </TouchableOpacity>
          </View>
        </View>
      </ImageBackground>
    </View>
  );
};

export default index;

Image 1

Image 2

[pedrohamarques]

I faced the same issue, as I posted on this thread: #628 (comment)

The solution I was provided is to update nativewind to 4.0.36 and it worked.

[saltxf]

I faced the same issue, as I posted on this thread: #628 (comment)

The solution I was provided is to update nativewind to 4.0.36 and it worked.

I have updated to 4.0.36, but what happened was an error as follows. Previously, I was using 4.0.1 and there were no issues except for the Touchable Opacity where its className wasn't functioning properly.

tailwindcss(android) rebuilding... tailwindcss(android) is taking a long time to build, please read https://tailwindcss.com/docs/content-configuration#pattern-recommendations to speed up your build time
Error running TailwindCSS CLI, please run the CLI manually to see the error.Command used: node C:\Dev\React Native\weather\node_modules\tailwindcss\lib\cli.js --input "C:\Dev\React Native\weather\global.css" --output "C:\Dev\React Native\weather\node_modules.cache\nativewind\global.css.android.css" --watch

Have you ever experienced this when updating to 4.0.36? @pedrohamarques

[pedrohamarques]

I was running on a iOS device and didn't face this problem. Also, I run it on a Android 13 device and it worked properly.
Here's some log from my terminal (ignore the Babel line):

Using src/app as the root directory for Expo Router.
tailwindcss(ios) rebuilding... done
iOS Bundled 15855ms (C:\Users\pedro\Documents\GitHub\check-in-app\node_modules\expo-router\entry.js)
Using src/app as the root directory for Expo Router.
iOS Bundled 5218ms (C:\Users\pedro\Documents\GitHub\check-in-app\node_modules\expo-router\entry.js)
› Detected a change in babel.config.js. Restart the server to see the new results. You may need to clear the bundler cache with the --clear flag for your changes to take effect.
Using src/app as the root directory for Expo Router.
tailwindcss(android) rebuilding... done
Android Bundled 308089ms (C:\Users\pedro\Documents\GitHub\check-in-app\node_modules\expo-router\entry.js)

[mz-evia]

@saltxf Maybe you need to update tailwind as well? And did you try to run the tailwind cli manually as suggested in the error?