@rn-elementary/menu

menu

Creates native picker in UIKit and Kotlin.

npm

Demo

Motivation

Sometimes react native apps dont feel native due to the javascript components. With this library will be starting a project to have all the native components ready to use in the application. I couldnt find this kind of menu in the npm store so fastest way was to build it ;)

Installation

npm install @rn-elementary/menu

yarn add @rn-elementary/menu

Props

Prop	Description	Type	Default
title	Title for the menu (only iOS)	String	""
options	Option to display in the menu	Array of String	[]
onSelect	function which gives the index and title of the menu option selected.	Function	() => Void
layout	It is used to overlap the native view over the react native component. Without this the component wont be tappable.	layout from react-native-picker-native	Important

Usage

• Kindly look into the example/src/App.tsx as it has the full implementation.

import { PickerNativeView, usePickerLayout} from "@rn-elementary/menu";

// ...
  const { layout, onLayout } = usePickerLayout();
// ...
 <PickerNativeView
        title={'Sample Title'}
        options={[
          'One',
          'Two',
          'Four',
          'Five',
          'Six',
          'Seven',
          'Eight',
          'Nine',
          'Ten',
        ]}
        onSelect={(e) => {
          console.log(e.nativeEvent.index);
          console.log(e.nativeEvent.title);
        }}
        layout={layout}
      >
        <View
          onLayout={onLayout}
          style={{ marginTop: 200, width: 200, marginLeft: 20 }}
        >
          <Text
            style={{
              backgroundColor: 'red',
            }}
          >
            CLICK ME
          </Text>
        </View>

Contributing

PR's are highly appreciated and so are issues.

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library