diff --git a/docs/custom-handle.md b/docs/custom-handle.md
deleted file mode 100644
index 396da3321..000000000
--- a/docs/custom-handle.md
+++ /dev/null
@@ -1,159 +0,0 @@
-# Custom Handle
-
-The library allows you to override the handle and create your own wonderful interactive animation.
-
-When you provide your own handle component, it will receive an animated value - `animatedPositionIndex` - that indicates the current position of the sheet.
-
-Here is an example of a custom handle component:
-
-```tsx
-import React, { useMemo } from 'react';
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-} from 'react-native-reanimated';
-import { toRad } from 'react-native-redash';
-
-// @ts-ignore
-export const transformOrigin = ({ x, y }, ...transformations) => {
-  'worklet';
-  return [
-    { translateX: x },
-    { translateY: y },
-    ...transformations,
-    { translateX: x * -1 },
-    { translateY: y * -1 },
-  ];
-};
-
-interface HandleProps extends BottomSheetHandleProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-const Handle: React.FC<HandleProps> = ({ style, animatedPositionIndex }) => {
-  //#region animations
-  const indicatorTransformOriginY = useDerivedValue(() =>
-    interpolate(
-      animatedPositionIndex.value,
-      [0, 1, 2],
-      [-1, 0, 1],
-      Extrapolate.CLAMP
-    )
-  );
-  //#endregion
-
-  //#region styles
-  const containerStyle = useMemo(() => [styles.header, style], [style]);
-  const containerAnimatedStyle = useAnimatedStyle(() => {
-    const borderTopRadius = interpolate(
-      animatedPositionIndex.value,
-      [1, 2],
-      [20, 0],
-      Extrapolate.CLAMP
-    );
-    return {
-      borderTopLeftRadius: borderTopRadius,
-      borderTopRightRadius: borderTopRadius,
-    };
-  });
-  const leftIndicatorAnimatedStyle = useAnimatedStyle(() => {
-    const leftIndicatorRotate = interpolate(
-      animatedPositionIndex.value,
-      [0, 1, 2],
-      [toRad(-30), 0, toRad(30)],
-      Extrapolate.CLAMP
-    );
-    return {
-      transform: transformOrigin(
-        { x: 0, y: indicatorTransformOriginY.value },
-        {
-          rotate: `${leftIndicatorRotate}rad`,
-        },
-        {
-          translateX: -5,
-        }
-      ),
-    };
-  });
-  const rightIndicatorStyle = useMemo(
-    () => ({
-      ...styles.indicator,
-      ...styles.rightIndicator,
-    }),
-    []
-  );
-  const rightIndicatorAnimatedStyle = useAnimatedStyle(() => {
-    const rightIndicatorRotate = interpolate(
-      animatedPositionIndex.value,
-      [0, 1, 2],
-      [toRad(30), 0, toRad(-30)],
-      Extrapolate.CLAMP
-    );
-    return {
-      transform: transformOrigin(
-        { x: 0, y: indicatorTransformOriginY.value },
-        {
-          rotate: `${rightIndicatorRotate}rad`,
-        },
-        {
-          translateX: 5,
-        }
-      ),
-    };
-  });
-  //#endregion
-
-  // render
-  return (
-    <Animated.View 
-      style={[containerStyle, containerAnimatedStyle]} renderToHardwareTextureAndroid={true}
-    >
-      <Animated.View style={[leftIndicatorStyle, leftIndicatorAnimatedStyle]} />
-      <Animated.View
-        style={[rightIndicatorStyle, rightIndicatorAnimatedStyle]}
-      />
-    </Animated.View>
-  );
-};
-
-export default Handle;
-
-const styles = StyleSheet.create({
-  header: {
-    alignContent: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-    paddingVertical: 14,
-    shadowColor: 'black',
-    shadowOffset: {
-      width: 0,
-      height: -20,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 10,
-    elevation: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#fff',
-  },
-  indicator: {
-    position: 'absolute',
-    width: 10,
-    height: 4,
-    backgroundColor: '#999',
-  },
-  leftIndicator: {
-    borderTopStartRadius: 2,
-    borderBottomStartRadius: 2,
-  },
-  rightIndicator: {
-    borderTopEndRadius: 2,
-    borderBottomEndRadius: 2,
-  },
-});
-
-```
\ No newline at end of file
diff --git a/docs/flatlist.md b/docs/flatlist.md
deleted file mode 100644
index 21e622d03..000000000
--- a/docs/flatlist.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# Bottom Sheet FlatList
-
-Is an extended component of `FlatList` from `react-native`, with bottom sheet integrations.
-
-## Props
-
-#### `focusHook`
-
-This needed when bottom sheet used with multiple scrollables to allow bottom sheet detect the current scrollable ref, especially when used with `React Navigation`. You will need to provide `useFocusEffect` from `@react-navigation/native`.
-
-> `required:` NO | `type:` (effect: EffectCallback, deps?: DependencyList) => void | `default: ` React.useEffect
-
-## Example
-
-```tsx
-import React, { useCallback, useRef, useMemo } from 'react';
-import { StyleSheet, View, Text, Button } from 'react-native';
-import BottomSheet, { BottomSheetFlatList } from '@gorhom/bottom-sheet';
-
-const App = () => {
-  // hooks
-  const sheetRef = useRef<BottomSheet>(null);
-
-  // variables
-  const data = useMemo(
-    () =>
-      Array(50)
-        .fill(0)
-        .map((_, index) => `index-${index}`),
-    []
-  );
-  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-
-  // callbacks
-  const handleSheetChange = useCallback(index => {
-    console.log('handleSheetChange', index);
-  }, []);
-  const handleSnapPress = useCallback(index => {
-    sheetRef.current?.snapTo(index);
-  }, []);
-  const handleClosePress = useCallback(() => {
-    sheetRef.current?.close();
-  }, []);
-
-  // render
-  const renderItem = useCallback(
-    ({ item }) => (
-      <View style={styles.itemContainer}>
-        <Text>{item}</Text>
-      </View>
-    ),
-    []
-  );
-  return (
-    <View style={styles.container}>
-      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
-      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
-      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
-      <Button title="Close" onPress={() => handleClosePress()} />
-      <BottomSheet
-        ref={sheetRef}
-        initialSnapIndex={1}
-        snapPoints={snapPoints}
-        onChange={handleSheetChange}
-      >
-        <BottomSheetFlatList
-          data={data}
-          keyExtractor={i => i}
-          renderItem={renderItem}
-          contentContainerStyle={styles.contentContainer}
-        />
-      </BottomSheet>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 200,
-  },
-  contentContainer: {
-    backgroundColor: 'white',
-  },
-  itemContainer: {
-    padding: 6,
-    margin: 6,
-    backgroundColor: '#eee',
-  },
-});
-
-export default App;
-```
diff --git a/docs/react-navigation.md b/docs/react-navigation.md
deleted file mode 100644
index 36e419a38..000000000
--- a/docs/react-navigation.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# React Navigation
-
-One of the main goal of this library, is to allow user to fully integrate a navigator in the bottom sheet. This integration allow lots of opportunities for a native-like experience in your app :)
-
-However, there are some tricks has to be follow to enable both libraries to work together seamlessly.
-
-- You need to override `safeAreaInsets`, by default `React Navigation` add the safe area insets to all its navigators, but since your navigator will properly won't cover full screen, you will need to override it and set it to `0`.
-- You need to override `headerLeft`, due to bottom sheet wrapping the content with `TapGestureHandler` & `PanGestureHandler`, you will need to wrap the header left button with `TouchableOpacity` that this library provide to allow it working.
-
-For more details regarding the implementation, please have a look at the [Navigator Example](../example/src/screens/NavigatorExample.tsx).
\ No newline at end of file
diff --git a/docs/scrollview.md b/docs/scrollview.md
deleted file mode 100644
index 40b81bcbc..000000000
--- a/docs/scrollview.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Bottom Sheet ScrollView
-
-Is an extended component of `ScrollView` from `react-native`, with bottom sheet integrations.
-
-## Props
-
-#### `focusHook`
-
-This needed when bottom sheet used with multiple scrollables to allow bottom sheet detect the current scrollable ref, especially when used with `React Navigation`. You will need to provide `useFocusEffect` from `@react-navigation/native`.
-
-> `required:` NO | `type:` (effect: EffectCallback, deps?: DependencyList) => void | `default: ` React.useEffect
-
-## Example
-
-```tsx
-import React, { useCallback, useRef, useMemo } from 'react';
-import { StyleSheet, View, Text, Button } from 'react-native';
-import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
-
-const App = () => {
-  // hooks
-  const sheetRef = useRef<BottomSheet>(null);
-
-  // variables
-  const data = useMemo(
-    () =>
-      Array(50)
-        .fill(0)
-        .map((_, index) => `index-${index}`),
-    []
-  );
-  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-
-  // callbacks
-  const handleSheetChange = useCallback(index => {
-    console.log('handleSheetChange', index);
-  }, []);
-  const handleSnapPress = useCallback(index => {
-    sheetRef.current?.snapTo(index);
-  }, []);
-  const handleClosePress = useCallback(() => {
-    sheetRef.current?.close();
-  }, []);
-
-  // render
-  const renderItem = useCallback(
-    (item) => (
-      <View key={item} style={styles.itemContainer}>
-        <Text>{item}</Text>
-      </View>
-    ),
-    []
-  );
-  return (
-    <View style={styles.container}>
-      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
-      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
-      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
-      <Button title="Close" onPress={() => handleClosePress()} />
-      <BottomSheet
-        ref={sheetRef}
-        initialSnapIndex={1}
-        snapPoints={snapPoints}
-        onChange={handleSheetChange}
-      >
-        <BottomSheetScrollView
-          contentContainerStyle={styles.contentContainer}
-        >
-          {data.map(renderItem)}
-        </BottomSheetScrollView>
-      </BottomSheet>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 200,
-  },
-  contentContainer: {
-    backgroundColor: 'white',
-  },
-  itemContainer: {
-    padding: 6,
-    margin: 6,
-    backgroundColor: '#eee',
-  },
-});
-
-export default App;
-```
diff --git a/docs/sectionlist.md b/docs/sectionlist.md
deleted file mode 100644
index 9500c0468..000000000
--- a/docs/sectionlist.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# Bottom Sheet SectionList
-
-Is an extended component of `SectionList` from `react-native`, with bottom sheet integrations.
-
-## Props
-
-#### `focusHook`
-
-This needed when bottom sheet used with multiple scrollables to allow bottom sheet detect the current scrollable ref, especially when used with `React Navigation`. You will need to provide `useFocusEffect` from `@react-navigation/native`.
-
-> `required:` NO | `type:` (effect: EffectCallback, deps?: DependencyList) => void | `default: ` React.useEffect
-
-## Example
-
-```tsx
-import React, { useCallback, useRef, useMemo } from 'react';
-import { StyleSheet, View, Text, Button } from 'react-native';
-import BottomSheet, { BottomSheetSectionList } from '@gorhom/bottom-sheet';
-
-const App = () => {
-  // hooks
-  const sheetRef = useRef<BottomSheet>(null);
-
-  // variables
-  const sections = useMemo(
-    () =>
-      Array(10)
-        .fill(0)
-        .map((_, index) => ({
-          title: `Section ${index}`,
-          data: Array(10)
-            .fill(0)
-            .map((_, index) => `Item ${index}`),
-        })),
-    []
-  );
-  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-
-  // callbacks
-  const handleSheetChange = useCallback(index => {
-    console.log('handleSheetChange', index);
-  }, []);
-  const handleSnapPress = useCallback(index => {
-    sheetRef.current?.snapTo(index);
-  }, []);
-  const handleClosePress = useCallback(() => {
-    sheetRef.current?.close();
-  }, []);
-
-  // render
-  const renderSectionHeader = useCallback(
-    ({ section }) => (
-      <View style={styles.sectionHeaderContainer}>
-        <Text>{section.title}</Text>
-      </View>
-    ),
-    []
-  );
-  const renderItem = useCallback(
-    ({ item }) => (
-      <View style={styles.itemContainer}>
-        <Text>{item}</Text>
-      </View>
-    ),
-    []
-  );
-  return (
-    <View style={styles.container}>
-      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
-      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
-      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
-      <Button title="Close" onPress={() => handleClosePress()} />
-      <BottomSheet
-        ref={sheetRef}
-        initialSnapIndex={1}
-        snapPoints={snapPoints}
-        onChange={handleSheetChange}
-      >
-        <BottomSheetSectionList
-          sections={sections}
-          keyExtractor={i => i}
-          renderSectionHeader={renderSectionHeader}
-          renderItem={renderItem}
-          contentContainerStyle={styles.contentContainer}
-        />
-      </BottomSheet>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 200,
-  },
-  contentContainer: {
-    backgroundColor: 'white',
-  },
-  sectionHeaderContainer: {
-    backgroundColor: 'white',
-    padding: 6,
-  },
-  itemContainer: {
-    padding: 6,
-    margin: 6,
-    backgroundColor: '#eee',
-  },
-});
-
-export default App;
-
-```
diff --git a/docs/touchables.md b/docs/touchables.md
deleted file mode 100644
index e48e42521..000000000
--- a/docs/touchables.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Touchables
-
-Due to wrapping the content and handle with `TapGestureHandler` & `PanGestureHandler`, any button's interaction would not function as expected.
-
-To resolve this issue, please use touchables that this library provide.
-
-- TouchableOpacity
-- TouchableHighlight
-- TouchableWithoutFeedback
diff --git a/docs/view.md b/docs/view.md
deleted file mode 100644
index 0537835ae..000000000
--- a/docs/view.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Bottom Sheet View
-
-Is an extended component of `View` from `react-native`, with bottom sheet integrations.
-
-> This only needed when the bottom sheet used with `React Navigation`.
-
-## Props
-
-#### `focusHook`
-
-This needed when bottom sheet used with multiple scrollables to allow bottom sheet detect the current scrollable ref, especially when used with `React Navigation`. You will need to provide `useFocusEffect` from `@react-navigation/native`.
-
-> `required:` NO | `type:` (effect: EffectCallback, deps?: DependencyList) => void | `default: ` React.useEffect
-
-## Example
-
-```tsx
-import React, { useCallback, useRef, useMemo } from 'react';
-import { StyleSheet, View, Text, Button } from 'react-native';
-import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
-
-const App = () => {
-  // hooks
-  const sheetRef = useRef<BottomSheet>(null);
-
-  // variables
-  const data = useMemo(
-    () =>
-      Array(50)
-        .fill(0)
-        .map((_, index) => `index-${index}`),
-    []
-  );
-  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
-
-  // callbacks
-  const handleSheetChange = useCallback(index => {
-    console.log('handleSheetChange', index);
-  }, []);
-  const handleSnapPress = useCallback(index => {
-    sheetRef.current?.snapTo(index);
-  }, []);
-  const handleClosePress = useCallback(() => {
-    sheetRef.current?.close();
-  }, []);
-
-  // render
-  const renderItem = useCallback(
-    (item) => (
-      <View style={styles.itemContainer}>
-        <Text>{item}</Text>
-      </View>
-    ),
-    []
-  );
-  return (
-    <View style={styles.container}>
-      <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
-      <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
-      <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
-      <Button title="Close" onPress={() => handleClosePress()} />
-      <BottomSheet
-        ref={sheetRef}
-        initialSnapIndex={1}
-        snapPoints={snapPoints}
-        onChange={handleSheetChange}
-      >
-        <BottomSheetView
-          contentContainerStyle={styles.contentContainer}
-        >
-          {data.map(renderItem)}
-        </BottomSheetView>
-      </BottomSheet>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingTop: 200,
-  },
-  contentContainer: {
-    backgroundColor: 'white',
-  },
-  itemContainer: {
-    padding: 6,
-    margin: 6,
-    backgroundColor: '#eee',
-  },
-});
-
-export default App;
-```