Category: React JS

A feature-rich toast library for React Native, built on react-hot-toast.

Features:

• Multiple toasts at the same time
• Keyboard handling (both iOS and Android)
• Swipe to dismiss
• Positional toasts (top & bottom)
• Ccustom styles, dimensions, duration, and even create your own component to be used in the toast
• Support for promises
• Runs on web

Basic usage:

1. Installation.

# Yarn
$ yarn add @backpackapp-io/react-native-toast

# NPM
$ npm i @backpackapp-io/react-native-toast

2. Import the react-native-toast.

import { StyleSheet, Text } from 'react-native';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';

3. Display a basic toast in your app.

export default function App() {
  useEffect(() => {
    toast('Hello World');
  }, []);
  return (
    <View style={styles.container}>
      <View>{/*The rest of your app*/}</View>
      <Toasts /> {/* <---- Add Here */}
    </View>
  );
}

// container styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

4. Available toast options.

toast('Hello World', {
  duration: 4000,
  position: ToastPosition.TOP,
  icon: 'Icon Here',
  styles: {
    view: ViewStyle,
    pressable: ViewStyle,
    text: TextStyle,
    indicator: ViewStyle
  },
});

5. Create toasts of different styles.

// default
toast('Hello World');

// success
toast.success('Successfully created!');

// error
toast.error('This is an error!');

// custom
toast("", {
  customToast: (toast) => (
    <View>
      <Text>{toast.message}</Text>
    </View>
   )
});

// loading
toast.loading('Waiting...');

Preview:

Download Details:

Author: backpackapp-io

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/backpackapp-io/react-native-toast

License: MIT

A dropdown item picker with search and autocomplete (typeahead) functionality for React Native.

How to use it:

1. Installation.

# Yarn
$ yarn add react-native-autocomplete-dropdown

# NPM
$ npm i react-native-autocomplete-dropdown

2. Import the autocomplete dropdown component.

import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';

3. Basic usage.

const [selectedItem, setSelectedItem] = useState(null);
<AutocompleteDropdown
  clearOnFocus={false}
  closeOnBlur={true}
  closeOnSubmit={false}
  initialValue={{ id: '2' }} // or just '2'
  onSelectItem={setSelectedItem}
  dataSet={[
    { id: '1', title: 'Alpha' },
    { id: '2', title: 'Beta' },
    { id: '3', title: 'Gamma' },
  ]}
/>;

4. The dataset should be a JS object or array as follows:

[
  { id: "1", title: "Alpha" },
  { id: "2", title: "Beta" },
  { id: "3", title: "Gamma" }
]

5. Available props.

dataSet?: TAutocompleteDropdownItem[];
inputHeight?: number;
suggestionsListMaxHeight?: number;
initialValue?: string | object;
loading?: boolean;
useFilter?: boolean;
showClear?: boolean;
showChevron?: boolean;
closeOnBlur?: boolean;
closeOnSubmit?: boolean;
clearOnFocus?: boolean;
debounce?: number;
direction?: 'down' | 'up';
position?: 'absolute' | 'relative';
bottomOffset?: number;
textInputProps?: TextInputProps;
onChangeText?: (text: string) => void;
onSelectItem?: (item: TAutocompleteDropdownItem) => void;
renderItem?: (
  item: TAutocompleteDropdownItem,
  searchText: string,
) => JSX.Element;
onOpenSuggestionsList?: (isOpened: boolean) => void;
onClear?: () => void;
onChevronPress?: () => void;
onSubmit?: TextInputProps['onSubmitEditing'];
onBlur?: TextInputProps['onBlur'];
onFocus?: TextInputProps['onFocus'];
controller?: (controller: AutocompleteDropdownRef) => void;
containerStyle?: StyleProp<ViewStyle>;
inputContainerStyle?: StyleProp<ViewStyle>;
rightButtonsContainerStyle?: StyleProp<ViewStyle>;
suggestionsListContainerStyle?: StyleProp<ViewStyle>;
suggestionsListTextStyle?: StyleProp<TextStyle>;
ChevronIconComponent?: JSX.Element;
ClearIconComponent?: JSX.Element;
InputComponent?: React.ComponentType;
ItemSeparatorComponent?: JSX.Element;
EmptyResultComponent?: JSX.Element;
emptyResultText?: string;
flatListProps?: FlatListProps<any>

Preview:

Download Details:

Author: onmotion

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/onmotion/react-native-autocomplete-dropdown

License: MIT

A simple lightweight autocomplete search box designed for React applications.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-search-box

# NPM
$ npm i react-search-box

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";

2. Add the ReactSearchBox component to the app.

<ReactSearchBox
  placeholder="Type Something..."
  value="ReactScript"
  data={this.data}
  callback={(record) => console.log(record)}
/>

3. Define your data for the autosuggestion list.

