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/
Related
My Application with MUI in DEV has one custom design
My Application with MUI in Prod has no custom design
Should I make something different?
Is missing some extra configuration?
Sample of something that is not working:
<Typography className={styles.customStyle} component="h1">
{t("Translation")}
</Typography>
The className={styles.customStyle} is totally ignored in Prod
This works fine in DEV.
My configuration
node v19.0.0
Package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/icons-material": "^5.11.0",
"#mui/material": "^5.11.0",
"#mui/styles": "^5.11.1",
"#next/font": "13.0.7",
"#types/node": "^18.13.0",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.9",
"axios": "^1.2.1",
"country-flag-icons": "^1.5.5",
"eslint": "8.29.0",
"eslint-config-next": "^13.1.1",
"html-entities": "^2.3.3",
"i18next": "^22.4.6",
"json5": "^1.0.2",
"next": "^13.1.1",
"next-translate": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.1.1",
"sass": "^1.57.0",
"typescript": "4.9.4"
}
}
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}
module.exports = nextConfig
FIXED:
After reading this article: https://blog.logrocket.com/getting-started-with-mui-and-next-js/
I saw that it was missing added <CacheProvider />.
So after that, the style custom works fine.
SOLUTION:
First, create a new file in the utils directory called createEmotionCache.js.
import createCache from "#emotion/cache";
export default function createEmotionCache() {
return createCache({ key: "css", prepend: true });
}
After go to the _app.js or page.js (if using LAYOUT RFC)
....
import { CacheProvider } from "#emotion/react";
const clientSideEmotionCache = createEmotionCache();
function MyApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}) {
return (
<CacheProvider value={emotionCache}>
<App />
</CacheProvider>
);
}
export default MyApp;
Thanks it.
I am using moti library for image animation in react native this error is thrown to me.
ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[3], "moti").MotiImage')
Here is my code file
import { StyleSheet, Text, View, Image } from "react-native";
import React from "react";
import { SIZES, images } from "../../constants";
import {MotiImage} from 'moti';
const Walkthrough2 = ({ animate }) => {
console.log("Moti Images",MotiImage);
return (
<View style={{flex:1, overflow:'hidden'}} >
<Text>Walkthrough2:</Text>
</View>
);
};
export default Walkthrough2;
const styles = StyleSheet.create({
image: {
position: "absolute",
width: 86,
height: 102,
zIndex: 0,
borderRadius: SIZES.radius,
},
});
Here is my package.json file
{
"name": "MargaretEcommerceApp",
"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-navigation/native": "^6.0.8",
"#react-navigation/stack": "^6.1.1",
"moti": "^0.17.1",
"react": "17.0.2",
"react-native": "0.67.3",
"react-native-gesture-handler": "^2.1.1",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^4.0.1",
"react-native-screens": "^3.12.0"
},
"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.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Please help me to solve it out Thankyou
Reason for Issue
Reanimated dependency "react-native-reanimated": "^2.0.0" as stated in the official documentation requires some additional configs, including babel, Hermes, and MainApplication.java to work properly with React Native.
I guess Reanimated ^2.0.0 is not yet supported on React Native ^0.64.0
Solution NOTE
After making changes, make sure to clear gradle and yarn caches. Three changes needs to be made:
Add Reanimated's babel plugin to your babel.config.js
module.exports = { ... plugins: [ ... 'react-native-reanimated/plugin', ], };
Turn on Hermes engine by editing android/app/build.gradle
project.ext.react = [ enableHermes: true // <- here | clean and rebuild if changing ]
Plug Reanimated in MainApplication.java
import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add ...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
#Override protected String getJSMainModuleName() {
return "index";
}
#Override protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage(); // <- add
}
};
I tried this but I still got the error: cannot read property ‘useRef’ of null
To resolve the useRef issue, you simply delete the node_modules and package-lock.json files, install node module using npm i --legacy-peer-deps, then run your application again.
I am using material-ui theme along with redux-toolit in gatsby.
My theme.ts file:
import { createMuiTheme } from "#material-ui/core";
import { useSelector } from "react-redux";
import { State } from "./Types/SliceTypes";
export const Theme = () => {
const islit = useSelector((state: State) => state.themes.value);
const theme = createMuiTheme({
palette: {
type: islit ? "light" : "dark",
},
});
return theme;
}
Now When I import this Theme in gatsby-browser and gatsby-ssr file it give an error. Invalid hook call. Hooks can only be called inside of the body of a function component
Even if I don't use islit and use theme only that is inside the Theme function the code still doesn't work.
My gatsby-browser.js and gatsby-ssr.js file:
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/Global/store';
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "./src/Global/theme";
export const wrapRootElement = ({ element }) => {
return <Provider store={store}><ThemeProvider theme={Theme()}>{element}</ThemeProvider></Provider>;
};
My gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-material-ui`,
`gatsby-plugin-image`,
My package.json file:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#contentful/rich-text-react-renderer": "^14.1.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.5.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"firebase": "^8.4.1",
"firebaseui": "^4.8.0",
"gatsby": "^3.3.0",
"gatsby-plugin-firebase": "^0.2.0-beta.4",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-material-ui": "^3.0.1",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-source-contentful": "^5.3.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^4.0.0",
"gatsby-transformer-sharp": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.3",
"typescript": "^4.2.4"
},
"devDependencies": {
"#types/react-helmet": "^6.1.1",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I have a similar set up and was able to solve this by following this setup recommended by MUI; https://github.com/mui-org/material-ui/tree/next/examples/gatsby
In the file gatsby/plugins/gatsby-plugin-top-layout/TopLayout.js you can add your redux Provider;
import { Provider } from "react-redux";
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "../../src/Global/theme";
import store from '../../src/Global/store';
...
<Provider store={store}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{props.children}
</ThemeProvider>
</Provider>
...
I am new to coding and I cant figure out a problem.
When I am opening a app in expo with the command
expo start -c
I am getting chinese symbols in my menu.
Then a red screen pops up with the following notificaton:
console.error: fontFamily "AntDesign" is not a system font and has not been loaded through FontloadAsync
I have googled the problem, and I have seen that people uploaded codes from 2 files, to get help.
App.js and package.json. So I have done it to.
App.js
import React from 'react';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { Root } from "native-base";
import { StatusBar } from "react-native";
import AppPreLoader from "./application/components/AppPreLoader";
import firebaseConfig from './application/utils/Firebase';
import * as firebase from 'firebase';
firebase.initializeApp(firebaseConfig);
import GuestNavigation from './application/navigations/Guest';
import LoggedNavigation from './application/navigations/Logged';
console.disableYellowBox = true;
function cacheImages(images) {
return images.map(image => {
if (typeof image === 'string') {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
export default class App extends React.Component {
constructor () {
super();
this.state = {
isLogged: false,
loaded: false,
isReady: false,
}
}
async _loadAssetsAsync() {
const imageAssets = cacheImages([
require('./assets/images/header.jpg'),
require('./assets/images/logo.png'),
require('./assets/images/logo_dark.png'),
require('./assets/images/star.png'),
require('./assets/images/avatar.png'),
require('./assets/images/emptylist.png'),
require('./assets/images/avatar.jpg'),
require('./assets/images/nointernet.png'),
require('./assets/images/contact.png'),
require('./assets/images/address.png'),
require('./assets/images/audience.png'),
require('./assets/images/schedule.png'),
require('./assets/images/phone.png'),
require('./assets/images/website.png'),
require('./assets/images/bookmarked.png'),
require('./assets/images/checked.png'),
]);
await Promise.all([...imageAssets]);
}
async componentDidMount () {
await Expo.Font.loadAsync({
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
'anticon': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'),
'Entypo': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Entypo.ttf'),
'Ionicons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
'MaterialCommunityIcons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'),
'SimpleLineIcons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf'),
'FontAwesome': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf')
});
And 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.10",
"#react-native-community/toolbar-android": "github:react-native-community/toolbar-android",
"expo": "^38.0.9",
"expo-ads-admob": "~8.2.1",
"expo-facebook": "~8.2.1",
"expo-font": "~8.2.1",
"firebase": "^7.9.0",
"moment": "^2.27.0",
"native-base": "^2.13.12",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-native": "^0.62.2",
"react-native-carousel": "^0.12.0",
"react-native-device-detection": "^0.2.1",
"react-native-form-validator": "^0.3.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-map-link": "^2.7.10",
"react-native-maps": "0.27.1",
"react-native-modalbox": "^2.0.0",
"react-native-reanimated": "^1.9.0",
"react-native-render-html": "^4.2.1",
"react-native-root-toast": "^3.2.1",
"react-native-safe-area-context": "^3.0.7",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.9.0",
"react-native-star-rating": "^1.1.0",
"react-native-super-grid": "^4.0.2",
"react-native-timeago": "^0.5.0",
"react-native-vector-icons": "^6.7.0",
"react-native-web": "^0.11.7",
"react-native-webview": "^9.4.0",
"react-navigation": "^4.4.0",
"react-navigation-drawer": "^2.5.0",
"react-navigation-stack": "^2.8.2",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"babel-preset-expo": "^8.2.3"
},
"private": true
}
I hope somebody can help me with this. It is my third night solving this issue.
you should load the font "AntDesign" with expo-font, as described in https://docs.expo.io/guides/using-custom-fonts/#a-minimal-but-complete-working-example
I am trying to change the color of the background in the tabs. I have created tabs using createMeterialTopTabNavigator from react-navigation-tabs. so far I Have tried using properties like activeBackgroundColor and inactiveBackgroundColor but its not working. I have included a screenshot. I would like to change the blue background color and the color of the line below ARENACASH which is only shown for active tab. FYI. activeTintColor and inactiveTintColor are working. which is how the color of active tab is orange and inactive tab is black.
this is my code
import { Text, View} from 'react-native';
import Constants from 'expo-constants';
import {
createBottomTabNavigator,
createMaterialTopTabNavigator
} from "react-navigation-tabs";
import{createAppContainer} from "react-navigation";
import ArenaCashScreen from './Screens/ArenaCashScreen';
import ArenaPointsScreen from './Screens/ArenaPointsScreen';
import UnknownCashScreen from './Screens/UnknownCashScreen';
const MainTabs = createMaterialTopTabNavigator(
{
ArenaCash: ArenaCashScreen,
ArenaPoints: ArenaPointsScreen,
UnknownCash:UnknownCashScreen
},
{
tabBarOptions: {
activeTintColor: 'orange',
activeBackgroundColor:'green',
inactiveTintColor: 'black',
inactiveBackgroundColor:'red',
}
}
);
const AppContainer = createAppContainer(MainTabs);
export default AppContainer;
My package.json is
{
"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": {
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-reanimated": "^1.9.0",
"react-native-screens": "^2.9.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}