I want to import two modules having same name i.e
import {Input, Icon} from 'native-base'
and
import {Input, Button} from 'react-native-elements'
How can I import and use both of them in my JSX? is it possible?
You can use as when importing
import {Input as InputBase, Icon} from 'native-base'
import {Input, Button} from 'react-native-elements'
Yes you can use import as:
import {Input as NativeBaseInput, Icon } from 'native-base'
import {Input, Button} from 'react-native-elements'
Related
after importing toast from both react-bootstrap and react-toastify my output is showing like this
enter image description here
import "react-toastify";
import { ToastContainer } from 'react-bootstrap';
import { Toast } from 'react-bootstrap';
`https://i.stack.imgur.com/hC1a8.png
I want to import Button as MaterialButton alias
import Button from "#material-ui/core/Button";
const test => (<Button></Button>)
to
import * as MaterialButton from "#material-ui/core/Button";
const test => (<MaterialButton></MaterialButton>)
I get this error
I just found out that this also works in addition to Viet's answer
import {Button as MaterialButton} from "#material-ui/core";
Just rename import like this:
import MaterialButton from "#material-ui/core/Button";
I copy and paste the examples I find (including the imports) but it doesn't recognize the objects. Something is missing in the configuration.
However this does work:
const useStyles = makeStyles((theme) =>
Imports for these 2 examples:
import React, { useState } from 'react';
import { createStyles, makeStyles, Theme } from '#material-ui/core/styles';
import InputLabel from '#material-ui/core/InputLabel';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
import NativeSelect from '#material-ui/core/NativeSelect';
Example copied and pasted: demo.tsx
My app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import '../css/app.css';
import NativeSelects from './components/NativeSelects';
import { IntlProvider, FormattedMessage } from "react-intl";
ReactDOM.render(<Router><NativeSelects /></Router>, document.getElementById('root'));
I copy the content of the demo.tsx file and copy it to a NativeSelect.js
The example code that you copied is in typescript, you are probably using just javascript
How to redirect to another page in reactjs. Here is my code.
import React from 'react';
import { fade, makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import Badge from '#material-ui/core/Badge';
import MenuItem from '#material-ui/core/MenuItem';
import Menu from '#material-ui/core/Menu';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import AccountCircle from '#material-ui/icons/AccountCircle';
import MailIcon from '#material-ui/icons/Mail';
import NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
export default function PrimarySearchAppBar() {
function logout(){
this.props.history.push({pathname:'/'})
}
}
Whenever I try to redirect its sayas "TypeError: Cannot read property 'props' of undefined"
how can i fix this?
Your component should look something like this
class PrimarySearchAppBar extends React.PureComponent {
logout = () => {
this.props.history.push({ pathname: '/' });
}
render() {
// some render logic here
return <button onClick={this.logout}>Logout</button>;
}
}
export default PrimarySearchAppBar;
Or with stateless components like this
const logout = (props) => {
props.history.push({ pathname: '/' });
}
const PrimarySearchAppBar = (props) => {
// some render logic here
return <button onClick={() => logout(props)}>Logout</button>;
}
export default PrimarySearchAppBar;
Be careful that with stateless components, you can't use this keyword, but you have to pass it like standard paramater.
Can I import react-native-vector-icons/font-awesome and react-native-vector-icons/Ionicons on same screen?
Basically I want to use both font-awesome and Ionicons icons on same screen for different icons?
Example-
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/font-awesome';
import Icon from 'react-native-vector-icons/Ionicons';
Yes, you can. Because FontAwesome and Ionicons are exported as defaults, you can import them with any name, like so
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import IonIcon from 'react-native-vector-icons/Ionicons';
and in your render() method use like
<FontAwesomeIcon name="github" size={16} color="red">
<IonIcon name="github" size={16} color="blue">