twrnc modifiers not working on expo react native project #206
Comments
|
this is most often caused by failure to connect the tw function to the source of runtime device information as described in the readme here: Did you do that step? |
|
@jaredh159 |
|
no worries, it's easy to miss stuff like that 😄 |
|
@Teqshark how did you get it working with expo? |
|
@tomh4 i would just try executing the hook at the highest point of the hierarchy that i control. you just need it higher than any of your usages of the |
|
@jaredh159 thanks, ok, I tried that but it seems not to work correctly. |
|
hmmm..... have you looked at this issue? #112 wondering if there is some similar memoization going on with expo router. i'm not familiar at all with that package. otherwise, is you project open source where i could look at the code in it's entirety? |
|
the project is not open source, but it is basically a fresh project. |
|
@jaredh159 does the project work with dark/bright mode for you ? |
|
same issue here, |
|
@tomh4 i pulled your project down, but couldn't get the dependencies installed, got an error: but i've never used expo before, and a minute or two of poking around and i couldn't find an expo config file. edit: ran the expo install command, and i can get it building, but i'm getting errors in the ios simulator, so can't tell. did you look into issue #112? |
|
Okay, so I had a similar problem working with an Expo app, except mine didn't get resolved even after checking if I had added useDeviceContext (I had). Go to the For some reason, Expo keeps the default as "light" which forces your app to run in light mode, regardless of system preferences. https://docs.expo.dev/develop/user-interface/color-themes/ |
|
thanks @anirudhgray , mine was set as light as well so that was definitely one of the issues. |
|
@tomh4 I've put useDeviceContext in |
|
I'm using Expo router, |
|
same , useDeviceContext(tw) not working on top app.js |
|
Same for me, with Expo Router useDeviceContext not working on top app.js |
|
A temp workaround is to change the route stack key : // app/_layout.tsx
function useRouterKey(): string {
const dimensions = useWindowDimensions();
const colorScheme = useColorScheme();
return useMemo(() => {
return JSON.stringify({ ...dimensions, colorScheme });
}, [dimensions, colorScheme]);
}
export function RootLayout() {
useDeviceContext(tw);
const routerKey = useRouterKey();
return (
<ReactNavigationTheme>
<Stack key={routerKey}>
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
<Stack.Screen name="(main)" options={{ headerShown: false }} />
</Stack>
</ReactNavigationTheme>
);
}I'll be taking a closer look in the near future to find a permanent solution. |
I have been unable to get the modifiers (screen, state, etc) to work in my expo react native project.
using twrnc^3.4.1
Most of everything else seems to work fine.
I configured the tailwind.config file like below and my custom colors worked fine using this config file however
custom breakpoints never worked nor did the default ones at all not even when I try on a fresh tailwind integration before trying to customize it.
Also I noticed none of the state modifier have worked i.e. (hover:, ios:, android:, dark:, light: etc.)
as stated none of them have worked even before i configure the config file.
I looked at the tailwindcss docs and stackoverlfow for example config files and while the custom colors and classes work fine the screens/breakpoints and default modifiers never do.
here is my tailwind.config.js :
`/** @type {import('tailwindcss').Config} */
// tailwind.config.js
const { plugin } = require('twrnc');
const defaultTheme = require('tailwindcss/defaultTheme')
// or, you can use tailwinds plugin function:
// const plugin = require('tailwindcss/plugin');
module.exports = {
important: true,
// purge: [],
content: ["./src/**/*.{js,jsx,ts,tsx}", "./app.js"], // this line is important to use tailwind CSS.
theme: {
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
},
// variants: {},
plugins: [
plugin(({ addUtilities }) => {
addUtilities({
],
// content: [],
}
`
package.json :
{ "name": "adriancodes", "version": "1.0.0", "main": "./entry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/webpack-config": "^0.17.2", "@react-native-community/blur": "^4.3.0", "debounce": "^1.2.1", "dom-to-image": "^2.6.0", "expo": "~47.0.6", "expo-blur": "~12.0.1", "expo-gl": "~12.0.1", "expo-image-picker": "~14.0.2", "expo-media-library": "~15.0.0", "expo-splash-screen": "~0.17.5", "expo-status-bar": "~1.4.2", "expo-three": "^7.0.0", "firebase": "^9.15.0", "hsl-to-hex-v2": "^1.0.0", "react": "18.1.0", "react-dom": "18.1.0", "react-hook-form": "^7.40.0", "react-native": "0.70.5", "react-native-canvas": "^0.1.38", "react-native-gesture-handler": "~2.8.0", "react-native-picker-select": "^8.0.4", "react-native-reanimated": "~2.12.0", "react-native-view-shot": "3.4.0", "react-native-web": "~0.18.9", "simplex-noise": "^4.0.1", "three": "^0.147.0", "twrnc": "^3.4.1" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/plugin-proposal-export-namespace-from": "^7.18.9" }, "private": true }tailwind.js :
`import {create } from 'twrnc';
const tw = create(require('../../tailwind.config.js'));
export default tw;
`
console.logging gives the expected object when not using modifiers like so:
console.log('tw-', twbg-gold-400);and gives empty objects when trying to use the modifiers:
console.log('tw-', twlight:bg-red-500 dark:bg-blue-500);was really looking forward to using this package however i will have to use an alternative if i can't get the modifiers to work
please help!
The text was updated successfully, but these errors were encountered: