Getting an error when implementing react navigation in React Native - reactjs

// In APP.js
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function Nave() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
----------------------------------------------------------
In 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-navigation/stack": "^5.2.14",
"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.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.3.8",
"react-native-safe-area-context": "0.7.3",
"react-native-reanimated": "~1.7.0",
"react-native-screens": "~2.2.0",
"#react-native-community/masked-view": "0.1.6"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"#babel/core": "^7.8.6"
},
"private": true
}
enter image description here
If I could get some help, it wouldn't be a denial.
I already did a complete re-installation via npm of react-native and react-navigation following the documentation.
But, I don't understand why my app doesn't launch and displays this error message. Knowing that I use an ios simulator on Macos catalina.

It looks like you don't have #react-navigation/native in your package.json. Did you follow the instructions in the react-navigation docs?
First run:
npm install #react-navigation/native
Then run:
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
Then you should be able to follow their Hello React Native tutorial.

Related

Animated cursor made using Framer motion keep disappearing

I am building a portfolio site using nextjs + tailwindcss and framer motion for animations.
I have implemented a custom animated cursor using framer motion, this works fine but after a few minutes of reloading it keeps disappearing for no reason. Here is a video:
https://www.loom.com/share/84b2bbe766e14e938632b944578d4132
I am able to fix this issue by downgrading the framer-motion version to an older one (v5.3.2), but it has some other bugs with React v18, so I can't downgrade to that version.
I cannot figure out why this keeps disappearing and reappearing, and I can't reproduce this bug at will.
This is my custom mouse component:
<motion.div
variants={variants}
animate={cursorContext?.cursorVariant}
className={`h-5 w-5 rounded-full fixed top-[50vh] left-[50vw] pointer-events-
none z-[999] mix-blend-difference ${showCursor ? 'block' : 'hidden'}`}
/>
Here are my variants:
const variants = {
regular: {
x: cursorContext!.mousePosition.x - 5,
y: cursorContext!.mousePosition.y - 5,
border: "white 2px solid",
},
clickable: {
x: cursorContext!.mousePosition.x - 5,
y: cursorContext!.mousePosition.y - 5,
border: 'none',
backgroundColor: 'white',
width: 10,
height: 10,
},
largeClickable: {
x: cursorContext!.mousePosition.x - 10,
y: cursorContext!.mousePosition.y - 10,
border: 'none',
backgroundColor: 'white',
width: 20,
height: 20,
},
};
Here are all of my installed packages:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"#types/react-scroll": "^1.8.5",
"autoprefixer": "^10.4.12",
"framer-motion": "^7.6.15",
"postcss": "^8.4.18",
"react-icons": "^4.6.0",
"react-scroll": "^1.8.8",
"tailwindcss": "^3.2.1",
"typescript": "4.8.4"
}
}
Thanks for the help in advance.

Interface is a reserved word when using yarn workspaces, typescript + nextjs + common react component library

