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
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 theBottomSheet
, make sureenabledContentGestureInteraction
is set tofalse
.
The difference between the
FlatList
implementation and theVirtualizedList
is the need to definegetItem
andgetItemCount
.
const data = {
byId: {
0: {},
1: {},
2: {},
},
allIds: [0, 1, 2],
};
Import
ScrollView
orFlatList
fromreact-native-gesture-handler
that works on android without any other workarounds.
npm install react-native-scroll-bottom-sheet
npm install react-native-reanimated react-native-gesture-handler
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
npm i react-native-raw-bottom-sheet --save
npm i react-native-modalize react-native-gesture-handler
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
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>;
}
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"));
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
Deleted yarn.lock Deleted node_modules & pods yarn install pod install --repo-update
npm install --save react-native-permissions
opensettings() Permissions statuses
On the old version, we have two methods:
canOpenSettings
andopenSettings
. 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
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-bundle-visualizer
<Picker
onValueChange={onValueChange}
useNativeAndroidPickerStyle={false}
fixAndroidTouchableBug={true}
placeholder={{}}
items={items}
Icon={() => (
<Icon name="keyboard-arrow-down" size={32} color={theme.colors.primary} />
)}
{...props}
/>
https://ethercreative.github.io/react-native-shadow-generator/
Use Axios interceptors to automatically retry failed requests. Super flexible. Built in exponential backoff.
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
mrlaessig/react-native-autocomplete-input
yarn add react-native-view-shot
yarn add react-native-share
yarn add react-native-fs