I have a TouchableHighlight, inside of it, I want to put an image exactly the same as xf138 in FontAwesome which looks like an arrow:
http://fontawesome.io/icon/chevron-circle-right/
I don't know how to display it, I tried to use Text inside of the TouchableHighlight, but I get "Unexpected token" error in below code:

And I wonder which fontFamily I should use inside myStyle, it seems there is no FontAwesome in the fontFamily of react native.
You can include the react-native-fontawesome module in your project and then use it as such (from https://github.com/entria/react-native-fontawesome):
import FontAwesome, { Icons } from 'react-native-fontawesome';
...
render() {
return (
<View>
<TouchableHighlight>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
<FontAwesome>{Icons.chevronLeft}</FontAwesome>
Text
</Text>
</TouchableHighlight>
</View>
);
},
Related
I'm starting to use Material UI in my project.
I have created a theme with some basic definitions, using my css variables:
import { createTheme } from '#mui/material/styles';
import theme from './_my-variables.scss';
const muiTheme = createTheme({
palette: {
primary: {
main: theme['color-blue'], // 'color-blue' is my css variable
},
},
typography: {
fontFamily: theme['brand-font'], // 'brand-font' is my css variable
},
}
I also used ThemeProvider in my App layout:
export const App = (props) => {
return (<Provider store={store}>
<ThemeProvider theme={muiTheme}>
<ConnectedRouter history={historyRef.history}>
<Layout {...props} />
</ConnectedRouter>
</ThemeProvider>
</Provider>);
};
I have a page with MUI elements, and it works fine and takes the new primary color and the new font.
<Box>
<Paper>
<Checkbox color="primary" /> <!-- I can see my new color in the page! Yay! -->
some text
</Paper>
</Box>
Now I want to create a custom element - like <MyCustomizeBox> that will have a different properties, using my css variables (for example - a specific width, defined in my variables).
How do I define them in my theme and how to use it to customize a new element?
I prefer not to user classes () because I want to create a generic elements for reusing. Also I don't want to change all Boxes in my app - only the customized ones.
I tries to use "withStyles" but I was getting the default theme instead of my customized theme and I saw on Google that I'm not support to use both "withStyles" and theme together.
At last, found the answer:
import { styled } from '#mui/system';
const MyCustomizedPaper = styled(Paper)(({ theme }) => ({
width: theme.custom.myCustomWidthCssVar
}));
<MyCustomizedPaper ></MyCustomizedPaper >
I have a local svg files I downloaded from ionicons website.
I'm trying to change their font size and color, but nothing works.
I tried with img tag and change in the css file, didn't work.
I tried with IonIcon, which also does not work.
This is what I have right now:
const AppHeader = () => {
return (
<div className="header">
<div className="iconsContainer">
<IonIcon src={searchIcon} size="36px" color="white"></IonIcon>
<IonIcon src={cartIcon} size="36px" color="white"></IonIcon>
</div>
</div>
);
};
I also couldn't find anything about IonIcon in Ionic's website and IonIcon's go to definition in VSCode does not work for some reason.
The svg does display, but I can't change the size and color.
Use it like this
<IonIcon icon={searchIcon} style={{fontSize:32, color: 'white'}}/>
Did you import IonIcon like that:-
import { IonIcon } from "#ionic/react";
If you are trying to use ionic icons you need to import the name as well:-
import { search } from "ionicons/icons";
Example with SVG/Images
<IonIcon src="/assets/icons/searchIcon"/>
Example with ionic icons
<IonIcon icon={search} style={{fontSize:36, color: 'white'}} />
For example:
import { CssBaseline, ThemeProvider, Typography } from "#material-ui/core"; // MUI **Typography** component
import { Text, RichText } from "#some-library/core"; // some-library's **Text** component
const theme = createMuiTheme({
overrides: {
typography: {
h1: {
fontFamily: Garamond,
fontSize: pxToRem(56),
lineHeight: pxToRem(64),
letterSpacing: pxToRem(-0.5),
[breakpoints.up("sm")]: {
fontSize: pxToRem(72),
lineHeight: pxToRem(76)
},
[breakpoints.up("md")]: {
fontSize: pxToRem(104),
lineHeight: pxToRem(112)
},
[breakpoints.up("lg")]: {
fontSize: pxToRem(120),
lineHeight: pxToRem(128),
letterSpacing: pxToRem(-0.75)
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Typography variant="h1">MUI Typography Heading</Typography>
<Text tag="h1">Library B text component</Text>
</ThemeProvider>
);
}
All I want is to apply the same styles of the <Typography> for the <Text> component.
I know can I can add className to the other component like <Text className={"MuiTypography-root MuiTypography-h1"} tag="h1">. Is that the right approach? And if I do like this would the props of components also be used in the component? Like <Text variant="h2"> and would it take all the responsiveness of Typography too?
Can the styles of MUI component be extended to another react component with all the other functionality (props etc) using any other way?
I am trying to create a shared (MUI components + some-library components) component library and using MUI as the base library for components and styles. And I have created custom theme for the MUI components but not able to extend these styles to the components of another library which too has few basic components (text field, buttons, form elements etc).
Please let know if the question makes sense as I am very new to react and MUI. Thanks much.
Ciao, for what I know, the answer should be no: you cannot extend material-ui component style to another component from different library. Because a component from another library would not accepts the same Material UI props (in your example, variant="h1" would be not recognized as valid props in other component except Material UI components).
Of course, as you said, you could assign the same Material UI class to another component and that component will follow the same style:
<Text className={"MuiTypography-root MuiTypography-h1"} tag="h1"> // this work
Or you could extend a Material UI component. Suppose that you want to make your own Text, you could extend Typography component using withStyles like:
import { withStyles } from "#material-ui/core/styles";
const MyText = withStyles((theme) => ({
root: {
color: "green" // in this case, MyText will have a green text color
}
}))((props) => <Typography {...props} />);
But, as you can see, I extended a Typography component, not a component coming from another library. Here a codesandbox example.
As I said, this is what I know. Maybe there is a way to achieve what you asked (even if I have some doubts because how to map Material UI props to be accepted by another component that has different props?)
My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
I am importing a bunch of components off the #material-ui/core library to style my items. I also have a local style definition assigned to a style constant.
What seems to be happening here is that my style isn't getting rendered on the server which is why the files being served upon load are sans-style. And then the CSS gets rendered by the client-side code. As a result, there's a flash of unstyled content that lasts almost a second, long enough to be noticable.
Any way to fix this? The entire codebase is up for reference at https://github.com/amitschandillia/proost/tree/master/web.
I ran a similar problem when tried to make a production build of my app, that uses material-ui. I manage to solve by adding a JSS Provider like this:
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
Here's the solution - https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js .
Basically, all you need to do is to sync server-side class names with client-side. The link above shows what you need to do to fix that issue.
The documentation for react native popup menu mentions how to create menu options with a checkmark
const CheckedOption = (props) => (
)
I want to create menu options with custom icons. I do not have the unicode value for those icons. I created a custom MenuOptionWithIcon component and wrapped the icon and the menu option inside a view.
export class MenuOptionWithIcon
extends React.Component<IMenuOptionProps, {}> {
public static defaultProps: Partial<IMenuOptionProps> = {
disabled: false,
};
public render() {
return (
<View style={PopupMenuStyleSheet.menuOptionWithIcon}>
{this.props.icon}
<MenuOption
{...this.props}
text={this.props.text}
onSelect={this.props.onSelect}
disabled={this.props.disabled}
/>
</View>
);
}
}
But I am not able to apply customStyles to these options now. I want to increase the padding of each of these options so that the tap target is increased. Is this the right way to create a custom menu option with an icon? Or is there a way to get unicode values for the icons that I need? Thanks!
EDIT:
Based on the suggestion in the answer below, I did the following but I now only see the text in my menu option. I don't see the Icon being displayed. onSelect works, text is displayed but the icon is not displayed.
const IconOption = (props) => (
<MenuOption {...props}>
<Icon name={props.iconName} size={30} />
{props.children}
</MenuOption>
);
<MenuOptions customStyles={MenuOptionStyles}>
<IconOption
iconName='md-bookmark'
onSelect={this.onSelectSave.bind(this)}
text={MenuOptionStrings.Save}
/>
</MenuOptions>
for the icons you need special font - use e.g. react-native-vector-icons and then use the same approach as for CheckedOption:
const IconOption = ({iconName, text, ...others}) => (
<MenuOption {...others} >
<Text>
<Icon name={iconName} />
{' ' + text}
</Text>
</MenuOption>
)