I'm attempting to use React Native with FontAwesome. I have installed the following libraries:
"#fortawesome/fontawesome-svg-core": "^6.3.0",
"#fortawesome/react-native-fontawesome": "^0.3.0",
"react-native-fontawesome": "^7.0.0",
I'm attempting to render a icon like the following:
// Utils
import { parseIconFromClassName } from 'react-native-fontawesome';
import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
export default function ProjectsCard({ projeto, onCardPress, onMorePress }: ProjetosCardProps) {
const parsedIcon = parseIconFromClassName('fas fa-home'); // 'fas fa-building'...
return (
<Container onPress={onCardPress}>
<MainContent>
{isThis ? (
<ProjectImage source={{ uri: this }} />
) : (
<FontAwesomeIcon icon={parsedIcon} />
)}
Although I keep getting this error (and the icons wont work):
Type 'string | undefined' is not assignable to type 'IconProp'.
Type 'undefined' is not assignable to type 'IconProp'.ts(2322)
index.d.ts(9, 3): The expected type comes from property 'icon' which is declared here on type 'IntrinsicAttributes & Props'
My icons will come from the backend, so I can't directly import them at the top
Related
I'm attempting to use GL-REACT-NATIVE with expo to apply filter (Default presets) to images. I could manage to make it work with a default url from the package, 'https://i.imgur.com/5EOyTDQ.jpg' although I wan't to use it on my own urls from expo-images-picker, I'm receiving the current url from images picker: "ph://ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED", When I attempt to use this url on the uri field I get an error:
[Unhandled promise rejection: Error: Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSErrorFailingURLStringKey=ph://ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED, NSErrorFailingURLKey=ph://ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED, _NSURLErrorRelatedURLSessionTaskErrorKey=(]
this is my code:
import React, { useState } from 'react';
import { CreateBar } from '../../components/CreateBar';
import { Container, ImageContainer, Image, FilterText, FilterContainer } from './styles';
import ImageFilters, { Presets, Constants } from 'react-native-gl-image-filters';
import { Surface } from 'gl-react-native';
// Translation
import i18n from 'i18n-js';
import { ScrollView, Text, View } from 'react-native';
export function Filters({ navigation, ...rest }: any) {
console.log(rest);
return (
<Container>
<CreateBar
iconName="Filter"
onPressIcon1={() => navigation.goBack()}
onPressIcon2={() => console.log('forward')}
/>
<ImageContainer>
<Surface style={{ width: '100%', height: '100%' }}>
<ImageFilters {...Constants.DefaultPresets[10].preset} width={300} height={300}>
{{ uri: rest.route.params.images[0] }}
</ImageFilters>
</Surface>
</ImageContainer>
<FilterContainer>
<FilterText>Filter</FilterText>
</FilterContainer>
</Container>
);
}
I Had a look into this: https://github.com/ivpusic/react-native-image-crop-picker/issues/384#issuecomment-317628146
Although my image looks like this:
When it was supposed to look like:
I have an image slider component to display images from my Firebase database as follows ,
import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'
const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={styles.wrapper}
showsButtons={false}
loadMinimal={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
activeDotStyle={styles.activeDotStyle}
dotStyle={styles.dotStyle}
loop={true} autoplay={true}
>
{images.map((data, index) => {
return (
<View key={index} style={styles.slider}>
<Image style={styles.itemImage} source={{ uri: data }} />
</View>
)
})}
</Swiper>
)
}
For test above component I used follwing test file ,
import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';
test('renders correctly', () => {
const tree = renderer.create(<ImageSlider />).toJSON();
expect(tree).toMatchSnapshot();
});
When I'm run npm test command and after I got following error
TypeError: Cannot read property 'map' of undefined
Can anyone help me to slove this problem , Thank you
In your test, you're creating an ImageSlider without any parameters:
<ImageSlider />
In ImageSlider, you try to map the property images:
images.map( //etc
Because you didn't pass in an images parameter/property, images is undefined when you try to map it. To solve, this pass in value for images in your test:
<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>
The other option is to redesign ImageSlider so that it fails gracefully if images is undefined. But, then there wouldn't be much a point in doing the test (unless the test was to see what happens if no parameter is passed in)
I'm developing my first app with React Native and i'm stuck in a problem with dynamic component name.
I call a class named IconAccounts with two props: icon and bgColor. The props icon represent the component (a react native SVG component) that need to render inside IconAccount.
Everything should work but i have an error:
Invariant Violation: View config not found for name iconName
IconAccount :
import iconName from "../path/to/iconName"
someMethods(){}
render(){
const TagName = this.props.icon
return (
<View style={{backgroundColor: '#'+this.props.bgColor}}>
<TagName/>
</View>
)
}
Call of IconAccount :
<IconAccounts icon="iconName" bgColor="#ffffff"/>
icon code example (generate with svg-to-react-native-cli)
export default function iconName(props) {
return (
<Svg>
//SvgThings
</Svg>
);
}
I am trying to type annotate my React Native project using Flow, but I am having trouble finding the type definitions for the Text and TouchableOpacity elements so I can reference their style prop type definitions. How can I import and/or reference the type definitions for these elements?
Code below:
// #flow
import * as React from "react";
import { Text, TouchableOpacity } from "react-native";
type Props = {
segmentIndex: number,
segmentInfo: {
title: string
},
segmentStyle: ???, // WHAT SHOULD I USE HERE?
titleStyle: ???, // WHAT SHOULD I USE HERE?
onSelection: (number) => void
}
export const SegmentButton = (props: Props) => {
const _segmentPressed = () => {
props.onSelection(props.segmentIndex)
}
return (
<TouchableOpacity style={props.segmentStyle} onPress={_segmentPressed}>
<Text style={props.titleStyle}>{props.segmentInfo.title.charAt(0).toUpperCase() + props.segmentInfo.title.substring(1)}</Text>
</TouchableOpacity>
)
}
There are many ways to define StyleSheet type.
1. react-native generic way
reference from react-native library,
SwipeableQuickActionButton.js
import { View } from 'react-native';
type Prop = {
style?: ?View.propTypes.style,
}
2. react-navigation generic way
reference from react-navigation library,
TypeDefinition.js
export type Style =
| { [key: string]: any }
| number
| false
| null
| void
| Array<Style>;
If you already installed react-navigation, import it from:
import type { Style } from 'react-navigation/src/TypeDefinition';
type Prop = {
style?: Style,
}
Or you can still use it by define in your own file.
3. make Style type specific for <Text /> and <TouchableOpacity />
It would be the hard way -- although doable, see if that worth the trouble.
take <Picker /> for reference, it defined itemStyle for <Text /> like below, which corresponding to text style for each picker item.
var StyleSheetPropType = require('StyleSheetPropType');
var TextStylePropTypes = require('TextStylePropTypes');
var TextStyle = StyleSheetPropType(TextStylePropTypes);
type Prop = {
itemStyle: TextStyle
}
To use it in your own library, import them from:
import TextStylePropTypes from 'react-native/Libraries/Text/TextStylePropTypes';
import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType';
let TextStyle = StyleSheetPropType(TextStylePropTypes);
type Prop = {
style?: ?TextStyle,
}
Hi I am running into the error "Unknown named Module" when trying to dynamically update image using componentWillReceiveProps. Essentially I have a topics component which has a list of topics, when a topic is clicked it gives props to another component (thumbnails) and the images related to that topic are populated.
Here is some code for the thumbnails component:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Player from './player.js';
import styles from '../stylesheet.js';
let baseurl = '../assets/thumbnails/';
let extension = '.jpeg';
export default class Thumbnails extends Component {
constructor(props){
super(props);
this.state = {
current: [
require('../assets/thumbnails/narcolepsy-1.jpeg'),
require('../assets/thumbnails/narcolepsy-2.jpeg'),
require('../assets/thumbnails/narcolepsy-3.jpeg')
]
}
}
componentWillReceiveProps(nextProps) {
setTimeout(()=>{
let topic = nextProps.current.toLowerCase();
let current = [];
for(let i = 1; i <= 3;i++){
current.push(require(baseurl + topic + '-' + i + extension));
}
this.setState({current,})
},1000)
}
render() {
const thumbnails = this.state.current.map((path,i) => {
return(<Image
source={path}
style={styles["thumbnail"+(i+1)]}
key={"thumbnail"+i} />);
})
return(
<View style={{flexDirection:'row'}}>
{thumbnails}
</View>
)
}
}
I've found a similar question (React-native image - unknown named module '../img/2.jpeg') that says to use source={uri: 'file.extension'};
and to keep image assets in the folder android/app/src/main/res/drawable
However I do not have an android folder, as I am using CRNA and Expo.io. Here is my project structure, please tell me what to do in this context:
App.js app.json my-app-key.keystore stylesheet.js
App.test.js assets node_modules yarn.lock
README.md components package.json
Using dynamic require calls is not supported by the React Native packager. This is outlined in the docs: React Native - Images
In order for this to work, the image name in require has to be known statically.
// GOOD
<Image source={require('./my-icon.png')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
I would suggest creating a static data structure to hold your images, such as an object like:
const images = {
narcolepsy: [
require('../assets/thumbnails/narcolepsy-1.jpeg'),
require('../assets/thumbnails/narcolepsy-2.jpeg'),
require('../assets/thumbnails/narcolepsy-3.jpeg')
],
apnea: [
require('../assets/thumbnails/apnea-1.jpeg'),
require('../assets/thumbnails/apnea-2.jpeg'),
require('../assets/thumbnails/apnea-3.jpeg')
]
};
This way, the packager can load your references up when the bundle is created.