I am trying to create a monorepo (yarn workspaces) with a next.js application and a separate react component library. But when i start the next.js app and try to use any component from the react library i get the error The keyword 'interface' is reserved.
My file structure:
/apps
/backend <- express server
/frontend <- next.js
/packages
/ui
index.tsx
/components
...
package.json
My package.json files:
/package.json
{
"name": "monorepo-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": "true",
"workspaces": [
"packages/**",
"apps/**"
],
"scripts": {
"dev:backend": "cd apps/backend && yarn dev",
"dev:frontend": "cd apps/frontend && yarn dev",
"dev": "concurrently \"yarn workspace frontend dev\" \"yarn workspace backend dev\""
},
"dependencies": {
"concurrently": "^7.4.0"
}
}
/apps/frontend/package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#types/styled-components": "^5.1.26",
"next": "12.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.4.0",
"styled-components": "^5.3.5",
"ui": "*"
},
"devDependencies": {
"#types/node": "18.7.16",
"#types/react": "18.0.18",
"#types/react-dom": "18.0.6",
"eslint": "8.23.0",
"eslint-config-next": "12.3.0",
"typescript": "4.8.3"
}
}
/packages/ui/package.json
{
"name": "ui",
"version": "0.0.0",
"private": true,
"license": "MIT",
"main": "dist/index.js",
"files": [
"components/**/*"
],
"dependencies": {
"#types/react": "^18.0.18",
"#types/styled-components": "^5.1.26",
"config": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"tsc": "^2.0.4",
"typescript": "^4.8.3"
},
"scripts": {
"build": "tsc",
"dev": "tsc -w"
}
}
Example of next.js page using components
/* /apps/frontend/pages/index.tsx */
import type { NextPage } from "next";
import { Button, Heading } from "ui";
import { BsEmojiSmile } from "react-icons/bs";
const Home: NextPage = () => {
return (
<>
<div>
<Button small>Small button</Button>
<Button medium>Medium button</Button>
<Button big>Big button</Button>
<Button>No size given (default to medium)</Button>
</div>
<div>
<Button small icon>
<BsEmojiSmile />
Small button w/icon
</Button>
<Button medium icon>
<BsEmojiSmile />
Medium button w/icon
</Button>
<Button big icon>
<BsEmojiSmile />
Big button w/icon
</Button>
<Button icon>
<BsEmojiSmile />
No size given (default to medium) w/icon
</Button>
</div>
<div>
<Heading small>Small heading (h3)</Heading>
<Heading medium>Medium heading (h2)</Heading>
<Heading big>Big heading (h1)</Heading>
</div>
</>
);
};
export default Home;
Example of component
/* /packages/ui/components/Button/Button.tsx */
import styled, { css } from "styled-components";
interface Props {
small?: boolean;
medium?: boolean;
big?: boolean;
icon?: boolean;
}
const Button = styled.button<Props>`
background: black;
border: none;
color: white;
border-radius: 7px;
cursor: pointer;
margin: 20px;
padding: ${(props) => {
if (props.small) return "8px 10px";
if (props.medium) return "12px 18px";
if (props.big) return "20px 25px";
return "12px 18px";
}};
font-size: ${(props) => {
if (props.small) return "12px";
if (props.medium) return "16px";
if (props.big) return "20px";
return "16px";
}};
// Alternative
${(props) =>
props.small &&
css`
padding: 8px 12px;
font-size: 12px;
`}
${(props) =>
props.icon &&
css`
display: inline-flex;
column-gap: 12px;
justify-content: center;
align-items: center;
svg,
i {
width: 24px;
height: 24px;
color: white;
}
`}
`;
export default Button;
I have tried just running yarn dev on the frontend project, yarn dev on both frontend and ui. But no luck. Also tried with and without tsc on ui package.
Anyone done something similar with any luck?
Thanks!

Material-UI, my Toggle Switch are so ugly

