rn-inka-element

A React Native library with some bottom sheet (using modal)

Getting started

$ npm install rn-inka-element --save

Require

You need install moment for ModalDateTime

$ npm install moment --save

You need install react-native-vector-icons for ModalNumberPad

$ npm install react-native-vector-icons --save

Mostly automatic installation

$ react-native link rn-inka-element

Usage

ModalNumberPad

import { ModalNumberPad } from 'rn-inka-element';
 
// Use ModalNumberPad
<ModalNumberPad
  onRequestClose={() => modal_number_visible = false}
  onConfirm={value => {
    console.log(value);
    modal_number_visible = false;
  }}
  onCancel={() => modal_number_visible = false}
  lang={{
    title_thin: 'Choose ',
    title_bold: '"Product Price"',
    button_ok: 'OK',
    button_cancel: 'Cancel',
  }}
  valueInit={1104}
  visible={modal_number_visible} />

Props:

Prop	Support	Description
onValueChange	iOS/Android	Callback function to receive new value of number pad. You need change your store value here to update value to number pad
valueInit	iOS/Android	Default value will display on pad
onConfirm	iOS/Android	Callback function when user press OK, note that if you def this props, a default button OK will render, callback param will be the number you need

ModalDateTime

import { ModalDateTime } from 'rn-inka-element';
 
// Use ModalDateTime
<ModalDateTime
  onRequestClose={() => modal_datetime_visible = false}
  visible={modal_datetime_visible}
  dateInit='2019-12-23 12:30'
  onCancel={() => modal_datetime_visible = false}
  onConfirm={(date) => {
    // date type is moment
    console.log(date.format())
    modal_datetime_visible = false;
  }}
  />

Props:

Prop	Support	Description
dateInit	iOS/Android	Default value will display on pad
onConfirm	iOS/Android	Callback function when user press OK, note that if you def this props, a default button OK will render, callback param will be the moment you choosed

ModalBottomSheet

Other Modal is base on this component

import { ModalBottomSheet } from 'rn-inka-element';
 
// Use ModalDateTime
<ModalBottomSheet
  onRequestClose={() => modal_option_visible = false}
  onCancel={() => modal_option_visible = false}
  onConfirm={() => modal_option_visible = false}
  lang={{
    title_thin: 'Choose ',
    title_bold: '"Product Price"',
    button_ok: 'OK',
    button_cancel: 'Cancel',
  }}
  enableScroll={false}
  renderContent={() => (
    <View style={styles.modal_container}>
      // Render your content here
    </View>
  )}
  visible={modal_option_visible} />

Props:

Prop	Support	Description
onConfirm	iOS/Android	On OK button press, note that if you def this props, a default button OK will render
onCancel	iOS/Android	On Cancel button press, note that if you def this props, a default button Cancel will render
onSwipeDown	iOS	Work on iOS only, handle event when use swipe modal down. This event use over scroll of scroll view
onSwipeUp	iOS	Work on iOS only, handle event when use swipe modal up. This event use over scroll of scroll view
visible	iOS/Android	Important prop to control modal visible
onRequestClose	iOS/Android	This function use help this modal can close when click cancel, ok, outside
renderHeader	iOS/Android	Override render header of BottomSheet
enableScroll	iOS/Android	Enable scroll content if higher than screen
renderContent	iOS/Android	Render content of modal, in case enableScroll and scrollType is not 'ScrollView' renderContent will be disable
enableInput	iOS/Android	Show input below modal header, usually use to search data on List
onChangeText	iOS/Android	Callback when input text change, use for search & filter function
scrollType	iOS/Android	Type of content scrollview (when enableScroll = true), maybe FlatList, SectionList or ScrollView
scrollProps	iOS/Android	Custom props of ScrollView/FlatList..., you may use this to set data for List and all its props (include header, items)
lang	iOS/Android	Use this prop for multiple language

ModalBottomSheet with FlatList and Search input

You can use FlatList inside Modal very easy, or add an input on top of modal for seach function

import { ModalBottomSheet } from 'rn-inka-element';
 
<ModalBottomSheet
  onRequestClose={() => modal_option_visible = false}
  onCancel={() => modal_option_visible = false}
  onConfirm={() => modal_option_visible = false}
  lang={{
    title_thin: 'Choose ',
    title_bold: '"Product Price"',
    button_ok: 'OK',
    button_cancel: 'Cancel',
  }}
  enableScroll={true}
  scrollType='FlatList'
  enableInput={true}
  onChangeText={text => console.log(text)}
  scrollProps={{
    data: options,
    keyExtractor: (item, index) => index.toString(),
    renderItem: (rowData, index) => {
      const option = rowData.item;
 
      return (
        // render item of list
        )
    }
  }}
  visible={modal_option_visible} />