Merge pull request #5246 from GeekyAnts/release/3.4.11

Release/3.4.11

.npmignore

@@ -16,3 +16,4 @@ dist/__tests__
 
 # Example
 example/
+expo-example/

example/storybook/stories/components/primitives/Input/Elements.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Icon, Stack } from 'native-base';
+import { Input, Icon, Stack, Pressable } from 'native-base';
 import { MaterialIcons } from '@expo/vector-icons';
 
 export const Example = () => {
@@ -22,13 +22,16 @@ export const Example = () => {
         w={{ base: '75%', md: '25%' }}
         type={show ? 'text' : 'password'}
         InputRightElement={
-          <Icon
-            as={<MaterialIcons name={show ? 'visibility' : 'visibility-off'} />}
-            size={5}
-            mr="2"
-            color="muted.400"
-            onPress={() => setShow(!show)}
-          />
+          <Pressable onPress={() => setShow(!show)}>
+            <Icon
+              as={
+                <MaterialIcons name={show ? 'visibility' : 'visibility-off'} />
+              }
+              size={5}
+              mr="2"
+              color="muted.400"
+            />
+          </Pressable>
         }
         placeholder="Password"
       />

example/storybook/stories/components/primitives/Select/Basic.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Select, Box, CheckIcon, Center } from 'native-base';
 
 export const Example = () => {
-  let [service, setService] = React.useState('');
+  const [service, setService] = React.useState('');
 
   return (
     <Center>

expo-example/App.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, Switch } from 'react-native';
+import { CustomButtonScreen } from './custompressablescreen';
+import { NativeBaseScreen } from './nativebase';
+import { RNButtonScreen } from './reactnativescreen';
+import { NativeBaseProvider, extendTheme } from 'native-base';
+import { DripsyProvider, makeTheme } from 'dripsy';
+
+import { LogBox } from 'react-native';
+LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
+LogBox.ignoreAllLogs(); //Ignore all log notifications
+
+console.currentKey = {};
+const theme = makeTheme({});
+
+console.startTimeKey = function (key) {
+  console.currentKey[key] = Date.now();
+};
+
+console.endTimeKey = function (key, msg) {
+  console.log(msg, key, Date.now() - console.currentKey[key]);
+
+  // if (console.currentKey[key]) {
+  //   delete console.currentKey[key];
+  // }
+};
+
+export default function App() {
+  const [nativeBaseIsOn, setNativeBaseIsOn] = useState(false);
+  const [customIsOn, setCustomIsOn] = useState(false);
+  const [rnButtonIsOn, setRNButtonIsOn] = useState(true);
+  return (
+    <>
+      {/* <Switch
+        value={rnButtonIsOn}
+        onChange={() => setRNButtonIsOn(!rnButtonIsOn)}
+      />
+      <Text>RN Button</Text>
+      <Switch value={customIsOn} onChange={() => setCustomIsOn(!customIsOn)} />
+      <Text>Custom Button</Text>
+      <Switch
+        value={nativeBaseIsOn}
+        onChange={() => setNativeBaseIsOn(!nativeBaseIsOn)}
+      />
+      <Text>Nativebase Button</Text> */}
+      <View style={{ flex: 1 }}>
+        {/* {rnButtonIsOn && <RNButtonScreen />}
+        {customIsOn && <CustomButtonScreen />}
+        {nativeBaseIsOn && <NativeBaseScreen />} */}
+        <NativeBaseProvider
+        // theme={extendTheme({
+        //   // config: { initialColorMode: 'dark' },
+        //   components: {
+        //     Pressable: {
+        //       bg: 'blue.400',
+        //       _hover: 'red.500',
+        //     },
+        //   },
+        // })}
+        >
+          <DripsyProvider theme={theme}>
+            <NativeBaseScreen />
+          </DripsyProvider>
+        </NativeBaseProvider>
+      </View>
+    </>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

expo-example/app.json

@@ -0,0 +1,19 @@
+{
+  "name": "NativeBaseExpoExample",
+  "displayName": "NativeBase Expo Example",
+  "packagerOpts": {
+    "config": "metro.config.js"
+  },
+  "expo": {
+    "name": "NativeBase Expo Example",
+    "slug": "native-base-expo-example",
+    "description": "Example app for Nativebase",
+    "privacy": "public",
+    "version": "1.0.0",
+    "platforms": ["ios", "android", "web"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "assetBundlePatterns": ["**/*"]
+  }
+}

expo-example/babel.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            // For development, we want to alias the library to the source
+            [pak.name]: path.join(__dirname, '..', pak.source),
+          },
+        },
+      ],
+    ],
+  };
+};

expo-example/components/button.tsx

@@ -0,0 +1,25 @@
+import { Pressable, Text, View, Platform } from "react-native";
+import { useEffect, useState } from "react";
+
+export const Button = ({ children, onPress }: any) => {
+  const [pressed, setPressed] = useState(false);
+  return (
+    <Pressable
+      onPress={() => {
+        setPressed(true);
+        onPress();
+      }}
+      onPressOut={() => {
+        setPressed(false);
+      }}
+      style={{
+        backgroundColor: pressed ? "red" : "green",
+        padding: 10,
+        borderRadius: 5,
+        margin: 5,
+      }}
+    >
+      <Text style={{ color: pressed ? "#000" : "#fff" }}>{children}</Text>
+    </Pressable>
+  );
+};

expo-example/components/index.ts

@@ -0,0 +1 @@
+export * from "./button";

expo-example/custompressablescreen.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { Text, View, StyleSheet } from "react-native";
+import { Button } from "./components/button";
+export const CustomButtonScreen = () => {
+  let start = 0,
+    end = 0;
+  start = Date.now();
+  const [pressed, setPressed] = useState(false);
+  useEffect(() => {
+    end = Date.now();
+    console.log("Custom Button Diff", end - start);
+  }, [pressed]);
+  return (
+    <View style={styles.container}>
+      <Text>Custom Pressable</Text>
+      <Button onPress={() => setPressed(!pressed)}>Hello</Button>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

expo-example/metro.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const escape = require('escape-string-regexp');
+const pak = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: blacklist(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+};