NativeWind it's not working.
It was working when the content of the file tailwind.config.js was './App,{js,jsx,ts,tsx}' but not anymore since I implemented the React Navigation.
tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
package.json:
{
"name": "inovarlagos",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.12",
"#react-navigation/native-stack": "^6.8.0",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"nativewind": "^2.0.7",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.1.8"
},
"private": true
}
App.js:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
./screens/HomeScreen.js:
import { View, Text } from 'react-native';
import React from 'react';
const HomeScreen = () => {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text className="text-red-200">Futuristik Lagos- Home</Text>
</View>
);
};
export default HomeScreen;
Project structure:
Result (TailWind not working):
I assume you're using NativeWind, since support for TailwindCSS ended for React Native recently.
First stop the expo server. Then, instead of starting it with expo start, run expo start -c to wipe the cache that NativeWind adds and restart the server.
Source: https://www.nativewind.dev/guides/troubleshooting
To fix this issue, simply clear your project's cache either by expo start -c or react-native start --reset-cache.
Related
Can anybody help me on my early journey using React Native and Expo?
JSX element type 'Text' does not have any construct or call signatures.ts(2604)
App.tsx
import { StyleSheet, Text, View } from 'react-native';
import FrontCard from './components/FrontCard';
const App = () => {
return (
<View style={styles.container}>
<FrontCard />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
FrontCard.tsx
import React from 'react'
import Text, { View } from 'react-native'
const FrontCard: React.FC = () => {
return (
<View>
<Text>test</Text>
</View>
)
}
export default FrontCard;
package.json
{
"dependencies": {
"expo": "^46.0.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-web": "~0.18.7"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#types/react": "~18.0.0",
"#types/react-native": "~0.69.1",
"typescript": "^4.6.3"
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"version": "1.0.0",
"private": true,
"name": "canumind"
}
I have tried a few different things mentioned in search results from:
https://www.google.com/search?q=JSX+element+type+does+not+have+any+construct+or+call+signatures.ts+(2604)&rlz=1C1PRFI_enGB834GB834&sxsrf=ALiCzsbu2XjELqIQ0dOLQwdnq3sAj_g7PA:1668253602337&source=lnt&tbs=qdr:y&sa=X&ved=2ahUKEwiF8fL6yKj7AhUJZMAKHRf0CqIQpwV6BAgBEBo&biw=1120&bih=972&dpr=1
Text is not a default export, it's a named export.
import Text, { View } from 'react-native'; // wrong
import { Text, View } from 'react-native'; // correct
I wasn't even able to find the default export in react-native package, it's not listed in the react-native docs as well.
If the Text component would be exported from the react-native package with
export default Text;
you would be able then to import it as you actually did. However since it's exported with a named export
export { Text };
it can't be imported with default keyword since it's not a default export.
More information about react-native components: https://reactnative.dev/docs/text
I was working on a project on react native trying to create drawer navigation
I installed a navigation drawer, gesture handler, and reanimated libraries
and when I run I got an error
1st error :
ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
so I did according to the suggestion in this error I added plugins:['react-native-reanimated/plugin' in the babel.config.js and started with npm start ----reset cache that gave me another error:
2nd error
error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
here is my package.json
{
"name": "Train",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-gesture-handler": "^2.6.2",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
my index.js
import {AppRegistry} from 'react-native';
import App from './App';
import Login from './pages/Login';
import Home from './pages/Home';
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Plugins:['react-native-reanimated/plugin'],//I added this line because of the 1st error
};
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
//for stack
import Login from './pages/Login';
import Home from './pages/Home';
//for drawer
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import wallet from './pages/Drawer/wallet';
import orders from './pages/Drawer/orders';
const stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function MystackNav(){
return(
<stack.Navigator>
<stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
<stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
<stack.Screen name='Drawer' component={MyDrawer}/>
</stack.Navigator>
)
}
function MyDrawer(){
return(
<Drawer.Navigator>
<Drawer.Screen name='cart' component={cart}/>
</Drawer.Navigator>
)
}
export default function App(){
return(
<NavigationContainer>
<MystackNav/>
</NavigationContainer>
)
}
Mine is working the only diff is:
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
package.json
{
"name": "awesomeproject2",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"babel-preset-expo": "^9.2.0",
"expo": "^46.0.16",
"expo-status-bar": "^1.4.0",
"react": "~18.1.0",
"react-native": "^0.70.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-reanimated": "^2.11.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-export-namespace-from": "^7.18.9",
"babel-preset-expo": "^9.2.0"
},
"private": true
}
1.Update babel.config.js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
2.run expo start -c
references - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
I'm using react native for a project and I'm trying to use a component that react navigation offers, it's the top tabs, everytime I use this though a error comes up, mostly one that says
Invariant Violation: Tried to register two views with the same name RNCViewPager
I've looked up what could cause this and some people said that it was because of the react-native-pager-view package itself so I tried to switch it out but I still have no resolved it.
This is the tab component:
import { StyleSheet, Image, Text, View, TextInput, Pressable, Button,
FlatList, ImageBackground } from "react-native";
import { Home } from "../Tabs/Explore";
import { createMaterialTopTabNavigator } from "#react-
navigation/material-top-tabs";
import { Search } from "../Secondary/Search";
import { Tags } from "../Secondary/Tags";
const Tab = createMaterialTopTabNavigator();
export function TopTabs() {
return (
<Tab.Navigator initialRouteName="HomeExplore">
<Tab.Screen name="HomeExplore" component={Home} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="Tags" component={Tags} />
</Tab.Navigator>
)
}
const stylesl = StyleSheet.create({
tab: {
backgroundColor: "#000000"
}
})
Now this is where I wanted the tab component to go, but I get a error everytime.
import React, { useState, useEffect } from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import User from '../../Post/User';
import { StyleSheet, Image, Text, View, TextInput, Pressable, Button,
FlatList, ImageBackground, ScrollView } from "react-native";
import Community from '../../Post/Community';
import { QUOTE, POST, COMMUNITY, PAGE, VIDEO, CUSTOMER, PRODUCT, Search }
from '../../graphql/Mutation';
import { TopTabs } from './Foreal';
const Stack = createStackNavigator()
export default function Explores({ navigation }) {
return (
<Stack.Navigator initialRouteName="Base" screenOptions={{ headerStyle: { height: 55, backgroundColor: 'black', shadowColor: 'transparent' }, tabBarStyle: { backgroundColor: "black", borderTopWidth: 4 } }}>
<Stack.Screen name="Base" component={TopTabs} options={{
}} />
<Stack.Screen name="singleUser" component={UserList} options={{ headerShown: false }} />
<Stack.Screen name="MoreSearch" component={Searching} options={{ headerShown: false }} />
</Stack.Navigator>
)
}
And here's my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#apollo/client": "3.4.16",
"#gorhom/bottom-sheet": "^4.1.1",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.7",
"#stripe/stripe-react-native": "0.2.3",
"#types/react-native-scrollable-tab-view": "^0.10.2",
"apollo-link-context": "^1.0.20",
"date-fns": "^2.25.0",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-av": "~10.2.0",
"expo-file-system": "~13.1.2",
"expo-image-picker": "~12.0.1",
"expo-status-bar": "~1.2.0",
"formik": "^2.2.9",
"graphql": "^16.2.0",
"graphql-tag": "^2.12.5",
"ionicons": "^5.5.3",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-bottomsheet": "^2.5.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-bottom-sheet": "^1.0.9",
"react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-stripe-sdk": "^0.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "0.17.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I'm using Nextjs with Material UI React I want to change default primary color to other color. I have used below code in app.js
import Layout from '../components/layout'
import '../styles/global.css'
import { createTheme , ThemeProvider } from "#material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
main: '#00ab55',
},
secondary: {
main: "#00ab55"
}
}
});
export default function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider >
)
}
and used it in another component like below in color props.
<TextField className="num_input_field" color='primary' placeholder="phone number" inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />
<Button variant="contained" color="primary">Go</Button>
But no any changes. I have done below multiple things to check
I have changed ThemeProvider to MuiThemeProvider
Also tried <ThemeProvider theme={theme}> to <ThemeProvider MuiTheme={theme}>
Also used createMuiTheme instead of createTheme. but here createMuiTheme is deprecated showing in visual studio code.
Also changed from "#material-ui/core/styles" to from "#material-ui/core"
Below is my package.json to see version.
{
"name": "xyz",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.0.1",
"#mui/material": "^5.0.2",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-flags-select": "^2.1.2",
"sass": "^1.42.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
Please help. Thank you.
So I'm a newbie to reactnative, trying to learn to develop apps. I was trying to learn how to use React Navigation so I installed it and dependancies but then when I try to use it I'm getting a few errors. The first appears in cmd after running npm start:
Some of your project's dependencies are not compatible with currently installed expo package version:
- react-native-screens - expected version range: 2.0.0-alpha.12 - actual version installed: ^2.0.0-alpha.12
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]
And then when I launch the app in Android sim I get this:
Unable to resolve "#react-navigation/drawer" from "App.js"
Failed building JavaScript bundle.
Here is my code:
import React from 'react';
import { StyleSheet, Text, View, Platform, Image, ImageBackground } from 'react-native';
import {Button} from 'native-base';
import { render } from 'react-dom';
import Search from './src/search';
import Landing from './src/landing';
import {NavigationContainer} from '#react-navigation/native'
import {createDrawerNavigator} from '#react-navigation/drawer'
import {createStackNavigator} from '#react-navigation/stack'
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs'
import {createMaterialTopTabNavigator} from '#react-navigation/material-top-tabs'
var myBackground = require('./assets/icons/landing.jpg');
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const MaterialBottomTabs = createMaterialBottomTabNavigator();
const MaterialTopTabs = createMaterialTopTabNavigator();
export default class App extends React.Component {
state = {
}
createHomeStack = () =>
<Stack.Navigator>
<Stack.Screen name="Feed"/>
</Stack.Navigator>
createTopTabs = () =>
{
return <MaterialTopTabs.Navigator>
<MaterialTopTabs.Screen name="Tab1" Component={Landing}/>
</MaterialTopTabs.Navigator>
}
render() {
return (
<View style={styles.container}>
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" Component="Landing"/>
<Drawer.Screen name="Search" Component="Search"/>
<Drawer.Screen name="Home"/>
</Drawer.Navigator>
</NavigationContainer>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Platform.OS === "android" ? 50 : 0
},
});
Does anyone know why I would be getting these errors? I did a fresh install of React Nav right before starting this.
Thanks in advance!
Package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.5",
"#react-navigation/native": "^5.0.8",
"expo": "~36.0.0",
"native-base": "^2.13.8",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.4.0",
"react-native-safe-area-context": "^0.6.0",
"react-native-screens": "^2.0.0-alpha.12",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0"
},
"private": true
}
So in your case as your pacakge.json shows, you haven't installed the packages which are used to drawer and stack. After solving drawer issue you will get stack issue.. Follow these steps top reproduce your problem
More information about React Navigation Version 5.x
Install drawer package using this :
npm i -s #react-navigation/drawer
Install navigation stack using this :
npm i -s #react-navigation/stack
Install material bottom tabs using this :
npm i -s #react-navigation/material-bottom-tabs
Install Material top tabs using this :
npm i -s #react-navigation/material-top-tabs
You should follow all the above steps to solve issues with your project
After installing all the above dependencies you need to clean and rebuild your project and uninstall the previous version from the emulator and run again
About Tab Navigation
About Drawer Navigation