I have js files Dashboard and Adverts. I managed to get Dashboard to list the information in one json file (advertisers), but when clicking on an advertiser I want it to navigate to a separate page that will display some data (Say title and text) from the second json file (productadverts). I can't get it to work. Below is the code for the Dashboard and next for Adverts. Then the json files
import * as React from 'react';
import { Text, View, StyleSheet, Image, FlatList, TouchableOpacity } from 'react-native';
import advertisers from '../data/advertisers.json';
export default class Advertisers extends React.Component {
rendItem = listItem => {
let item = listItem.item
return (
<TouchableOpacity onPress={() => this.advertSelected(item)}>
<Text>
{' '}{item.id}{' '}{item.company}{' '}
</Text>
</TouchableOpacity>
);
};
advertSelected = (item)=>{
this.props.navigation.navigate("Adverts",{advert:item})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>List of advertisers</Text>
<FlatList
style={styles.list}
data={advertisers}
renderItem={this.rendItem}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: { marginTop: 30, marginLeft: 20 },
title: { fontSize: 20 },
list: { paddingTop: 20 },
});
Adverts
import * as React from 'react';
import { Text, View, StyleSheet, Image, FlatList, TouchableOpacity } from 'react-native';
import adverts from '../data/productadverts.json';
export default class Adverts extends React.Component {
rendItem = listItem => {
let item = listItem.item
let advert = this.props.navigation.getParam("advert")
let pic = advert.picture
let title = advert.title;
let id = advert.id;
};
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>List of advertisers</Text>
<FlatList
style={styles.list}
data={adverts}
renderItem={this.rendItem}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: { marginTop: 30, marginLeft: 20 },
title: { fontSize: 20 },
list: { paddingTop: 20 },
});
advertisers.json
[
{
"company": "Fujifilm",
"id": 1,
"address": "St Martins Business Centre, St Martins Way, Bedford MK42 0LF",
"contactperson": "Carrie Perrett",
"contactnumber": "01234572000",
"emailaddress": "[email protected]",
"logo": "https://logos-download.com/wp-content/uploads/2016/04/Fujifilm_logo_slogan_value_from_innovation.jpg"
},
{
"company": "Boeing",
"id": 2,
"address": "25 Victoria St, Westminster, London SW1H 0EX",
"contactperson": "Joanne Cumner",
"contactnumber": "02073401900",
"emailaddress": "[email protected]",
"logo": "https://www.govconwire.com/wp-content/uploads/2013/06/boeing-logo.jpg"
},
{
"company": "IBM",
"id": 3,
"address": "Birmingham Rd, Warwick CV34 5AH",
"contactperson": "Allan Elborn",
"contactnumber": "01926464000",
"emailaddress": "[email protected]",
"logo": "https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2012/08/ibm-logo.jpeg"
},
{
"company": "Fujitsu",
"id": 4,
"address": "55 Jays Cl, Basingstoke RG22 4BY",
"contactperson": "Alex Taylor",
"contactnumber": "08433545555",
"emailaddress": "[email protected]",
"logo": "https://i.pinimg.com/originals/48/dc/fc/48dcfcd5df1834f66d029d7d34fae26d.png"
}
]
productadverts.json
[
{
"title": "ICT and Fujifilm’s new wave of innovation",
"id": 1,
"text": "Taking outstanding ICT achievements to the next level. ICT continues to advance rapidly. One recent example is the Internet of Things (IoT), in which devices and appliances have Internet connectivity and ICT functions built in. Moreover, ICT appears ready to take off in industry as never before, spurred by new advances in such technologies as artificial intelligence (AI) and virtual reality (VR). Some even view these trends in ICT as having the potential to lead to a new Industrial Revolution. As a leading technology company, Fujifilm is poised to become a major creative force in ICT and drive its own wave of innovation.",
"picture": "https://2df223ae-a-62cb3a1a-s-sites.googlegroups.com/site/eportfolioduaa/home/advantages-and-disadvantages-of-i-c-t/ict%202.png?attachauth=ANoY7cpUeQC5IlBqWx_cSW5wq5f4lDOPpWph4cfUpWUbE5h-fxfKatvv_ztmibYt834f8GHLpHcgZ6yA3wmc7c7veFhbf5NMke0MAkprLtZZHdllza0Q62BOEj3SHvZMg4rGKJegcIwfb6zW8a4OqAdgqFYvU1BCtNm25YqpngDRRN0HPqt8PmulWjVk2TS4jDWOt4KZfAd9pznmf8fi3Vw-zZJ0Ne_yFRON763E-2v8YzwRFc3yui_HfDE3HsqxcF3JIOizhQSVnqnJStlxeyzTDH_1yL8iZg%3D%3D&attredirects=0",
"advertiser": "Fujifilm"
},
{
"title": "Technologies",
"id": 2,
"text": "Fujifilm is a technology company. A photography company. Although quite a few people still have this image of Fujifilm, today it’s so much more. By leveraging the technologies it originally developed for the photography industry and continuously and proactively pursuing advanced R&D, Fujifilm has created businesses in multiple high-tech fields and become a technology-oriented company. ",
"picture": "https://logos-download.com/wp-content/uploads/2016/04/Fujifilm_logo_slogan_value_from_innovation.jpg",
"advertiser": "Fujifilm"
},
{
"title": "2020 Call for Code Global Challenge",
"id": 3,
"text": "Get inspired. Join the fight. Impact the world. Congratulations to the initial COVID-19 solutions that are now receiving deployment support. They show how technology can help small businesses find assistance after a crisis, redefine the queuing experience and guide us to the right medical advice. Developers and problem solvers, remember you have until July 31 to submit your open source solutions.",
"picture": "https://res.cloudinary.com/practicaldev/image/fetch/s--YBeZKs5E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/c5zqnlp91mjy1v4uqaog.png",
"advertiser": "IBM"
},
{
"title": "It’s not about the data – it's what you do with it!",
"id": 4,
"text": "Power your operations and gain valuable insights using data analytics. Boeing AnalytX utilizes our aerospace expertise with data-based information to give you empowered decision support to optimize your operation and mission. Applications using Boeing predictive analytics give customers a glimpse into the near-future; more time to evaluate, plan and manage solutions. Boeing AnalytX offers three interrelated categories of analytics enabled products and services customers may easily mix and match to meet needs and goals. Digital Solutions – a set of analytics enabled software applications addressing the needs of crew and fleet scheduling, flight/mission planning and operations, maintenance planning and management, and inventory and logistics management. Analytics Consulting Services – a group of aviation, business, and analytics professionals who are ready to help customers improve their operational performance, efficiency, and economy. Self-Service Analytics – our newest category, that opens up the data behind the digital solutions for customers to explore and discover new insights and opportunities using Boeing provided analytics tools. ",
"picture": "https://www.govconwire.com/wp-content/uploads/2013/06/boeing-logo.jpg",
"advertiser": "Boeing"
},
{
"title": "Rethinking business and society in times of crisis",
"id": 5,
"text": "The continued spread and effects of the Coronavirus (COVID-19) are disrupting the everyday lives of people, society and businesses alike, and triggering inevitable and reasonable concerns among us all. Alongside our ongoing commitment to supporting many of the critical systems on which the UK relies every day, we have made it a priority to look at where Fujitsu technology and innovation can support the response to COVID-19. ",
"picture": "https://i.pinimg.com/originals/48/dc/fc/48dcfcd5df1834f66d029d7d34fae26d.png",
"advertiser": "Fujitsu"
}
]
