Skip to content

Latest commit

 

History

History
347 lines (240 loc) · 9.79 KB

Plugins.md

File metadata and controls

347 lines (240 loc) · 9.79 KB

React Native Reanimated Bottom Sheet

Reanimated Bottom Sheet

npm install reanimated-bottom-sheet
npm install react-native-reanimated react-native-gesture-handler
<BottomSheet
  snapPoints={[0, hp("60%"), ACTUAL_SCREEN_HEIGHT]}
  initialSnap={1}
  onOpenEnd={() => {
    this.setState({ allowScrolling: true });
  }}
  enabledInnerScrolling={true}
  onCloseStart={() => this.setState({ allowScrolling: false })}
  onCloseEnd={() => this.props.onBackdropPress()}
  enabledGestureInteraction={true}
  overdragResistanceFactor={0}
  enabledHeaderGestureInteraction={true}
  enabledContentGestureInteraction={!this.state.allowScrolling}
  renderContent={this.renderContent}
  renderHeader={this.renderHeader}
/>

VirtualizedList

<VirtualizedList
  showVerticalScrollIndicator={false}
  ref={(ref) => (this.scrollView = ref)}
  onScroll={(event) => {
    if (event.nativeEvent.contentOffset.y < 10) {
      this.setState({ allowScrolling: false });
    }
  }}
  data={this.props.options}
  getItemCount={(data) => this.props.options.length}
  getItem={(data, index) => {
    return data[index];
  }}
  keyExtractor={(item, index) => {
    return item.id;
  }}
  onEndReached={() => console.log("End Reached")}
  renderItem={this.renderItem}
/>

If you want the inner content to be scrollable when using VirtualizedList in the BottomSheet, make sure enabledContentGestureInteraction is set to false.

VirtualizedList

The difference between the FlatList implementation and the VirtualizedList is the need to define getItem and getItemCount.

Normalizing State Shape

const data = {
  byId: {
    0: {},
    1: {},
    2: {},
  },
  allIds: [0, 1, 2],
};

Inner content not scrollable

Import ScrollView or FlatList from react-native-gesture-handler that works on android without any other workarounds.

React Native Scroll Bottom Sheet

Scroll Bottom Sheet

npm install react-native-scroll-bottom-sheet
npm install react-native-reanimated react-native-gesture-handler

React Native Bottom Sheet

react-native-bottom-sheet

Clone of React Native Scroll Bottom Sheet but fully rewritten.

npm install @gorhom/bottom-sheet
npm install react-native-reanimated react-native-gesture-handler
npm install @gorhom/[email protected] #react-native-reanimated v2
npm install react-native-reanimated@alpha react-native-gesture-handler

React Native Raw Bottom Sheet

react-native-raw-bottom-sheet

npm i react-native-raw-bottom-sheet --save

React Native Modalize

react-native-modalize

npm i react-native-modalize react-native-gesture-handler

Documentation

React Native Safe Area View

react-native-safe-area-view

import { useSafeArea } from ‘react-native-community/react-native-safe-area-view’;

const insets = useSafeArea();
return <View style={{ paddingTop: insets.top }} />; //can also [forceInset](https://github.com/react-navigation/react-native-safe-area-view#forceinset)

Ref: SafeAreaView react-navigation to fix iPhone X design issue Ref: SafeAreaView

React Native Safe Area Context

Works on Android and Web!

react-native-safe-area-context

npm install react-native-safe-area-context

import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>;
}

React Native Floating Bubble

A simple Facebook Chat Head like bubble for react native.

npm install react-native-floating-bubble --save
import {
  showFloatingBubble,
  hideFloatingBubble,
  requestPermission,
} from "react-native-floating-bubble";

// Show Floating Bubble
showFloatingBubble().then(() => console.log("Floating Bubble Added"));

React Native Config

react-native-config

Setup Android

More info

Handling environment specific configurations in React Native

react-native run-ios --scheme "Dev" react-native run-ios --scheme "Prod" Xcode goes to Product -> Schemes -> Manage Schemes... -> (Plus icon to create new scheme). You can manage the configurations choosing the Edit option.

To list all available schemes for the project in your current directory xcodebuild -list xcodebuild -list -workspace ./MyApp.xcworkspace xcodebuild -list -project ./MyApp.xcodeproj

React Native FS

react-native-fs

React Native Clean Project

react-native-clean-project

Deleted yarn.lock Deleted node_modules & pods yarn install pod install --repo-update

Async-Storage Flipper

rn-async-storage-flipper

React Native Permissions

 npm install --save react-native-permissions

react-native-permissions

opensettings() Permissions statuses

On the old version, we have two methods: canOpenSettings and openSettings. Now we have only one that will be rejected if it's not possible. To perform an action when the app is getting focus back, you can use (AppState)[https://facebook.github.io/react-native/docs/appstate]

React Native: Managing App Permissions for iOS

React Native Collapsible

react-native-collapsible

React Native Collapsible View

react-native-collapsible-view

React Native Collapsible List

react-native-collapsible-list

React Native Version Check

react-native-version-check

useEffect(() => {
  checkUpdateNeeded();
}, []);

const checkUpdateNeeded = async () => {
  let updateNeeded = await VersionCheck.needUpdate();
  if (updateNeeded.isNeeded) {
    //Alert the user and direct to the app url
  }
};

const latestVersion = await VersionCheck.getLatestVersion();
const currentVersion = VersionCheck.getCurrentVersion();

React Native Hold Menu

react-native-hold-menu

React Native Calendars

react-native-calendars

React Native Bundle Visualizer

react-native-bundle-visualizer

React Native Cookies

react-native-cookies/cookies

React Native Picker

react-native-picker/picker

React Native Picker Select

react-native-picker-select

<Picker
  onValueChange={onValueChange}
  useNativeAndroidPickerStyle={false}
  fixAndroidTouchableBug={true}
  placeholder={{}}
  items={items}
  Icon={() => (
    <Icon name="keyboard-arrow-down" size={32} color={theme.colors.primary} />
  )}
  {...props}
/>

Shadow Generator

https://ethercreative.github.io/react-native-shadow-generator/

React Native PDF

react-native-pdf

Retry Axios

retry-axios

Use Axios interceptors to automatically retry failed requests. Super flexible. Built in exponential backoff.

Google Maps Search Component for React Native

react-native-google-places-autocomplete

<GooglePlacesAutocomplete
  query={{
    key: GOOGLE_PLACES_API_KEY,
    language: "en",
  }}
  onPress={(data, details = null) => console.log(data)}
  onFail={(error) => alert(error)}
  textInputProps={{
    InputComp: Input,
    leftIcon: { type: "font-awesome", name: "chevron-left" },
    errorStyle: { color: "red" },
  }}
/>

React Native Autocomplete Dropdown

react-native-autocomplete-dropdown

React Native Autocomplete Input

mrlaessig/react-native-autocomplete-input

React Native View Shot

react-native-view-shot

yarn add react-native-view-shot
yarn add react-native-share
yarn add react-native-fs

Keychain/Keystore Access for React Native

oblador/react-native-keychain