Padding on outlined mode

README.md

@@ -88,10 +88,10 @@ function Multi() {
 
 function Multi() {
   const [options, setOptions] = React.useState([
-    { id: 1, name: 'Ruben von der Vein', gender: 'girl' },
+    { id: 1, name: 'Ruben von der Vein', gender: 'boy' },
     { id: 2, name: 'Pjotr Versjuurre', gender: 'boy' },
     { id: 3, name: 'Bjart von Klef', gender: 'boy' },
-    { id: 4, name: 'Riesjard Lindhoe', gender: 'boy' }
+    { id: 4, name: 'Riesjard Lindhoe', gender: 'girl' }
   ])
   const onEndReached = () => {
     // fetch more items (paginated) e.g:

example/package.json

@@ -19,7 +19,8 @@
     "react-native": "0.63.4",
     "react-native-paper": "^4.9.2",
     "react-native-unimodules": "~0.12.0",
-    "react-native-web": "~0.14.9"
+    "react-native-web": "~0.14.9",
+    "use-popper": "^1.1.6"
   },
   "devDependencies": {
     "@babel/core": "~7.12.10",

example/src/Advanced.tsx

@@ -4,13 +4,22 @@ import * as React from 'react';
 // @ts-ignore
 import { Autocomplete } from 'react-native-paper-autocomplete';
 
-function Advanced({ multiple }: { multiple: boolean }) {
+function Advanced({
+  multiple,
+  mode,
+  dense,
+}: {
+  multiple?: boolean;
+  mode?: 'flat' | 'outlined' | undefined;
+  dense?: boolean;
+}) {
   const [options] = React.useState([
     { id: 1, name: 'Ruben von der Vein', gender: 'girl' },
     { id: 2, name: 'Pjotr Versjuurre', gender: 'boy' },
     { id: 3, name: 'Bjart von Klef', gender: 'boy' },
     { id: 4, name: 'Riesjard Lindhoe', gender: 'boy' },
   ]);
+
   const [value, setValue] = React.useState(
     multiple ? [options[0], options[1]] : options[0]
   );
@@ -30,8 +39,10 @@ function Advanced({ multiple }: { multiple: boolean }) {
       options={options}
       // if you want to group on something
       groupBy={(option) => option.gender}
+      dense={dense}
       //@ts-ignore
       inputProps={{
+        mode: mode,
         placeholder: 'Select user',
         // ...all other props which are available in react native paper
         onChangeText: (_) => {

example/src/App.tsx

@@ -1,23 +1,24 @@
 import * as React from 'react';
 import Advanced from './Advanced';
 import {
-  StyleSheet,
-  ScrollView,
-  View,
-  Linking,
-  Image,
   Animated,
+  Image,
+  Linking,
   Platform,
+  ScrollView,
+  StyleSheet,
+  View,
 } from 'react-native';
 
 import {
-  Title,
   Button,
-  Text,
-  Provider as PaperProvider,
-  useTheme,
   overlay,
   Paragraph,
+  Provider as PaperProvider,
+  Subheading,
+  Text,
+  Title,
+  useTheme,
 } from 'react-native-paper';
 
 function AppInner() {
@@ -80,16 +81,47 @@ function AppInner() {
         ]}
       >
         <View>
+          <Title>Single and multiple</Title>
           <Advanced multiple={true} />
           <Advanced multiple={false} />
           <Advanced multiple={false} />
           <Advanced multiple={true} />
         </View>
-        <Enter />
-        <Enter />
+      </Animated.View>
+      <Enter />
+      <Enter />
 
-        <Enter />
+      <Enter />
+      <Animated.View
+        style={[
+          styles.content,
+          styles.contentShadow,
+          {
+            backgroundColor,
+          },
+        ]}
+      >
+        <View>
+          <Title>Input modes</Title>
+          <Enter />
+          <Subheading>Outlined</Subheading>
+          <Advanced multiple={false} mode={'outlined'} />
+          <Enter />
+          <Subheading>Dense outlined</Subheading>
+          <Advanced multiple={false} mode={'outlined'} dense={true} />
+          <Enter />
+          <Subheading>Flat</Subheading>
+          <Advanced multiple={false} mode={'flat'} />
+          <Enter />
+          <Subheading>Dense flat</Subheading>
+          <Advanced multiple={false} mode={'flat'} dense={true} />
+          <Enter />
+        </View>
       </Animated.View>
+      <Enter />
+      <Enter />
+
+      <Enter />
 
       <Enter />
       <Enter />
@@ -157,7 +189,7 @@ const styles = StyleSheet.create({
     marginTop: 24,
     padding: 24,
     alignSelf: 'center',
-    flex: 1,
+    // flex: 1,
   },
   contentInline: {
     padding: 0,
@@ -183,7 +215,7 @@ const styles = StyleSheet.create({
   buttons: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 24 },
   pickButton: { marginTop: 6 },
   buttonSeparator: { width: 6 },
-  enter: { height: 12 },
+  enter: { height: 12, zIndex: 100 },
   label: { width: 100, fontSize: 16 },
   row: { paddingTop: 12, paddingBottom: 12, flexDirection: 'row' },
   customModal: {

example/yarn.lock

@@ -4801,6 +4801,11 @@ deprecated-decorator@^0.1.6:
   resolved "https://registry.npmjs.org/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz#00966317b7a12fe92f3cc831f7583af329b86c37"
   integrity sha1-AJZjF7ehL+kvPMgx91g68ym4bDc=
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-1.0.0.tgz#41c6065e70de738541c82cdbedea5292277a017e"
+  integrity sha512-/Nd1EQbQbI9UbSHrMiKZjFLrXSnU328iQdZKPQf78XQI6C+gutkFUeoHpG5J08Ioa6HeRbRNFpSIclh1xyG0mw==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -9735,6 +9740,11 @@ pnp-webpack-plugin@^1.5.0:
   dependencies:
     ts-pnp "^1.1.6"
 
+[email protected]:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -12550,6 +12560,21 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+[email protected]:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/use-deep-compare/-/use-deep-compare-0.1.0.tgz#7fd775047ab7126dfc11e8c19f6926b3112c03d0"
+  integrity sha512-WZG0iTvyo+6csYuCfoFxpYSK5nAifyO4jVia+yJTSooOo8EurzgzCE8ZMIcVpRQOwqolF0Otve94DrdGNYynFA==
+  dependencies:
+    dequal "1.0.0"
+
+use-popper@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/use-popper/-/use-popper-1.1.6.tgz#51d578084d92dd941dda466dea4cb0c3d2c5379b"
+  integrity sha512-iinEv3/meG+hdN/zcIKzdX/oa7b2xj8K/F1cckCeWTUE2Ne96YrXQqVVkenOOUky2vHyyHwUxx74pyP2SNgZUg==
+  dependencies:
+    popper.js "1.15.0"
+    use-deep-compare "0.1.0"
+
 use-subscription@^1.0.0:
   version "1.5.1"
   resolved "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"

package.json

@@ -156,5 +156,9 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.10.1",
+    "react-popper": "^2.2.5"
   }
 }