It seems that react-native doesn't implement CSS' filter property.
Is there a way to replicate those? Specifically I am looking for a way to change the following to an image, without creating a special image just for that:
Brightness
Hue
Saturation
Blur
Blur for images is already supported by RN via blurRadius prop. The remaining filters you can find in my react-native-color-matrix-image-filters library:
import { Image } from 'react-native';
import { Saturate } from 'react-native-color-matrix-image-filters';
const SaturatedImage = ({ saturate, ...imageProps }) => (
<Saturate value={saturate}>
<Image {...imageProps} />
</Saturate>
);
Update RN 0.62.2:
I was using above mentioned Library react-native-color-matrix-image-filters, but I was looking for web support too. As of right now React Native for web supports the css filter property: https://github.com/ndbroadbent/react-native-web/blob/91e4528eac16e10fd3d42644fc4c0c8047bee1bd/docs/components/View.md
For iOS and Android this style property does not work.
Related
I am running the code posted (for Class Component) at:
https://reactnative.dev/docs/dimensions
Yet, at the Android Studio simulator, If I "rotate" the device the dimension's values do not change i.e. I was expecting that the height and width could change with the rotation but this is not happening. Any ideas why?
According to the info posted at the previous link it says:
Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet).
I also tried using using useWindowDimensions but this is limited to functional react components.
So far, I can not find a reliable way to detect if an Android device rotated using React-Native and class components :-(
Note: This problem also happens with React Function Component
Try: https://reactnative.dev/docs/usewindowdimensions
It works for me
import { useWindowDimensions } from 'react-native';
const { height, width } = useWindowDimensions();
I had the same problem. Upgrading react-native to version 0.64.2 fixed it.
My problem on 0.61.5 was not that the values were not correct, but that the view was not re-rendered at all after the rotation, so I added this to the constructor() and it worked:
Dimensions.addEventListener('change', () => {
this.setState({});
});
I have been searching for a good way to get the height of the Header component of a react-native stack navigator to no avail. I've come across a stale, complicated answer that doesn't provide the header height specifically, but seems to unavoidably combine the bottom tab bar height as well. I'd like to know how to calculate the height of just the navigation header and status bar with react-navigation.
For reference, my project is using react-navigation 3.11 however I would happily attempt an upgrade if there is a solution involving features exclusive to 4.x. I have checked the documentation and see how I could supply a static header style but I don't want this. I'd just like to be able to access the navigation header style's height attribute from within a view.
Thanks.
In React Navigation >4.x you can use HeaderHeightContext or useHeaderHeight with React's Context API to get the height of the header:
import { HeaderHeightContext } from '#react-navigation/stack';
// ...
<HeaderHeightContext.Consumer>
{headerHeight => (
/* ... */
)}
</HeaderHeightContext.Consumer>
or
import { useHeaderHeight } from '#react-navigation/stack';
// ...
const headerHeight = useHeaderHeight();
I'm new to React Native (0.59.3) and I'm trying to set default font for all Text components in my app. I've read https://stackoverflow.com/a/47925418/811405 and How to disable font scaling in React Native for IOS app?.
In my App.js I've put:
import { Text } from 'react-native';
Text.defaultProps.style = {
fontFamily: 'AmericanTypewriter' //just for testing
}
But I get Cannot set property 'style' of undefined.
When I add the line Text.defaultProps = Text.defaultProps || {}; before that, I don't get an error, but nothing happens (all Text components still use the default font). I've tried with different fonts (both built-in iOS fonts and my custom fonts that I've linked and verified), using their PostScript names, though nothing happens.
What am I doing wrong?
Add this before changing fontFamily style
import { Text } from 'react-native';
Text.defaultProps = Text.defaultProps || {};
If you want to have your own custom Text in your app, you usually create a custom Text component ... and either use it directly in your screens ... or use it internally in your other custom components ... this way you're going to have consistent look and feel throughout your app
Example
You'd use AppText in your entire app ... and forget about Text
const AppText = ({ text }) => (
<Text style={{ fontFamily: 'AmericanTypewriter', ...restOfYourStyles }}>
{text}
</Text>
);
I'm new to React Native and I'm trying to have icons that are able to have their color changed based on json data received. I've been able to use React Native Vector Icons. However, I have my own icons that I would like to use. On the linked repo page there is something that talks about generating your own icons, but I'm not familiar enough to know how it is supposed to work. My icons are .png files and I'd like to make them so I can give them a color attribute on the fly in my app. I wanted to see what the process was to be able to do that if it was even possible. Can I use the process described in the repo?
Thanks in advance!
So, to create your own icon component, this could be a simple representation:
import React from 'react'
import { View, Image } from 'react-native'
export default class Example extends React.Component{
renderIcon = (iconName, color) => {
iconName = this.props.iconName
color = this.props.color
return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
}
render(){
return(
<View>
{this._renderIcon}
</View>
)
}
}
For example, your .png Icon is called IconHomeFocused, and it's an icon of the home icon when it's focused...then you would put, in your component that you want your Icon to be in: <Example iconName = 'IconHome' color = 'Focused'/>. Of course, this requires you to name your icons carefully. I didn't want to write a million if statements so this seemed like the easiest sort of integration for me. I'm sure there are much better interpretations out there though. Good luck.
I use the same code for android & iOS. However, I found the appearances are different between two platforms, especially the image size (shown as below).
I wanna ask:
How can I set a configuration to make two platforms become consistent?
How to set android & iOS stylesheet setting on the same code?
Thanks!!
<MenuButton onPress={() => this.toggle()} style={styles.menuButton}>
<Image source={require('../images/menu.png')} style={styles.menuButtonImage}/>
</MenuButton>
StyleSheet setting
Android & iOS output
I also noticed images get rendered differently on the other platform. If I remember correctly it should be enough to set a static size. If you have to tweak the style for each platform I would do the following:
# Use a ternary statement in the function that gets your style object:
getImage () {
const getStyle = () => ({height:(Platform.OS === 'ios' ? 36 : 48)})
# then call it where you set the propery:
return <Image source={require('../images/menu.png')} style={getStyle()} />
}
This way it will get called on each re-render of the parent.
In fact, I have all styles defined like this. It works like a charm for dynamic styles that may be dependent on properties. Also, it's a nice pattern to keep components and functions in components that return elements as self contained as possible.