filter.js

import React, { Component } from "react";
import { View, Text} from "react-native";
import { Container, Button, Icon, CheckBox} from "native-base";

import styles from "./styles";

const services = [
  {
    id: 1,
    name: "Design",
    status: "unchecked"
  },
  {
    id: 2,
    name: "Development",
    status: "unchecked"
  },
  {
    id: 3,
    name: "Web Consultancy",
    status: "unchecked"
  },
  {
    id: 4,
    name: "Multimedia",
    status: "unchecked"
  }, {
    id: 5,
    name: "Digital marketing",
    status: "unchecked"
  },
  {
    id: 6,
    name: "Support",
    status: "unchecked"
  },
];

const state = [
  {
    id: 1,
    name: "Em curso",
    status: "unchecked"
  },
  {
    id: 2,
    name: "Parado",
    status: "unchecked"
  },
  {
    id: 3,
    name: "Concluido",
    status: "unchecked"
  },
];

class Filters extends Component {
  constructor(props){
    super(props);

    this.state = {
      checked: false
    };
  }

  _handleChangeCheck = () => this.setState({
    checked: !this.state.checked
  });

  render() {
    return (
      <Container>
        <View style={{ flexDirection: "row", marginTop: 10, marginBottom: -40 }}>
            <Button transparent style={{width: 100, height: 100}} onPress={() => this._navigateTo("Reports")}>
                <Icon name="close" style={ styles.btnIcon }/>
            </Button>
            <Text style={ styles.topText }>
                Cancelar
            </Text>
        </View>
        <View style={{ padding: 20 }}>
            <Text style={ styles._text }>Serviços</Text>
            <View style={{ flexDirection: "row" }}>
            <View style={{ flex: 1 }}>
                <CheckBox
                onPress={this._handleChangeCheck}
                checked={this.state.checked}
                color="red"
                />
                <Text style={{ marginLeft: 20 }}>Design</Text>

                <CheckBox
                onPress={this._handleChangeCheck}
                checked={this.state.checked}
                color="red"
                />
                <Text style={{ marginLeft: 20 }}>Multimedia</Text>

                <CheckBox
                onPress={this._handleChangeCheck}
                checked={this.state.checked}
                color="red"
                />
                <Text style={{ marginLeft: 20 }}>Multimedia</Text>
            </View>
            <View style={{ flex: 1 }}>
                <CheckBox
                onPress={this._handleChangeCheck}
                checked={this.state.checked}
                color="red"
                />
                <Text style={{ marginLeft: 20 }}>Design</Text>

                <CheckBox
                onPress={this._handleChangeCheck}
                checked={this.state.checked}
                color="red"
                />
                <Text style={{ marginLeft: 20 }}>Multimedia</Text>

                <CheckBox
                onPress={this._handleChangeCheck}
                checked={this.state.checked}
                color="red"
                />
                <Text style={{ marginLeft: 20 }}>Multimedia</Text>
            </View>
            </View>

        </View>
      </Container>
    );
  }
}

export default Filters;