If I have lineHeight:1.6 my browser and my android add px after it.
So the result is 1.6px.
And if I add there quotation marks " or ' it will result into desired behavior in my browser.
But my mobile show error Error while updating property 'lineHeight' in shadow node of type: RCTText. And it means that I need to add number there, not string.
How can I make it work?
My code is running in expo:
export default StyleSheet.create({
placeholdersText: {
lineHeight: 1.6,
},
});
import React from "react";
import {Text, View} from "react-native";
import styles from "./styles";
const Placeholders = () => {
return (
<>
<View>
<Text
style={styles.placeholdersText}
>
TEXT
</Text>
</View>
</>
);
};
Related
As the title states, I would like for a MaterialUI FAB button to be centered and stay centered with resizing. The current placement is shown in the screenshot below (off-center) and it does not re-size with window change.
Here is the current FAB button component. It is a child component and I have shown the parent below as well.
I cannot get "justifyContent: "center"" to work as it normally does, as a note.
Any help on centering this and allowing it to scale with window size is welcome! thanks!
FAB button child component
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Fab from '#material-ui/core/Fab';
import NavigationIcon from '#material-ui/icons/Navigation';
import { navigate } from "#reach/router";
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
position: 'fixed',
bottom: "5vh",
right: "50vw",
backgroundColor: 'green',
width: "20vw"
},
},
fab:{
// fontSize: "35px"
},
extendedIcon: {
marginRight: theme.spacing(1),
// fontSize: "35px"
},
}));
export default function AddListingIcon() {
const classes = useStyles();
return (
<div className={classes.root}>
<Fab color="green" aria-label="add" size="large" variant="extended" className={classes.fab} >
<NavigationIcon onClick={() => {
navigate("/ChooseACategory")}} className={classes.extendedIcon}/>
Get Started!
</Fab>
</div>
)
}
Parent component which contains the FAB button child component
import React from "react";
import ReactNavbar from "../components/Navbar";
import Intro from "../components/Intro";
import GetStartedIcon from "../components/GetStartedIcon"
export default function GetStarted({ setSignedIn }) {
return (
<div>
<ReactNavbar setSignedIn={setSignedIn} />
<Intro />
<GetStartedIcon/>
</div>
);
}
Your code works as your wrote it (obviously). The right side of your button is centered as it should be.
You rather need to wrap the Button in a Flexbox. You can use the MUI Grid for that with a width:'100%', position:fixed and the prop justify="center".
Here is a jsfiddle with plain css
https://jsfiddle.net/rq6kvw12/
I am using react-native-render-html to transfer a string into html elements while developing React Native Apps. I received the string by RESTful APIs from backend, and there has already had width and height set in <img> tag:
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
But I want the image to be resized to the largest width of the window, so I use :
imagesMaxWidth={Dimensions.get('window').width}
The whole segment is below:
<ScrollView style={styles.content}>
<Text style={styles.title}>{this.props.title}</Text>
<Text>{this.props.date}</Text>
<HTML
html={this.props.content}
imagesMaxWidth={Dimensions.get('window').width - 40}
/>
</ScrollView>
But the image could not be resized to the max width of the window.
So how could I set this?
Thank you
Use ignoredStyles prop to ignore width and height of the original pictures. Use ignoredStyles={['height', 'width']} to fix the issue.
With the latest 5.0 pre-releases, there is a much cleaner solution. Use the brand new contentWidth prop with useWindowDimensions hook, and images will automatically scale to content width!
yarn add react-native-render-html#unstable
import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';
const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;
export default function App() {
const {width} = useWindowDimensions();
return (
<ScrollView contentContainerStyle={styles.container}>
<HTML contentWidth={width} html={html} />
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});
Result:
In addition, if you want this behavior and don't want images to be greater than, let's say, 300, you can use the new computeEmbeddedMaxWidth prop:
import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';
const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;
function computeEmbeddedMaxWidth(contentWidth, tagName) {
if (tagName === 'img') {
return Math.min(contentWidth, 300);
}
return contentWidth;
}
export default function App() {
const {width} = useWindowDimensions();
return (
<ScrollView contentContainerStyle={styles.container}>
<HTML
contentWidth={width}
computeImagesMaxWidth={computeImagesMaxWidth}
html={html}
/>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});
Result:
This seems like an easy question at first but it's actually tricky.
Better to go directly to the example. I've created a snack with the sample code here https://snack.expo.io/BkSNtNrWV
I want to have a list of items with given aspect ratio (say 3:2) and the items should take as much space as possible with a maximum limit on size. This sample code does it:
<View>
<FlatList style={{backgroundColor:'lightgray'}}
data={[{key: 'a'},{key: 'b'}]}
renderItem={({item}) =>
<View style ={styles.pink}></View>
}/>
</View>
const styles = StyleSheet.create({
pink: {
backgroundColor: "#A37E93",
maxHeight: 150,
aspectRatio: 3/2,
borderWidth: 1,
}});
And this is the result:
However, the problem is that I would like to have the items aligned to the center. I tried to wrap the list item in a flexbox with 'row' direction but that caused the item to have 0 height => not displayed. Justify content didn't help either (it's possible that I do it incorrectly).
Does anyone know how to solve this please?
Updated the code. Add flex to inner item and wrap the view inside another with screen width.
import * as React from 'react';
import { Text, View, StyleSheet,FlatList,Dimensions } from 'react-native';
import { Constants } from 'expo';
const{width} = Dimensions.get('window')
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View>
<FlatList style={{backgroundColor:'lightgray'}}
data={[{key: 'a'},{key: 'b'}]}
renderItem={({item}) =>
<View style={styles.item}>
<View style ={styles.pink}></View>
</View>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
item:{
width:width,
height:150,
alignItems:'center'
},
pink: {
flex:1,
backgroundColor: "#A37E93",
maxHeight:150,
aspectRatio:3/2,
borderWidth:1,
}
});
I am using Radium library for inline styling in react . Using it works fine for other components but i am having issues with Material-UI components. When i hover my mouse over the Paper , it doesn't change the color to green . What's wrong here ? How do I fix this ?
import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '#material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';
class AchievementsHome extends Component {
render() {
return <>
<Grid container alignItems="center" direction="column">
<h1>Achievements</h1>
<Paper
style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
>
<h1>Hi</h1>
</Paper>
</Grid>
</>
}
}
const mapStateToProps = (state) => {
return {
achievements: state.achievements
}
}
export default connect(mapStateToProps)(Radium(AchievementsHome));
With Material UI external styles ( so styles not directly from the Material UI library ) hardly ever work, to change the color on hover you will have to set a theme as explained in the Themes section of the docs
First grab the import withStyles and define a theme.
import { withStyles } from "#material-ui/core/styles";
const customStyles = theme => ({
root: {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
}
});
Than define a new component that is wrapped with withStyles:
const CustomPaper = withStyles(customStyles)(Paper);
In your render use the component you defined:
<CustomPaper
/>
Hope this helps.
Material UI provides its own way of styling using CSS in JS (JSS). It provides a withStyles higher order component and a withTheme and lets you style at a global theme level. You can also pass class names for some components for custom styling.
You do not need to use Radium to style Material UI components.
Also your CSS selector for hovering needs to include the parent CSS selector:
const paperStyle = {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'green'
}
}
return (
<Paper styles={paperStyle}>
<Typography variant="h1">Hi</Typography>
</Paper>
);
In my react native App, i am just trying to add a shared component called RoundImageComponent and added a RoundImageComponent.style to add css styles. When use this Round image component, width of the image will be passed as props according to the requirement in the application. In some cases, width will be not added to the component tag as follow,
RoundImageComponent width={90} roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
or
RoundImageComponent roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
RoundImageComponent Code
import React from 'react';
import {
Text,
View,
} from 'react-native';
import Config from 'react-native-config';
import SplashScreen from 'react-native-splash-screen';
import RoundImageComponent from "./shared/avatar/RoundImageComponent";
import styles from './App.styles';
const resolveSession = async () => {
// const session = sessionActions.getSession();
SplashScreen.hide();
};
setTimeout(() => {
resolveSession();
}, 2000);
const App = () => (
<View style={styles.container}>
<RoundImageComponent width={90}roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
</View>
);
export default App;
RoundImageComponent
import {
StyleSheet,
} from 'react-native';
import { container, primaryText } from '../../theme/base';
export const defaultImage = {
height: 100,
borderRadius: 50,
width: 100
}
const styles = StyleSheet.create({
container: {
...container,
},
userDefinedImage: {
...defaultImage,
width: 40
}
});
export default styles;
When user pass the width as prop, image width should override to the default width and otherwise image width should remain as default width.
Is it possible to do with on this way?
This is possible by passing props to styles. Suppose this as my CustomTextComponent:
export CustomTextComponent = (props)=>{
return (
<Text style={[{fontFamily:"Lato", color:"#000", ...props.style}]}>
{props.children}
</Text>
)
}
Now I want to set different color at different level lets say red and green then
for red
<CustomTextComponent style={{color:'red'}}>
red colored text
</CustomTextComponent>
for green
<CustomTextComponent style={{color:'green'}}>
red colored text
</CustomTextComponent>
Note: Your ...props.style is should be after your default styling. because your last mentioned will override previous one.
You can also make use of default props value in some cases.(lib PropsType)
Yes, it's possible.
You can override the current style prop by passing another one just after it. It would looks something like this:
const styles = StyleSheet.create({
default: {
backgroundColor: red,
color: blue,
},
});
<View>
<DefaultComponent style={styles.default} />
<CustomComponent style={[styles.default, { backgroundColor: none }]} />
</View>
Hope it helps