Khaledgarbaya/ContentfulReactNative-boilerplate

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.