inProgress-team / react-native-meteor

Meteor Reactivity for your React Native application :)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Use function component.React new feature HOOKS.how to use with it?

ongbona opened this issue · comments

commented

Can you give me the example of a function component?
I don't use class components.
So what can I do? If I want to use meteor subscribe
I use like that

import React, { useState } from "react";
import { View, Text } from "react-native";
import {
  Container,
  Header,
  Content,
  Form,
  Item,
  Input,
  Label,
  Button,
  Text
} from "native-base";
// meteor
import Meteor, { withTracker, MeteorListView } from "react-native-meteor";

Meteor.connect("ws://192.168.1.100:3000/websocket"); //do this only once

let f = {
  name: "Bona",
  age: 20
};
export default () => {
  const [form, setForm] = useState(f);
  function btnRegister() {
    let doc = {
      name: form.name,
      age: Number(form.age)
    };
    Meteor.call("insertCustomer", doc, (err, result) => {
      if (result) {
        console.log("inserted", result);
      } else {
        console.log("err", err);
      }
    });
  }
  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item fixedLabel>
            <Label>Username</Label>
            <Input
              value={form.name.toString()}
              onChangeText={value => setForm({ ...form, name: value })}
            />
          </Item>
          <Item fixedLabel last>
            <Label>Age</Label>
            <Input
              keyboardType="number-pad"
              value={form.age.toLocaleString()}
              onChangeText={value => setForm({ ...form, age: value })}
            />
          </Item>
          <Item>
            <Button onPress={btnRegister}>
              <Text>Register</Text>
            </Button>
          </Item>
        </Form>
      </Content>
    </Container>
  );
};