I am new in react native and I was trying to use the "react-native-snap-carousel". The carousel is working with the parameters in the "carouselItems" variable as I sent, but the image is not working. I supoused to place it at the Card as a background image, with a short description with the same parameter array, but it is not working.
Can anyone help me to set it?
the array used to fill the cards:
const carouselItems = [
{
title: "Doce",
text: "[TEXTO DESCRITIVO]",
thumbnail: "assets/splash.png",
},
{
title: "Salgado",
text: "[DESCRIÇÃO]",
thumbnail: "assets/splash.png",
},
]
the folder structure is:
homemade-app / assets / splash.png
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.thumbnail }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.2}
{...parallaxProps}
/>
{item.thumbnail}
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
)
}
const goForward = () => {
carouselRef.current.snapToNext();
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={goForward}>
<Text>go to next slide</Text>
</TouchableOpacity>
<Carousel
layout={"default"}
ref={ref => carousel = ref}
data={carouselItems}
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
renderItem={renderItem}
onSnapToItem={index => setState({ activeIndex: index })}
hasParallaxImages={true} />
</View>
);
}
I saw the article about how to handle local file with assets, but I still could not make it work properly.
Link to the article: (https://dev.to/fdefreitas/how-to-obtain-a-uri-for-an-image-asset-in-react-native-with-expo-7bm)
If you are using expo. First of all try with a static route remember you need full path not assets/myimage this is wrong, because sometime use it from array give problems like in this question Render images sources from parsed array of objects in react native .
array
const carouselItems = [
{
title: "Doce",
text: "[TEXTO DESCRITIVO]",
thumbnail: require("./../assets/splash.png"),
},
{
title: "Salgado",
text: "[DESCRIÇÃO]",
thumbnail: require("./../assets/splash.png"),
},
]
<ParallaxImage
source={require('#expo/snack-static/yourimage.png')}
...
/>
or put your image in same folder
<ParallaxImage
source={require('./your-image.png')}
...
/>
Related
During the tests, I constructed a wall for pictures that was then used in the list of objects
const przyklad = require('../assets/servicesIcons/przyklad.png');
const product =
[
{
id: 1,
image: przyklad,
title: 'przyklad'
},
{
id: 2,
image: przykald2,
title: 'przyklad2
},
In Flatlista I downloaded objects and saw a list of pictures with the title. At the moment I wanted to change so that everything was downlad from the DB but the does not get me a picture, I do not know how to connect this string from the DB with require to read the picture?
function Product({id, image , title}) {
const navigation = useNavigation();
return (
<View style={styles.rootCointener}>
<TouchableOpacity onPress={() => {navigation.replace('Term', {id: id, title: title})}}>
<Image style={styles.imageCointener} source={image} />
</TouchableOpacity>
<Text style={styles.textCointener}>{title}</Text>
</View>
)
}
If you are getting Base64 string from your DB for the image. You can use it as following
const base64Image = 'data:image/png;base64, <Your Base64 string>'
<Image style={styles.imageCointener} source={{uri: base64Image}}/>
Note: Please comment / edit the quetion with what is the response ur getting from the DB So that I can assist better.
The component file:
{ return (
<TouchableOpacity /* onLongPress={onLongPress} style={[styles.card, backgroundColor]} */>
<View style={styles.fixToText}>
<Text style={styles.title}>{item.post_title}</Text>
<MaterialCommunityIcons
name="star-outline"
size={24}
color="black"/>
</View>
<Text style={styles.tasks}>{item.post_info}</Text>
<View style={styles.fixToText}>
<Text style={styles.time}>{item.time}</Text>
</View>
</TouchableOpacity>
);
}
App.js file
const App = () => {
const [tasks,setTasks]= useState([
{
id: 1,
post_title: "NEW Task",
post_info: "Assigned with the ID",
time: "1 min ago",
},
{
id: 2,
post_title: "NEW Task",
post_info: "Assigned with the ID",
time: "1 min ago",
},
]);
return (
<>
<Notification task={tasks}/>
</>
);
}
I am sure that the props are not being properly passed. Where exactly is it wrong ? I have passed it from App to Component file using {task} . I can only see the star icon though displayed at the side.
Are you able to attach the whole component?
it seems like the name should be either props.task[i].post_title
or in case you destruct the props using const {task}=props it should be task[i].post_title
I have a nested array of "credits"
const credits = [
{
id: 1,
heading: 'Test Organisation',
credits: [
{id: 1, text: 'Joe Bloggs'},
{id: 2, text: 'Jane Bloggs'},
]
},
....
];
I am wanting to print each "header" in a <Text> element, and then subsequently each of their "credits" in a <Text> element.
I have looked at the following already answered questions on how to achieve this, but one is for ReactJS and uses HTML and the other that uses React Native outputs only the opening tag of a view:
Cannot Render Nested Maps In ReactJS
How to use if else condition inside nested map function in react-native?
I am being told there is a syntax error as it is expecting a close parentheses after the end of the first <Text> element.
Here is what I have:
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.centredHighlightHeaderWrapper}>
<Text style={styles.centredHighlightHeader}>
Credits
</Text>
</View>
{
credits.map(item => (
<Text style={styles.centredHeader}>{item.heading}</Text>#Unexpected token -- js error says expecting "," - phpstorm says expecting ")"
{
item.credits.map(credit => (
<Text style={styles.name}>{credit.text}</Text>
))
}
))
}
</ScrollView>
);
}
{
credits.map(item => (
<React.Fragment>
<Text style={styles.centredHeader}>{item.heading}</Text>
{
item.credits.map(credit => (
<Text style={styles.name}>{credit.text}</Text>
))
}
</React.Fragment>
))
}
You can't have adjacent react elements without a container. So I've put them both in a React.Fragment for you
I'm using React-native Flat List in which i have passed sorted array into data props.Now i want to show items according to date
MY code :
<FlatList
horizontal={true}
keyExtractor={(item, index) => index.toString()}
data={this.state.Data}
renderItem={({ item }) =>
<View>
<Image source = {{uri: item.image}}/>
<Text>{item.date}</Text>
</View>
}
/>
I want my image show according to item.date.For example :
Date - 20-09-2018
Image1 ..Image 2...
Date - 21-09-2018
Image1..Image2 ...
Help me !!
You can use SectionList for this purpose as it provides good API for handling such cases.
<SectionList
style={{ flex: 1 }}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
sections={list || []}
ItemSeparatorComponent={this.renderSeparator}
/>
For that you need to map your data and create something like an array of objects as
[
{
heading: 'Date - 20-09-2018',
data: [Image1, Image2]
},
{
heading: 'Date - 21-09-2018',
data: [Image1, Image2]
}
]
So the renderSectionHeader function will be something like:
renderSectionHeader = ({section}) => {
return (
<View>
<Text>{section.heading}</Text>
</View>
)
}
And all the other functions like renderItem, renderSeparator etc. you can define as you want.
Check this link for more info
I am trying some react native code which is as follows , I want to set the static images to an image view as follows but it doesn't load
const items = [
{ name: './images/home.png', code: '#1abc9c' }, { name: './images/home.png', code: '#2ecc71' },
{ name: './images/home.png', code: '#3498db' }, { name: './images/home.png', code: '#9b59b6' }
];
return (
<ImageBackground
source={require('./images/marble.jpg')}
style={styles.backgroundImage}>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Image source={require(item.name)}></Image>
</View>
)}
/>
</ImageBackground>
);
Error I get is
calls to require expect exactly 1 string literal argument, but this was found: require(item.name).
Ofcourse I am new to react native so kindly ignore my missed terminology
You try like this
const items = [{ name: require('./images/home.png'), code: '#1abc9c' },{...}]
then
<Image source={item.name}></Image>