I'm new with Material UI and I don't understand why my Toggle looks like that...1 and 2
I don't have any compilations issues and my code is very simple :
return (
<Grid container spacing={2}>
<Grid item xs={6}><Button variant="contained" >{exploitantLigne.raisonSociale}</Button></Grid>
<Grid item xs={3}></Grid>
<Grid item xs={3}>
<FormGroup>
<FormControlLabel control={<Switch defaultChecked />} color="primary" label="" />
</FormGroup>
</Grid>
</Grid>
);
And of course, in SandBox everything works perfectly !
Here is my Package.json, Do Idid anything wrong ?
{
"name": "ve-session",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.4.2",
"#mui/lab": "^5.0.0-alpha.69",
"#mui/material": "^5.4.2",
"#mui/styled-engine-sc": "^5.4.2",
"#mui/styles": "^5.4.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"ts-loader": "^9.2.6",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thanks !
I assume that there is a mismatch between the MUI component imports and the version you've installed. I just used the correct way of importing the components.
See the sandbox link
And code below
import "./styles.css";
import Switch from "#mui/material/Switch";
import Grid from "#mui/material/Grid";
import Button from "#mui/material/Button";
import FormGroup from "#mui/material/FormGroup";
import FormControlLabel from "#mui/material/FormControlLabel";
export default function App() {
return (
<Grid container spacing={2}>
<Grid item xs={6} sx={{ pl: "10px" }}>
<Button variant="contained">exploitantLigne.raisonSociale</Button>
</Grid>
<Grid item xs={3}></Grid>
<Grid item xs={3}>
<FormGroup>
<FormControlLabel
control={<Switch defaultChecked />}
color="primary"
label=""
/>
</FormGroup>
</Grid>
</Grid>
);
}

Material UI - Drawer does not open

I have a react app with Material-UI 1.2.
Although the state is properly updated, the drawer does not open close.
I have also correctly applied the bind on onLeftIconButtonTouchTap.
Here is my implementation of the TemporaryDrawer :
// .. imports
const styles = {
list: {
width: 250,
},
fullList: {
width: 'auto',
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
};
class TemporaryDrawer extends React.Component {
render() {
const { classes, toggleDrawer, isOpen } = this.props;
const sideList = (
<div className={classes.list}>
<List>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
</List>
</div>
);
console.log(' isOpen ' + isOpen);
return (
<div>
<IconButton className={classes.menuButton} color="inherit" onClick={toggleDrawer}>
<MenuIcon />
</IconButton>
<Drawer open={isOpen} onClose={toggleDrawer}>
<div
tabIndex={0}
role="button"
onClick={toggleDrawer}
onKeyDown={toggleDrawer}
>
{sideList}
</div>
</Drawer>
</div>
);
}
}
TemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(TemporaryDrawer);
used in this MenuAppBar.js
// ... imports
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class MenuAppBar extends React.Component {
state = {
auth: true,
drawerOpen: false,
};
handleMenu = () => {
this.setState({ drawerOpen: !this.state.drawerOpen });
};
render() {
const { classes } = this.props;
const { drawerOpen } = this.state;
console.log(' state ' + this.state.drawerOpen);
return (
<div className={classes.root}>
<AppBar position="static" onLeftIconButtonTouchTap={this.handleMenu.bind(this)}>
<Toolbar>
<TemporaryDrawer isOpen={drawerOpen} toggleDrawer={this.handleMenu} />
</Toolbar>
</AppBar>
</div>
);
}
}
MenuAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MenuAppBar);
package.json
{
"name": "find-swim",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/codemod": "^1.1.0",
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"firebase": "^4.8.0",
"material-ui": "^0.19.4",
"material-ui-autocomplete-google-places": "^2.2.0",
"material-ui-places": "^1.1.7",
"mui-places-autocomplete": "^2.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-ga": "^2.4.1",
"react-google-button": "^0.4.0",
"react-google-maps": "^9.2.2",
"react-places-autocomplete": "^5.4.3",
"react-redux": "^5.0.6",
"react-redux-firebase": "^2.0.0-beta.16",
"react-redux-form": "^1.16.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.16",
"react-tap-event-plugin": "^3.0.2",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "set GENERATE_SOURCEMAP=false && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "firebase deploy"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.2"
}
}
it s crazy but the issue was with the combination:
"#material-ui/core": "^1.2.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
As soon as I ve updated my dependencies to those of Ramil in his codesandbox, it worked.
"#material-ui/core": "1.2.3",
"react": "^16.3.0",
"react-dom": "^16.3.0",
I hope this helps someone..
I don't know where you got this onLeftIconButtonTouchTap={this.handleMenu.bind(this)}
But what you can do is:
<AppBar position="static">
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
onClick={this.handleMenu.bind(this)}
>
<MenuIcon />
</IconButton>
<Toolbar>
<TemporaryDrawer
isOpen={drawerOpen}
toggleDrawer={this.handleMenu}
/>
</Toolbar>
</AppBar>
Edit: I tried your code in sandbox. Apparently, nothing is wrong with your code. https://codesandbox.io/s/pk9921kkw0

react-native-elements: icons throw Invariant Violation error

I'm new to react native and I face a problem I have no idea how to solve.
I created and started a new project as follows:
create-react-native-app ProjectName
cd ProjectName
yarn add react-native-elements#beta
npm start
The package.json looks like this:
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "25.0.0",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-elements": "^1.0.0-beta3"
}
}
Then I wanted to insert a button with an icon like this:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-elements';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<Button
raised
icon={{ name: 'cached' }}
title='BUTTON WITH ICON' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Unfortunately, I get this error message:
error message on iphone
Does anyone have a hint how I can make the icons work? I already tried to add the vector-icons with 'yarn add react-native-vector-icons', although I do have a create-react-native project, but that did'nt work neither.
Thank you!
It should be this way:
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
...
<Button
icon={
<Icon
name='arrow-right'
size={15}
color='white'
/>
}
title='BUTTON WITH ICON'
/>

Resources