react-native-easy-screen

Make a screen with header input search animation and more.

Installation

npm i react-native-vector-icons
npm i react-native-easy-screen

Usage

import React, { Component } from 'react';
// import { View, Text, Dimensions } from 'react-native';
import { AppScreen, EasyScreen } from 'react-native-easy-screen';
import DataDemo from './data';

const { data } = DataDemo;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <AppScreen>
        <HomeScreen />
      </AppScreen>
    );
  }
}

// const { width, height } = Dimensions.get('window');
export class HomeScreen extends EasyScreen {
  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.config = { headerTitle: 'Tỉnh thành', headerColor: '#387be0', headerContentColor: '#fff' };
    this.configSearch = { enableSearch: true, icon: 'md-search', hiddenButton: 'right', color: '#fff', colorSearching: '#00E676' };
    this.configHeader = { iconLeft: 'ios-menu', actionLeft: this.onAlert };
    this.paramsFilter = ['id', 'name'];
  }

  loadData() {
    // set data
    this.setState({
      data
    }, () => {
      // filter all
      this.onFilter('');
    });
  }

  onAlert = () => {
    alert('Open Drawer');
  }

  onLoading = () => {
    // call loading start
    this.loading.onOpen();
    setTimeout(() => {
      // call loading end
      this.loading.onClose();
    }, 2000);
  }

  // override renderBody if you don't want user Flatlist in your screen
  // renderBody() {
  //   return (
  //     <View style={{ width, height: height - 50, alignItems: 'center', justifyContent: 'center' }}>
  //       <Text>Hello, this is body. </Text>
  //       <Text>Write anything you want in here.</Text>
  //     </View>
  //   );
  // }
}

License

MIT