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'
/>
Related
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!
So i am trying to route my user to next page on clicking the item. To do this I am using react router dom's Link. But on clicking it is not taking me to the desired page. SO please check it out and help me.
The code of my App.js and the current files are also given below.
And also the Hii is printed but the link is not working.
App.js :
import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux';
import store from './store';
import AppNavbar from './components/appNavbar';
import Login from './components/login';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import FacultyMain from "./components/facultyMain";
import ImageUpload from './components/imageUpload';
import StudentMain from './components/studentMain';
import SubjectAssignments from './components/subjectAssignments';
class App extends Component{
render() {
return (
<Provider store={store} >
<BrowserRouter>
<AppNavbar />
<Switch>
<Route exact path='/' component={Login} />
<Route path='/facultymain' component={FacultyMain} />
<Route path='/studentmain' component={StudentMain} />
<Route path='/subjectassignments' component={SubjectAssignments} />
</Switch>
</BrowserRouter>
</Provider>
);
}
}
export default App;
Current pages code:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Container, ListGroup, ListGroupItem } from 'reactstrap';
class StudentMain extends Component {
render() {
return (
<Container>
<ListGroup>
<ListGroupItem onClick={() => {
console.log("Hii");
<Link to="/subjectassignments" />
}}>3IT401 - Cryptography and Network Security</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IC401 - Management and Economics</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>4OE395 - OE I data Visualization and Interpretation</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT402 - Data Mining</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT413 - PE Deep Learning</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT451 - Open Source Software Lab</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT452 - Software Testing and Quality Assurance Lab</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT453 - Data Mining Lab</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT454 - Project</ListGroupItem>
</ListGroup>
</Container>
);
}
}
export default StudentMain;
package.json :
{
"name": "virtual-lab",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"reactstrap": "^8.7.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.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"
]
},
"devDependencies": {
"redux-devtools-extension": "^2.13.8"
}
}
Try like this,
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Container, ListGroup, ListGroupItem } from 'reactstrap';
class StudentMain extends Component {
render() {
return (
<Container>
<ListGroup>
<ListGroupItem onClick={() => {
this.props.history.push('/subjectassignments');
}}>3IT401 - Cryptography and Network Security</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IC401 - Management and Economics</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>4OE395 - OE I data Visualization and Interpretation</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT402 - Data Mining</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT413 - PE Deep Learning</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT451 - Open Source Software Lab</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT452 - Software Testing and Quality Assurance Lab</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT453 - Data Mining Lab</ListGroupItem>
<ListGroupItem className="btn" style={{ textAlign: "left" }}>3IT454 - Project</ListGroupItem>
</ListGroup>
</Container>
);
}
}
export default StudentMain;
Refer: https://reactrouter.com/web/api/history
// 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.
This is the error message:
Error:
Invariant Violation: Element type is invalid: expected a string
(for
built-in components) or a class/function (for composite
components)
but got: object.
Check the render method of `App`.
This error is located at:
in RCTView (at View.js:60)
in View (at App.js:31)
in RCTView (at View.js:60)
in View (at App.js:30)
I added a video with the Expo to my App.js and I am getting this error and can't seem to solve it. I am trying to set the background to a video that I have saved to my assets folder and desktop.
App.js
import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import Video from 'expo';
import { MaterialIcons, Octicons } from '#expo/vector-icons';
export default class App extends React.Component {
state = {
mute: false,
fullScreen: false,
shouldPlay: true,
}
handlePlayAndPause = () => {
this.setState(prevState => ({
shouldPlay: !prevState.shouldPlay
}));
}
handleVolume = () => {
this.setState(prevState => ({
mute: !prevState.mute,
}));
}
render() {
const { width } = Dimensions.get('window');
return (
<View style={styles.container}>
<View>
<Text style={{ textAlign: 'center' }}> React Native Video </Text>
<Video
source={{ uri: './assets/background.mp4' }}
shouldPlay={this.state.shouldPlay}
resizeMode="cover"
style={{ width, height: 300 }}
isMuted={this.state.mute}
/>
<View style={styles.controlBar}>
<MaterialIcons
name={this.state.mute ? "volume-mute" : "volume-up"}
size={45}
color="white"
onPress={this.handleVolume}
/>
<MaterialIcons
name={this.state.shouldPlay ? "pause" : "play-arrow"}
size={45}
color="white"
onPress={this.handlePlayAndPause}
/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
controlBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "rgba(0, 0, 0, 0.5)",
}
});
package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"postinstall": "react-native link",
"eject": "expo eject"
},
"dependencies": {
"#babel/preset-react": "^7.0.0",
"#expo/vector-icons": "^6.3.1",
"expo": "^30.0.1",
"link": "^0.1.5",
"react": "16.3.1",
"react-native": "^0.55.0",
"react-native-vector-icons": "^5.0.0",
"react-native-video": "^3.2.1"
}
}
If you're using a video thats in a directory in your project you have to require it in the source property
<Video
source={require('./assets/background.mp4')}
shouldPlay={this.state.shouldPlay}
resizeMode="cover"
style={{ width, height: 300 }}
isMuted={this.state.mute}
/>
Here is the documentation for using the Video component https://github.com/expo/expo-docs/blob/master/versions/v25.0.0/sdk/video.md
Also you should be importing video like this
import {Video} from 'expo'
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