chore: update docs

website/docs/getting-started.mdx

@@ -49,7 +49,7 @@ yarn add react-native-reanimated@2.1.0 react-native-gesture-handler react-native
 :::info
 **React Native Gesture Handler** needs extra steps to finalize its installation, please follow their [installation instructions](https://github.com/software-mansion/react-native-gesture-handler).
 
-**React Native Reanimated v2** needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-reanimated/docs/installation).
+**React Native Reanimated v2** needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-reanimated/docs).
 
 **React Native Unimodules** needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.expo.io/bare/installing-unimodules/). And make sure you excluded unwanted modules in your app. You can check the [exampale project](https://github.com/enesozturk/react-native-hold-menu/tree/main/example).
 :::

website/docs/props.md

@@ -4,7 +4,51 @@ title: Props
 slug: /props
 ---
 
-## Configuration
+## HoldMenuProvider
+
+### `iconComponent`
+
+If you want to use icon in your menu items, you need to set you Icon component to HoldMenuProvider to be able to use it. And than you can set just name of the icon in menu item list with `icon` prop like below.
+
+:::note
+Icon can be used with just **react-native-vector-icons** for now.
+:::
+
+```tsx
+import FeatherIcon from 'react-native-vector-icons/Feather';
+
+/* ... */
+<HoldMenuProvider iconComponent={FeatherIcon}>
+
+```
+
+### `theme`
+
+If you want to set spesific theme or change depends on your theme, use `theme` prop like below.
+
+Values:
+
+| value | default |
+| ----- | ------- |
+| light | true    |
+| dark  | false   |
+
+```tsx
+<HoldMenuProvider theme={"dark"}>
+```
+
+### `paddingBottom`
+
+Set if you'd like to apply padding to bottom. In most cases, you may want to set this for safe area provider values.
+
+#### Example
+
+```tsx
+const { bottom } = useSafeAreaProvider();
+<HoldMenuProvider paddingBottom={bottom} />;
+```
+
+## HoldItem
 
 ### `items`
 

website/docs/usage.md

@@ -8,10 +8,12 @@ hide_title: true
 
 ## Usage
 
-### Provider
+### HoldMenuProvider
 
 Before using Hold Menu in your application, you need to wrap your app with `HoldMenuProvider` first.
 
+See all the [HoldMenuProvider props](/react-native-hold-menu/docs/props#holdmenuprovider).
+
 ```tsx
 import React from 'react';
 
@@ -28,26 +30,12 @@ const App = () => {
 export default App;
 ```
 
-### Icons
-
-If you want to use icon in your menu items, you need to set you Icon component to HoldMenuProvider to be able to use it. And than you can set just name of the icon in menu item list with `icon` prop like below.
-
-:::note
-Icon can be used with just **react-native-vector-icons** for now.
-:::
-
-```tsx
-import FeatherIcon from 'react-native-vector-icons/Feather';
-
-/* ... */
-<HoldMenuProvider iconComponent={FeatherIcon} theme="light">
-
-```
-
-### Wrapper
+### HoldItem
 
 Now you can wrap your components with `HoldItem`. You need to set [items](/react-native-hold-menu/docs/props#items) prop and also see other optional props for your menu.
 
+See all the [HoldItem props](/react-native-hold-menu/docs/props#holditem).
+
 ```tsx
 import React from 'react';
 import { View } from 'react-native';