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.
Related
I need to add a custom font to my app. And all the text, including the button title, have to be displayed in the custom font.
How can I achieve this?
I have added custom font in my app. But it needs to provide font family style to every text and can't change the font family of the button title.
These answers seem like they didn't really read your question.. So here's how to use a font globally without the need of specifying it each and every time:
Create a component like so:
import * as React from 'react';
import { Text } from 'react-native';
export default (props) => {
const defaultStyle = { fontFamily: 'Muli', color: '#14181c' };
const incomingStyle = Array.isArray(props.style) ? props.style : [props.style];
return <Text {...props} style={[defaultStyle, ...incomingStyle]} />;
};
Now, everywhere you have
import { Text } from 'react-native',
replace with
import { Text } from 'src/global-components' :)
Usual way of doing this is:
download font families you want
add all the font files you want to an “assets/fonts” folder in the root of your react native project next
add the location of font file in your package.json "assets": ["./assets/fonts/"]
Run react-native link
And you can use it by name convention of your font files.
I am trying to add a custom image source to the attribute iconButtonCenter in the React Native library named react-native-circle-button.
https://github.com/dwicao/react-native-circle-button
According to the documentation, iconButtonCenter is of type enum, so I imported the icon and then passed it in directly where I create my CircleButton object. It does not yell as if it is a number or string, yet I still am not 100% sure it is technically of type enum. I know for a fact it is finding the image in the right path. I also know that it is doing something, because the default image is no longer observable on the app, it just no longer has an icon. I am not getting any compilation errors or warning, yet I still do not see the icon appear over the button as it should. How do I fix this?
Here is the render within my component that allows circle button's to be draggable. I also went ahead and put my import at the top so you can see how this was stored.
import letterA from '../assets/letters/alpha-a.svg';
render() {
let { pan } = this.state;
let [translateX, translateY] = [pan.x, pan.y];
let moveableStyle = {transform: [{translateX}, {translateY}]};
const panStyle = {
transform: this.state.pan.getTranslateTransform()
}
return (
<Animated.View
{...this._panResponder.panHandlers}
style={[moveableStyle, panStyle]}>
<CircleButton iconButtonCenter={letterA} /> <--- Here is the image source reference.
</Animated.View>
);
}
The CircleButton component should successfully have the image fed to it and remain centered over the button even when dragged along the string.
Problem was the picture format was an .svg, converting the icons to .png worked like a charm!
I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
I'm not using the native navigation for my app. I have these SVGIcon that I want the user to tap and have the new page slide in from the right moving left. On that page when they tap the back, the page should slide back out to right. In other cases, I want the page to slide in from the left, or from the top, etc... Each time, the "back" button should just reverse that transition.
I found this package where I was able to get pages to slide in from the right. The issue I have is that the back button also slides the page off to the left. Here's a sample code I have doing this.
import React from 'react';
import { createTransition, SlideLeft, SlideRight } from 'react-native-transition';
const Transition = createTransition(SlideLeft);
export default class App extends React.Component {
//... some code to decide what page is CurrentScreen
render() {
return (
<Transition>
<CurrentScreen navigate={this.navigate} />
</Transition>
)
}
}
From this code, I'm not sure how I would implement SlideRight if the Transition node is already using SlideLeft. Maybe there's a better package, or a built in way to handle what I want?
Have a look at the following:
https://reactnavigation.org/docs/en/
https://github.com/fram-x/FluidTransitions
the react navigation lib is the simplest to implement, and there is a recommended community extension for fluid transitions, which would allow you to set an an appear and disappear animation:
<Transition appear='scale' disappear='bottom'>
<View style={styles.circle}/>
</Transition>
for native transitions have a look at the excellent library from the wix team: https://wix.github.io/react-native-navigation/#/third-party-libraries-support
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.