React Native Custom Multi Selector - Step 1

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, Modal, CheckBox,  TouchableOpacity, ScrollView, Dimensions, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
// import Ionicons from 'react-native-vector-icons/Ionicons';

const BannerWidth = Dimensions.get('window').width - 20;

class MultiSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    return (
        <View style={styles.container}>
            <ScrollView>
                <View style={styles.header}>
                    <Ionicons name="md-menu" size={30} color="#fff" />
                        <Text style={styles.topHeader}>Pokemon Cards</Text>
                    <Ionicons name="md-add" size={30} color="#fff"/>
                </View>
                <View style={styles.selectView}/>
                <Text style={styles.noPokemonSelected}>OOPS! You Dont Have Any Pokemon!</Text>
            </ScrollView>
            <View style={styles.cardFooter}>
                <Text style={styles.footerText}>Created by vanns35.com @2020</Text>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
    padding: 8
  },
  header: { 
    flexDirection : 'row', 
    justifyContent: 'space-between'
  },
  topHeader: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  noPokemonSelected: {
    color: '#fff', 
    textAlign: 'center', 
    marginTop: 20, 
    fontSize: 15, 
    fontWeight: 'bold'
  },
  selectView: {
    height: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#b2b2b2',
  },
  cardFooter: {
    alignItems: 'center',
    backgroundColor: 'rgba(52, 52, 52, 0.8)',
    width: Dimensions.get('window').width,
  },
  footerText: {
    color: '#fff',
    padding: 10
  },
});

export default MultiSelector;