Magnus

Select

Single-Valued Component

import React, { useState } from 'react';
import { Button, Select } from 'react-native-magnus'

const [selectValue, setSelectedValue] = useState(null);
const selectRef = React.createRef()

<Button
  flex={1}
  block
  borderWidth={1}
  bg="white"
  color="gray900"
  borderColor="gray300"
  onPress={() => {
    if (selectRef.current) {
      selectRef.current.open();
    }
  }}>
  {selectValue.length ? selectValue.toString() : 'Select'}
</Button>

<Select
  onSelect={onSelectOption}
  ref={selectRef}
  value={selectValue}
  title="This is your title"
  mt="md"
  pb="2xl"
  message="This is the long message used to set some context"
  roundedTop="xl"
  data={[1, 2, 3, 4, 5, 6]}
  renderItem={(item, index) => (
    <Select.Option value={item} py="md" px="xl">
      <Text>Option {index}</Text>
    </Select.Option>
  )}
/>

Multi-Valued Component

If you want to have multi-valued select component, just pass the multiple props as true.

import React, { useState } from 'react';
import { Button, Select } from 'react-native-magnus'

const [selectValue, setSelectedValue] = useState([]);
const selectRef = React.createRef()

<Button
  flex={1}
  block
  borderWidth={1}
  bg="white"
  color="gray900"
  borderColor="gray300"
  onPress={() => {
    if (selectRef.current) {
      selectRef.current.open();
    }
  }}>
  {selectValue.length ? selectValue.toString() : 'Select'}
</Button>

<Select
  onSelect={onSelectOption}
  ref={selectRef}
  multiple
  value={selectValue}
  title="This is your title"
  mt="md"
  pb="2xl"
  message="This is the long message used to set some context"
  roundedTop="xl"
  data={[1, 2, 3, 4, 5, 6]}
  renderItem={(item, index) => (
    <Select.Option value={item} py="md" px="xl">
      <Text>Option {index}</Text>
    </Select.Option>
  )}
/>

Props

PropertyDescriptionTypeDefault
mmargin`stringnumber`
mtmargin top`stringnumber`
mrmargin right`stringnumber`
mbmargin bottom`stringnumber`
mlmargin margin left`stringnumber`
mxmargin horizonal`stringnumber`
mymargin vertical`stringnumber`
ppadding`stringnumber`
ptpadding top`stringnumber`
prpadding right`stringnumber`
pbpadding bottom`stringnumber`
plpadding margin left`stringnumber`
pxpadding horizonal`stringnumber`
pypadding vertical`stringnumber`
hheightnumber-
bgbackground colorstring-
roundedborder radius`stringnumber`
roundedTopborder radius top`stringnumber`
roundedBottomborder radius bottom`stringnumber`
roundedLeftborder radius left`stringnumber`
roundedRightborder radius right`stringnumber`
borderColorcolor for borderstring-
borderTopColorcolor for border topstring-
borderRightColorcolor for border rightstring-
borderLeftColorcolor for border leftstring-
borderBottomColorcolor for border bottomstring-
borderWidthwidth for bordernumber-
borderTopWidthwidth for border topnumber-
borderRightWidthwidth for border rightnumber-
borderLeftWidthwidth for border leftnumber-
borderBottomWidthwidth for border bottomnumber-
titletitle to be used above options`stringReact.ReactNode`
multiplemultiple options can be selected or notbooleanfalse
valuevalue of select`anyany[]`
footerfooter to be used below options. Submit button is shown when multiple is trueReact.ReactNode-
onSelectcallback trigger when a option is selected. In case when multipe is true, onSelect give array of values. Otherwise gives single valueonSelect(value: any) => void-
datadata to be used to render optionsany[]-
renderItemcallback used to render options in the flatlistrenderItem: (item: any, index: number) => React.ReactElement-
keyExtractorcallback used to give unique id to flatlist itemskeyExtractor: (item: any, index: number) => string;-