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