Update this example for create-react-native-app?
Opened this issue · 3 comments
"Metro Bundler has encountered an error"
Edit: Unable to resolve module os
from "C:..get-user-agent.js" Module does not exist in the module map.
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createClient } from "contentful-sdk-core";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
{ "name": "GGKC-mobile", "version": "0.1.0", "private": true, "devDependencies": { "react-native-scripts": "1.11.1", "jest-expo": "25.0.0", "react-test-renderer": "16.2.0", "contentful": "latest", "http": "latest" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js" }, "jest": { "preset": "jest-expo" }, "dependencies": { "contentful-sdk-core": "^5.0.3", "expo": "^25.0.0", "react": "16.2.0", "react-native": "0.52.0" } }
Hi @thebetterjort,
I will try to update the project as soon as I have time.
Thanks
import React from "react";
import { StyleSheet, Text, View, ListView } from "react-native";
const { createClient } = require("contentful/dist/contentful.browser.min.js");
export default class App extends React.Component {
constructor() {
super();
this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = { dataSource: this.ds.cloneWithRows(["row1", "row2"]) };
}
componentDidMount() {
this.getContentFromcontentful();
}
getContentFromcontentful() {
const client = createClient({
accessToken:
"0e3ec801b5af550c8a1257e8623b1c77ac9b3d8fcfc1b2b7494e3cb77878f92a",
space: "wl1z0pal05vy"
});
client
.getEntries({ content_type: "2PqfXUJwE8qSYKuM0U6w8M" })
.then(response => {
this.setState({
dataSource: this.ds.cloneWithRows(
response.items.map(function(product) {
return product.fields.productName;
})
)
});
})
.catch(function(error) {
console.log(error);
});
}
render() {
return (
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={rowData => <Text style={styles.title}>{rowData}</Text>}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
backgroundColor: "#F5FCFF"
},
title: {
fontSize: 20,
textAlign: "center",
padding: 20
}
});
Trouble loading data from Content_Type,
edit: found value in Content Model -> Json "content_type"
I'm not sure where you got your ID, but I was able to find content_type by going to the content model and clicking json and finding the type.
This code is working with Expo and React native.