export default class App extends Component {
  data = [
    {
      key: "react",
      value: "React Native",
    },
    {
      key: "vue",
      value: "Vue Component",
    },
    // ...
  ];
  render() {
    return (
      <ReactSearchBox
        placeholder="Type Something..."
        value="ReactScript"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}

4. All available component props.

/*
 * The placeholder text for the input box.
 */
placeholder: string;
/*
 * The name attribute for the input box.
 */
name?: string;
/*
 * An array of objects which acts as the source of data for the dropdown. This prop is required.
 */
data: { key: string; value: string }[];
/*
 * Configs to override default Fuse configs.
 */
fuseConfigs?: {};
/*
 * Focus on the input box once the component is mounted.
 */
autoFocus?: boolean;
/*
 * A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked.
 */
onSelect: (record: Record) => void;
/*
 * A function which acts as a callback when the input is focussed.
 */
onFocus?: () => void;
/*
 * A function which acts as a callback when the input value is changed.
 */
onChange: (value: string) => void;
/*
 * Color of the text in the input box.
 */
inputFontColor?: string;
/*
 * Color of the border of the input box.
 */
inputBorderColor?: string;
/*
 * Size of the font of the input box.
 */
inputFontSize?: string;
/*
 * Height of the input box.
 */
inputHeight?: string;
/*
 * Background color of the input box.
 */
inputBackgroundColor?: string;
/*
 * Background color on hover of the dropdown list items.
 */
dropdownHoverColor?: string;
/*
 * Border color of the dropdown.
 */
dropdownBorderColor?: string;
/*
 * Clear the input value when any record is selected.
 */
clearOnSelect?: boolean;
/*
 * Icon to be rendered on the left of the input box.
 */
leftIcon?: ReactNode;
/*
 * The size of the icon (based on the leftIcon prop).
 */
iconBoxSize?: number | string;
/*
 * The type of the input.
 */
type?: string;

Preview:

Download Details:

Author: ghoshnirmalya

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ghoshnirmalya/react-search-box

License: MIT

react-local-toast is a React component that displays an inline toast message attached to any DOM element just like a tooltip or popover.

Supports various types of toast messages like info, success, warning, error, and loading. Accessibility is designed in mind.

How to use it:

1. Install and import the react-local-toast.

# Yarn
$ yarn add react-local-toast

# NPM
$ npm i react-local-toast

// required stylesheet
import 'react-local-toast/dist/bundle.min.css';

2. Wrap your application in LocalToastProvider.

import React from 'react';
import { LocalToastProvider } from 'react-local-toast';
export default () => {
  return (<LocalToastProvider>
    <App />
  </LocalToastProvider>);
};

3. Attach an inline toast to your element.

import React from 'react';
import { LocalToastTarget, useLocalToast } from 'react-local-toast';

export const App = () => {
  const {showToast, removeToast} = useLocalToast();
  return (<div>
    <p>This component should be inside LocalToastProvider</p>
    <LocalToastTarget name="btn">
        <button onClick={() => showToast('btn', 'Hello my first toast!')}>Click me please!</button>
    </LocalToastTarget>
  </div>);
};

Preview:

Download Details:

Author: OlegWock

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/OlegWock/react-local-toast

License: MIT

A draggable, accessible, and customizable toggle switch component for React.js applications.

Installation:

# NPM
$ npm install react-switch --save

How to use it:

1. Import the switch component.

import React, { Component } from "react";
import Switch from "react-switch";

2. Create a switch component with basic styling.

class SwitchExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(checked) {
    this.setState({ checked });
  }
  render() {
    return (
      <label>
        <Switch onChange={this.handleChange} checked={this.state.checked} />
      </label>
    );
  }
}

3. Default component props.

disabled: false,
offColor: "#888",
onColor: "#080",
offHandleColor: "#fff",
onHandleColor: "#fff",
uncheckedIcon: defaultUncheckedIcon,
checkedIcon: defaultCheckedIcon,
boxShadow: null,
activeBoxShadow: "0 0 2px 3px #3bf",
height: 28,
width: 56

Preview:

Download Details:

Author: markusenglund

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/markusenglund/react-switch

License: MIT

A highly customizable on/off toggle switch component for React Native.

How to use it:

1. Install and import the switch component.

# Yarn
$ yarn add react-native-switch

# NPM
$ npm i react-native-switch

import { Switch } from 'react-native-switch';

2. Add the switch component to the app.

export const App = () => (
  <Switch />
)

3. Possible component props to customize the switch.

value: false,
onValueChange: () => null,
renderInsideCircle: () => null,
innerCircleStyle: {},
disabled: false,
activeText: "On",
inActiveText: "Off",
backgroundActive: "green",
backgroundInactive: "gray",
circleActiveColor: "white",
circleInActiveColor: "white",
circleBorderActiveColor: "rgb(100, 100, 100)",
circleBorderInactiveColor: "rgb(80, 80, 80)",
circleSize: 30,
barHeight: null,
circleBorderWidth: 1,
changeValueImmediately: true,
innerCircleStyle: { alignItems: "center", justifyContent: "center" },
outerCircleStyle: {},
renderActiveText: true,
renderInActiveText: true,
switchLeftPx: 2,
switchRightPx: 2,
switchWidthMultiplier: 2,
switchBorderRadius: null,
testID: null

Preview:

Download Details:

Author: shahen94

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/shahen94/react-native-switch

License: MIT