@holper/react-native-holper-storybook 0.6.100 → 0.6.102

package/lib/components/Button/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, ActivityIndicator } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import withPreventDoubleClick from './../PreventDoubleClick';
 import { Colors } from '../../configs/constants';
 import style from './style';
@@ -97,7 +96,7 @@ Button.propTypes = {
     'secondary',
   ]),
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
-  style: ViewPropTypes.style,
+  style: PropTypes.any,
   onPress: PropTypes.func,
   debounceDelay: PropTypes.number,
 };

package/lib/components/Card/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, TouchableOpacity } from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import withPreventDoubleClick from '../PreventDoubleClick';
 import style from './style';
 
 const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
 
-const Card = ({children, isButton, onPress, noShadow, style: customStyle}, ...props) => (
+const Card = (
+  { children, isButton, onPress, noShadow, style: customStyle },
+  ...props
+) => (
   <>
     {isButton ? (
       <TappedTouchableOpacity
@@ -33,15 +35,15 @@ Card.defaultProps = {
   children: null,
   isButton: false,
   noShadow: false,
-  onPress: () => {}
+  onPress: () => {},
 };
 
 Card.propTypes = {
-  style: ViewPropTypes.style,
+  style: PropTypes.any,
   children: PropTypes.node,
   isButton: PropTypes.bool,
   noShadow: PropTypes.bool,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
 };
 
-export default Card;
+export default Card;

package/lib/components/Container/index.js

@@ -7,7 +7,6 @@ import {
   ScrollView,
   View,
 } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import style from './style';
 
 const Container = ({
@@ -48,8 +47,8 @@ Container.defaultProps = {
 Container.propTypes = {
   fullScreen: PropTypes.bool,
   enableScroll: PropTypes.bool,
-  style: ViewPropTypes.style,
-  scrollStyle: ViewPropTypes.style,
+  style: PropTypes.any,
+  scrollStyle: PropTypes.any,
 };
 
 export default Container;

package/lib/components/FloatingContainer/index.js

@@ -1,18 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, ScrollView, RefreshControl, KeyboardAvoidingView, Platform } from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
+import {
+  View,
+  ScrollView,
+  RefreshControl,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
 import style from './style';
 
 const FloatingContainer = ({
-                             useRefreshControl,
-                             onRefresh,
-                             isRefreshing,
-                             children,
-                             floatingComponent,
-                             centered,
-                             floatingContainerStyle,
-                             disableScroll
+  useRefreshControl,
+  onRefresh,
+  isRefreshing,
+  children,
+  floatingComponent,
+  centered,
+  floatingContainerStyle,
+  disableScroll,
 }) => (
   <KeyboardAvoidingView
     style={style.floatingContainer}
@@ -27,16 +32,15 @@ const FloatingContainer = ({
       keyboardDismissMode='on-drag'
       refreshControl={
         useRefreshControl ? (
-          <RefreshControl
-            refreshing={isRefreshing}
-            onRefresh={onRefresh}
-          />
-        ) : false
+          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
+        ) : null
       }
     >
       {children}
     </ScrollView>
-    <View style={[style.container, floatingContainerStyle]}>{floatingComponent}</View>
+    <View style={[style.container, floatingContainerStyle]}>
+      {floatingComponent}
+    </View>
   </KeyboardAvoidingView>
 );
 
@@ -48,7 +52,7 @@ FloatingContainer.defaultProps = {
   children: null,
   floatingComponent: null,
   disableScroll: false,
-  floatingContainerStyle: {}
+  floatingContainerStyle: {},
 };
 
 FloatingContainer.propTypes = {
@@ -59,7 +63,7 @@ FloatingContainer.propTypes = {
   children: PropTypes.node,
   floatingComponent: PropTypes.node,
   disableScroll: PropTypes.bool,
-  floatingContainerStyle: ViewPropTypes.style
+  floatingContainerStyle: PropTypes.any,
 };
 
-export default FloatingContainer;
+export default FloatingContainer;

package/lib/components/Header/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, TouchableOpacity, Image } from 'react-native';
-import { ImagePropTypes } from 'deprecated-react-native-prop-types';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { Colors } from '../../configs/constants';
 import style from './style';
@@ -38,7 +37,7 @@ Header.defaultProps = {
 
 Header.propTypes = {
   inverted: PropTypes.bool,
-  logo: ImagePropTypes.source.isRequired,
+  logo: PropTypes.any.isRequired,
   right: PropTypes.node,
   onMenuPress: PropTypes.func,
 };

package/lib/components/ImageResponsive/index.js

@@ -1,39 +1,39 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Image, View } from 'react-native';
-import {ViewPropTypes, ImagePropTypes} from 'deprecated-react-native-prop-types';
 import style from './style';
 
 const ImageResponsive = ({ source, style: customStyle, avatar, ...props }) => {
   const [width, setWidth] = useState(100);
 
   return (
-    <View style={[
-      customStyle,
-      avatar ? { borderRadius: width / 2, overflow: 'hidden' } : {}
-    ]}
+    <View
+      style={[
+        customStyle,
+        avatar ? { borderRadius: width / 2, overflow: 'hidden' } : {},
+      ]}
     >
       <Image
         style={style.responsiveImage}
         source={source}
         resizeMode={avatar ? 'cover' : 'contain'}
-        onLayout={({nativeEvent}) => setWidth(nativeEvent.layout.width)}
+        onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
         {...props}
       />
     </View>
   );
-}
+};
 
 ImageResponsive.defaultProps = {
   style: {},
   source: null,
-  avatar: false
+  avatar: false,
 };
 
 ImageResponsive.propTypes = {
-  style: ViewPropTypes.style,
-  source: ImagePropTypes.source.isRequired,
-  avatar: PropTypes.bool
+  style: PropTypes.any,
+  source: PropTypes.any.isRequired,
+  avatar: PropTypes.bool,
 };
 
 export default ImageResponsive;

package/lib/components/ImageViewer/index.js

@@ -1,10 +1,16 @@
 import React, { useState } from 'react';
-import { View, Modal, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
+import {
+  View,
+  Modal,
+  TouchableOpacity,
+  ActivityIndicator,
+  Image,
+} from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import {ImagePropTypes} from 'deprecated-react-native-prop-types';
 import ImageResponsive from '../ImageResponsive';
 import { Colors } from '../../configs/constants';
 import style from './style';
+import PropTypes from 'prop-types';
 
 const ImageViewer = ({ source, style: imageStyle, ...props }) => {
   const [loading, setLoading] = useState(true);
@@ -13,21 +19,20 @@ const ImageViewer = ({ source, style: imageStyle, ...props }) => {
   return (
     <>
       <TouchableOpacity onPress={() => setVisible(true)}>
-        <ImageResponsive
-          source={source}
-          style={imageStyle}
-          {...props}
-        />
+        <ImageResponsive source={source} style={imageStyle} {...props} />
       </TouchableOpacity>
 
       <Modal
-        animationType="slide"
+        animationType='slide'
         transparent={true}
         visible={visible}
         onRequestClose={() => {}}
       >
         <View style={style.container}>
-          <TouchableOpacity onPress={() => setVisible(false)} style={style.closeIcon}>
+          <TouchableOpacity
+            onPress={() => setVisible(false)}
+            style={style.closeIcon}
+          >
             <Ionicons name='close-outline' size={24} color={Colors.darkblue} />
           </TouchableOpacity>
 
@@ -37,7 +42,7 @@ const ImageViewer = ({ source, style: imageStyle, ...props }) => {
             onLoadEnd={() => setLoading(false)}
           />
 
-          { loading && <ActivityIndicator style={style.activityIndicator}/> }
+          {loading && <ActivityIndicator style={style.activityIndicator} />}
         </View>
       </Modal>
     </>
@@ -46,12 +51,12 @@ const ImageViewer = ({ source, style: imageStyle, ...props }) => {
 
 ImageViewer.defaultProps = {
   source: null,
-  style: {}
+  style: {},
 };
 
 ImageViewer.propTypes = {
-  source: ImagePropTypes.source.isRequired,
-  style: ImagePropTypes.style
+  source: PropTypes.any.isRequired,
+  style: PropTypes.any,
 };
 
 export default ImageViewer;

package/lib/components/ImageViewer/style.js

@@ -9,7 +9,7 @@ export default {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    position: 'relative'
+    position: 'relative',
   },
   closeIcon: {
     position: 'absolute',
@@ -21,17 +21,17 @@ export default {
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   body: {
     width,
     height,
     alignSelf: 'center',
-    position: 'relative'
+    position: 'relative',
   },
   activityIndicator: {
-    top: (height / 2) - 100,
-    left: (width / 2) - 20,
-    position: 'absolute'
-  }
+    top: height / 2 - 100,
+    left: width / 2 - 20,
+    position: 'absolute',
+  },
 };

package/lib/components/Notification/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View } from 'react-native';
-import { ImagePropTypes } from 'deprecated-react-native-prop-types';
 import Text from '../Text';
 import ImageResponsive from '../ImageResponsive';
 import { Colors } from '../../configs/constants';
@@ -71,7 +70,7 @@ Notification.propTypes = {
   first: PropTypes.bool,
   active: PropTypes.bool,
   hideAvatar: PropTypes.bool,
-  avatar: ImagePropTypes.source,
+  avatar: PropTypes.any,
   title: PropTypes.string,
   description: PropTypes.string,
   date: PropTypes.instanceOf(moment),

package/lib/components/TakePicture/confirmPictureModal.js

@@ -13,35 +13,32 @@ export const ConfirmPictureModal = ({
   image,
   repeatPictureText,
   usePictureText,
-}) => {
-  return (
-    <Modal
-      animationType='slide'
-      transparent={false}
-      visible={visible}
-      onRequestClose={() => {}}
-    >
-      <View style={style.cameraTakenImageContainer}>
-        <ImageResponsive
-          source={{
-            uri: image ? image.uri : null,
-            cache: 'only-if-cached',
-          }}
-          style={avatar ? style.cameraTakenImage : style.cameraContainer}
-        />
+}) => (
+  <Modal
+    animationType='slide'
+    transparent={false}
+    visible={visible}
+    onRequestClose={() => {}}
+  >
+    <View style={style.cameraTakenImageContainer}>
+      <ImageResponsive
+        source={{
+          uri: image ? image.uri : null,
+        }}
+        style={avatar ? style.cameraTakenImage : style.cameraContainer}
+      />
 
-        <View style={style.cameraRetakePhoto}>
-          <TouchableOpacity onPress={onRepeatPhoto}>
-            <Text style={style.cameraRetakePhotoText}>{repeatPictureText}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={onUsePhoto}>
-            <Text style={style.cameraRetakePhotoText}>{usePictureText}</Text>
-          </TouchableOpacity>
-        </View>
+      <View style={style.cameraRetakePhoto}>
+        <TouchableOpacity onPress={onRepeatPhoto}>
+          <Text style={style.cameraRetakePhotoText}>{repeatPictureText}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={onUsePhoto}>
+          <Text style={style.cameraRetakePhotoText}>{usePictureText}</Text>
+        </TouchableOpacity>
       </View>
-    </Modal>
-  );
-};
+    </View>
+  </Modal>
+);
 
 ConfirmPictureModal.defaultProps = {
   visible: false,

package/lib/components/Text/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text as RNText } from 'react-native';
-import { TextPropTypes } from 'deprecated-react-native-prop-types';
 import style from './style';
 
 const Text = ({
@@ -69,7 +68,7 @@ Text.propTypes = {
   ]),
   weight: PropTypes.oneOf(['regular', 'bold', 'semiBold']),
   align: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
-  style: TextPropTypes.style,
+  style: PropTypes.any,
   children: PropTypes.node,
 };
 

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.100",
+  "version": "0.6.102",
   "license": "MIT",
   "files": [
     "lib",
@@ -30,7 +30,6 @@
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.3.0",
     "@react-native-community/slider": "4.5.6",
-    "deprecated-react-native-prop-types": "^5.0.0",
     "expo": "^53.0.10",
     "expo-asset": "~11.1.5",
     "expo-camera": "~16.1.7",