0

I am attempting to pull the contents of this .json file (colors.json). I don't really know what the issue is with my code. Can't figure out the correct call in the Text tag

react-native-cli: 2.0.1 react-native: 0.39.0

Quote.js

var colors = require('./colors.json'); class Quote extends Component { render () { return ( <View style={styles.container}> <Text style={[styles.author, styles.text]}>Denise Lee Yohn</Text> **<Text style={styles.quote}> {colors.hexValue}</Text>** </View> ) } }

Colors.json

{ "colorsArray":[{ "colorName":"red", "hexValue":"#f00" }, { "colorName":"green", "hexValue":"#0f0" }, { "colorName":"blue", "hexValue":"#00f" }, { "colorName":"black", "hexValue":"#000" } ] }

Image of Output (Edit)

enter image description here

Improve this question

1 Answer 1

Reset to default
2

You need to perform a loop on the colors array in render() method to display each color's hexValue.

render () { return ( <View style={styles.container}> <Text style={[styles.author, styles.text]}>Denise Lee Yohn</Text> { colors.colorsArray.map((color, index) => { return <Text key={index} style={styles.quote}>{color.hexValue}</Text>; }) } </View> ); }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

that doesnt seem to be working. There is nothing being written on the screen at all. Do I need to declare anything before dropping the above code into the file? (I have restarted my server).
Just replace your render() with the above code and it should be working fine. If it is still not working, can you take a screenshot on what is being shown?
the screenshot of the output is in the question.
It also appears that import colors from './colors.json'; is now the accepted syntax, rather than var colors = require('./colors.json');

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.