I'm not sure why, but my app does not like the StyleSheet I created for components. In index.js (top level) I import global var
import global from './src/global';
then I use global.width which is set to the width of the screen (correctly) in my styles.js file at /src/styles.js. I then export various styles from the Styles file like the one below called "button". Finally in my button component, I use the array notation for react native styles, giving several widths to the component (assuming the highest index takes precedence), but I just get an error.
Sample of exported "button" StyleSheet
...
padding: 12,
margin: 10,
//width: global.width/2.0,
alignSelf: "center",
marginTop: "auto",
...
Button Component
<TouchableOpacity
onPress={this.props.onPress}
style={[
button.regularContainer,
styles.localButtonStyle,
this.props.style,
]}>
<Text style={[
button.regularText,
styles.localTextStyle,
this.props.textStyle,
]}>
{this.props.title || 'Button'}
</Text>
</TouchableOpacity>
Error
Invariant Violation: [33,"RCTView",541,{"color":4278190080,"textAlign":"center","width":"<<NaN>>","backgroundColor":1308622847,"borderWidth":0,"borderColor":4294967295,"marginTop":40}] is not usable as a native method argument
These errors go away if I remove the width element from most of the three stylesheets interacting with the component: button.regularContainer, styles.localButtonStyle, this.props.style
global.js
import React from 'react';
import {
Dimensions,
Platform,
} from 'react-native';
let global: {
HermesInternal: null | {}
};
global.width = Dimensions.get('window').width
global.height = Dimensions.get('window').height
global.ios = Platform.OS === 'ios'
export default global;
The error looks like it's trying to assign an NaN (Not a number) value to width.
Is global.width/2.0 definitely producing a valid number?
I suggest replacing this division of a variable with an actual number and see if the error still occurs.
Related
I have the following basic card (https://github.com/Aamirali86/react-native-shadow-cards?ref=morioh.com&utm_source=morioh.com) being included on the page and the text is showing outside of the card. What can I do to make it show inside of it i.e. the card to expand with the contents?
import { Text, View } from "react-native";
import { Card } from "react-native-shadow-cards";
import PostResponseModel from "../../APILibrary/Models/Post/PostResponseModel";
import React from "react";
export default function ViewPost(props: { post: PostResponseModel }) {
return (
<Card style={{ padding: 10, margin: 10 }}>
<Text style={{ fontWeight: "bold" }}>Subject</Text>
<Text>Body</Text>
</Card>
);
}
I've tried React Native Elements Card instead but I have the same issue.
I figured out that because it was inside of a tabview body that the tabview needed at least a minHeight and it started working as expected
I was following Multiplatform Mobile App Development with React Native course at Coursera and in that course the instructor use a Card component. But I got warning when I exactly use the same code in my project.
Warning: Failed prop type: Invalid props.style key `0` supplied to `Image`.
here is the full warning message.
I think the following code causes the warning,
import React from 'react';
import { Text, View } from 'react-native';
import { Card } from 'react-native-elements';
function RenderDish(props) {
const dish = props.dish;
if (dish != null) {
return (
<Card
featuredTitle={dish.name}
image={require('./images/uthappizza.png')}
>
<Text style={{ margin: 10 }}>{dish.description}</Text>
</Card>
);
} else {
return <View></View>;
}
}
function Dishdetail(props) {
return <RenderDish dish={props.dish} />;
}
export default Dishdetail;
But I didn't get why this warning was given? I didn't pass any prop which is related with style then why this occur? I heartily thank if anyone help me to figure out this.
As #Maycon Mesquita said, I tried <Card style={{ width: 150, height: 150 }}> as a prop in the Card but the warning is still there.
The <Card /> component is passing an array's element as a style's prop to Image. This is wrong.
Try to set a width/height to card.
However, without knowing the card's code, i would try a generic style prop:
Option A: style={{ width: 150, height: 150 }}
Option B: containerStyle={{ width: 150, height: 150 }}
Otherwise, you will need to post the Card's component code, to we the Image prop's name.
I am experiencing some difficulty when using flex for layout in React Native. I have reduced the behaviour I am experiencing down the the following problem.
I have one container which fills the available space since it has flex set to 1. I then have a child within that container which should fill the container, so I have set it's flex to 1. I also want the container to have padding at the top. I would therefore expect the child to fill all of the parent apart from the top 20%. However, what I am seeing is that there is equal padding at the top and bottom of the container around the child (as if I had set paddingVertical instead of paddingTop).
Is anyone able to explain why this behaves as it does? I am also intrigued by the behavior I saw when creating a snack to illustrate this problem. On the iOS and Android simulators I am experiencing the behaviour which seems erroneous to me whereas the Web view seems to work as I would expect with only a gap at the top.
Thanks!
Snack example code
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.child}>
<Text>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'green',
paddingTop: '20%'
},
child: {
flex:1,
backgroundColor:'red'
},
});
Android - 'broken' behaviour
Web - 'expected' behaviour
using the snack below:
https://snack.expo.io/ry_5rCk84
I am trying to display the icon 'wifi_off' using Material Icons in my react native app (just shared this as a snack on expo for easier sharing) but this is not a recognised value for prop 'name'.
and ends up displaying a '?' for unknown icon.
I am able to use wifi-off icon using 'material-community' icon set
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';
// 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 style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
<Icon name='wifi' size={50} type='material'/>
<Icon name='wifi-off' size={50} type='material-community' />
<Icon name='wifi_off' size={50} type='material' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
react-native-elements uses react-native-vector-icons to display the icons.
react-native-vector-icons has a directory where you can check which icons are available, you can look them up by name. https://oblador.github.io/react-native-vector-icons/
If you search for all the icons that have wifi in their name you find the following result for MaterialIcons and MaterialCommunityIcons
If you search for wifi_off you will find that there are no results.
Therefore wifi_off is not available to use.
It is also worth noting that react-native-elements currently doesn't support the latest version of react-native-vector-icons, you can see that in this currently open issue.
When you are using react native elements Icon, behind the scenes it is searching in a list https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json, here you can find the names of the Icons that are supported and as you can see "wifi_off" is not here, maybe you can try "signal-wifi-off".
I have a component, Logo, where I'm trying to apply a width and a height:
import styledNative from "styled-components/native";
import {Image, View} from "react-native"
import companyIcon from "../svg/companyIcon.svg";
const Logo = () => (
<Image source={{uri: companyIcon}} />;
);
const StyledLogo = styledNative(Logo)`
width: 48px;
height: 48px;
`;
const Header = () => {
return (
<View>
<StyledLogo />
</View>
);
};
This leaves us with an invisible logo, with a width of 0. Styled-components docs seems to suggest using a passed in className property (https://www.styled-components.com/docs/advanced#existing-css), however this seems to be for standard styled-components, not react-native / react-native-web implementation, because it's just not passed to my component. When I examine the passed props for Logo (by console logging them), there is a style object, but this doesn't appear to be anything I can use and there's not much mention of it in the styled component documentation:
style: Array(2)
0: 91
1: undefined
length: 2
So I'm not really sure what to do with it. How can components be styled by styled-components?
You aren't applying your styles to the image.
What is happening now, is that your Logo component is receiving those style-props, but it's not passing them through.
const Logo = (props) => ( // <-- containing style props
<Image source={{uri: companyIcon}} />;
);
So what you would want to do is to spread your Logos props over your Image, so it gets the data it needs.
const Logo = (props) => ( // <-- containing style props
<Image {...props} source={{uri: companyIcon}} />; // <-- styles now applied to Image
);
Or alternatively you can pass through just the style-props.
const Logo = (props) => ( // <-- containing style props
<Image source={{uri: companyIcon}} style={props.style}/>;
);
Edit:
It also appears you are passing invalid styles. React Native expects the values you pass in to not have units. As such, your styles should be width: 48; instead, dropping the ...px.