import React from 'react';
import { Button } from 'react-ui-kit-native';

export default class MyButton extends React.Component {
  render() {
    return (
      <Button full primary rounded label="My button" />
    );
  }
}

import React from 'react';
import { Block, Button, Input, Text } from 'react-ui-kit-native';

export default class LoginScreen extends React.Component {
  render() {
    return (
      <Block flex middle>
        <Text title light color="#000">
          LOGIN SCREEN
        </Text>
        <Text caption thin color="#000">
          Please login to your account
        </Text>
        <Input placeholder="Email" />
        <Input password placeholder="Password" />
        <Button full primary rounded label="SIGN IN" />
      </Block>
    );
  }
}

import React from 'react';
import { Block, Button, Input, Text } from 'react-ui-kit-native';

export default class LoginScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <Block flex middle>
        <Text title light color="#000">
          FORGOT PASSWORD
        </Text>
        <Input placeholder="Email" />
        <Button full rounded label="RESET PASSWORD" />
      </Block>
    );
  }
}

import React from 'react';
import { Block, Button, Input, Text } from 'react-ui-kit-native';

export default class RegisterScreen extends React.Component {
  render() {
    return (
      <Block fluid flex middle>
        <Text title light color="#000">
          REGISTER SCREEN
        </Text>
        <Input label="First name" placeholder="React" right icon="text" family="Entypo" />
        <Input label="Last name" placeholder="UI Kit" right icon="text" family="Entypo" />
        <Input
          right
          icon="location-pin"
          family="Entypo"
          label="Address"
          placeholder="Street name, number, house"
        />
        <Input
          right
          icon="phone"
          family="Entypo"
          type="phone-pad"
          label="Phone number"
          placeholder="0712345678"
        />
        <Button full rounded tertiary label="SIGN UP" />
      </Block>
    );
  }
}

import React from 'react';
import { StyleSheet, Image } from 'react-native';
import { Block, Text } from 'react-ui-kit-native';

class ProfileScreen extends React.Component {
  render() {
    const { profile } = this.props;

    return (
      <Block fluid flex middle style={styles.profile}>
        <Text h5 light color="#000">{profile.fullname}</Text>
        <Image source={{ uri: profile.avatar }} style={styles.avatar} />
        <Text subtitle light>{`${profile.city}, ${profile.country}`}</Text>
        <Text bold>{profile.email}</Text>
      </Block>
    );
  }
}

ProfileScreen.defaultProps = {
  profile: {
    fullname: `React UI Kit`,
    city: `London`,
    country: `United Kingdom`,
    email: `contact@react-ui-kit.com`,
    avatar: `https://react-ui-kit.com/assets/img/react-ui-kit-logo.png`,
  },
};

export default ProfileScreen;

const styles = StyleSheet.create({
  profile: {
    paddingTop: 15,
    backgroundColor: '#fff',
  },
  avatar: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
});