@jescon-technologies/react-native-ui-kit 0.0.1

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+JESCON TECHNOLOGIES PVT LTD License
+
+Copyright (c) 2024 PRAFULDAS M M
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@jescon-technologies/react-native-ui-kit",
+  "version": "0.0.1",
+  "description": "A React Native module for Jescon Technologies that provides react-native-ui-kit",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "react-native-ui-kit"
+  ],
+  "author": "PRAFULDAS M M",
+  "license": "JESCON TECHNOLOGIES PVT LTD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dpraful/react-native-ui-kit.git"
+  },
+  "homepage": "https://github.com/dpraful/react-native-ui-kit#readme",
+  "bugs": {
+    "url": "https://github.com/dpraful/react-native-ui-kit/issues"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-native": ">=0.60.0",
+    "react-native-vector-icons": "^9.0.0",
+    "react-native-geolocation-service": "^5.0.0",
+    "react-native-image-resizer": "^1.0.0",
+    "@react-navigation/native": "^6.0.0",
+    "prop-types": "^15.8.0",
+    "react-native-fs": "^2.20.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "react-native": "^0.69.0"
+  }
+}

package/src/Alerts/AAlert.js

@@ -0,0 +1,137 @@
+import React, { useState, memo, useEffect } from 'react';
+import { View, Dimensions, Text, TouchableOpacity, StyleSheet, TextInput, Platform, Image } from 'react-native';
+import { Global } from '../Common/Global';
+import Icons from '../Common/Icons';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+export default function AAlert(props) {
+  const [overlay, setOverlay] = useState(true)
+  const [data] = useState({
+    ...props.data,
+    "bgcolor": getBgColor(props.data.datavalue),
+    "durartion": getDurarion(props.data.datavalue)
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      props.close(false)
+      setOverlay(false)
+    }, data.durartion)
+  }, []);
+
+  function getBgColor(key) {
+    switch (key) {
+      case 1: return "#0ca004"
+      case 2: return "#f44e4e"
+      case 3: return "#bfbf18"
+      case 4: return "#d88304"
+      default: return Global.AppTheme.primary_color
+    }
+  }
+
+  function getTransparentColor(key) {
+    switch (key) {
+      case 1: return "rgba(0, 90, 0, 0.2)"
+      case 2: return "rgba(90, 0, 0, 0.2)"
+      case 3: return "rgba(249, 242, 172, 0.2)"
+      case 4: return "rgba(249, 212, 167, 0.2)"
+      default: return "rgba(0, 0, 0, 0.2)"
+    }
+  }
+
+  function getDurarion(key) {
+    switch (key) {
+      case 1: return 2000
+      case 2: return 2000
+      case 3: return 2000
+      case 4: return 2000
+      default: return 2000
+    }
+  }
+
+  function getPopupContainerStyleIOS() {
+    return {
+      ...styles.overlaystyle,
+      backgroundColor: ValueCheck(data.bgcolor) ? data.bgcolor : '#fff',
+      bottom: normalize(100),
+    };
+  }
+
+  return (
+    <CModalOverlay
+      visible={overlay}
+      onClose={() => setOverlay(false)}
+      animationType="fadeInUp"
+      // containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.00)' }}
+      animationDuration={500}
+      closeOnTouchOutside={false}
+      containerStyle={{ width: '100%', backgroundColor: getTransparentColor(data.datavalue) }}
+      childrenWrapperStyle={getPopupContainerStyleIOS()}>
+
+      <TouchableOpacity
+        style={{ position: 'absolute', right: normalize(15), zIndex: 1, top: normalize(5) }}
+        onPress={() => setOverlay(false, props.close(false))}>
+        <Icons.AntDesign name={"closecircleo"} size={normalize(15)} color={"#fff"} />
+      </TouchableOpacity>
+      <View style={{ flexDirection: 'row', width: '100%', borderWidth: 0 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', borderWidth: 0, justifyContent: 'center' }}>
+          <Image
+            style={{
+              borderWidth: 0,
+              height: normalize(30),
+              width: normalize(30),
+              borderRadius: normalize(50),
+            }}
+            resizeMode={'stretch'}
+            source={require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+          />
+          <Icons.Entypo
+            color={"#fff"}
+            name={'info'}
+            size={normalize(15)}
+            style={{
+              borderWidth: 0
+            }}
+          />
+        </View>
+
+
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+
+          <Text
+            adjustsFontSizeToFit
+            style={{
+              color: "#fff",
+              fontWeight: 'bold',
+              fontSize: normalize(16),
+              paddingLeft: normalize(7),
+            }}>
+            {ValueCheck(data.displaytext) ? data.displaytext : ''}
+          </Text>
+        </View>
+      </View>
+    </CModalOverlay>
+  );
+
+
+  function getClose() {
+    setOverlay(false)
+    props.close != undefined ? props.close(false) : null
+  }
+}
+
+
+const styles = StyleSheet.create({
+  overlaystyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    borderRadius: normalize(30),
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+});
+
+

package/src/Alerts/AAlertIOS.js

@@ -0,0 +1,97 @@
+import React, { useState, memo, useEffect } from 'react';
+import { View, Dimensions, Text, TouchableOpacity, StyleSheet, TextInput, Platform, Image } from 'react-native';
+import { Global } from '../Common/Global';
+import Icons from '../Common/Icons';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+export default function AAlertIOS(props) {
+    const [overlay, setOverlay] = useState(true)
+    const [data] = useState({
+        ...props.data,
+        "bgcolor": getBgColor(props.data.datavalue),
+        "durartion": getDurarion(props.data.datavalue)
+    });
+
+    useEffect(() => {
+        setTimeout(() => {
+            props.close(false)
+            setOverlay(false)
+        }, data.durartion)
+    }, []);
+
+    function getBgColor(key) {
+        switch (key) {
+            case 1: return "#0ca004"
+            case 2: return "#f44e4e"
+            case 3: return "#bfbf18"
+            case 4: return "#d88304"
+            default: return Global.AppTheme.primary_color
+        }
+    }
+
+    function getDurarion(key) {
+        switch (key) {
+            case 1: return 2500
+            case 2: return 2500
+            case 3: return 2500
+            case 4: return 2500
+            default: return 2500
+        }
+    }
+
+    return (
+        <View style={{ position: 'absolute', bottom: normalize(80), zIndex: 1 }}>
+            <View style={{
+                flexDirection: 'row', backgroundColor: data.bgcolor,
+                width: Dimensions.get('screen').width, paddingHorizontal: normalize(10),
+                paddingVertical: normalize(10), borderRadius: normalize(10),
+                borderWidth: normalize(2), borderColor: '#fff'
+            }}>
+                <Image
+                    style={{
+                        height: normalize(30),
+                        width: normalize(30),
+                        borderRadius: normalize(50),
+                        alignSelf: 'flex-start'
+                    }}
+                    resizeMode={'stretch'}
+                    source={require('../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+                />
+
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingLeft: normalize(15) }}>
+                    <Icons.Entypo
+                        color={"#fff"}
+                        name={'info'}
+                        size={normalize(15)}
+                    />
+                    <Text
+                        adjustsFontSizeToFit
+                        style={{
+                            color: "#fff",
+                            fontWeight: 'bold',
+                            fontSize: normalize(16),
+                            paddingLeft: normalize(7),
+                            paddingRight: normalize(30),
+                        }}>
+                        {ValueCheck(data.displaytext) ? data.displaytext : ''}
+                    </Text>
+                </View>
+            </View>
+        </View>
+    );
+
+}
+
+
+const styles = StyleSheet.create({
+    overlaystyle: {
+        position: 'absolute',
+        width: Dimensions.get('window').width,
+        borderRadius: normalize(15),
+        borderWidth: 2,
+        borderColor: '#e0e0e0',
+    },
+});
+
+

package/src/Alerts/ABlink.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { Animated, View } from 'react-native'
+
+export default class ABlink extends Component {
+
+    constructor(props) {
+        super(props);
+        this.fadeAnimation = new Animated.Value(0);
+    }
+
+    componentDidMount() {
+        Animated.loop(
+            Animated.sequence([
+                Animated.timing(this.fadeAnimation, {
+                    toValue: 0,
+                    duration: this.props.duration,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(this.fadeAnimation, {
+                    toValue: 1,
+                    duration: this.props.duration,
+                    useNativeDriver: true,
+                })
+            ]),
+            {
+                iterations: this.props.repeat_count
+            }
+        ).start();
+    }
+
+    render() {
+        return (
+            <View style={{ ...this.props.style }}>
+                <Animated.View style={{ opacity: this.fadeAnimation }}>
+                    {this.props.children}
+                </Animated.View>
+            </View>
+        )
+    }
+}

package/src/common/ErrorBoundary.tsx

@@ -0,0 +1,73 @@
+import React, { ErrorInfo, ReactNode } from 'react';
+import { Button, StyleSheet, Text, View, Image } from 'react-native';
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // You can also log the error to an error reporting service
+    // console.log('componentDidCatch ', error, ' ', errorInfo);
+    notifyMessage("ERROR : " + error + ' ' + errorInfo, 2)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <View style={styles.container}>
+          <View style={{ width: '100%', }}>
+            <Image
+              source={{ uri: "https://t4.ftcdn.net/jpg/05/24/04/51/360_F_524045110_UXnCx4GEDapddDi5tdlY96s4g0MxHRvt.jpg" }}
+              resizeMode="cover" style={{ height: normalize(200) }} />
+          </View>
+          <Text style={styles.message}>
+            Something went wrong.{'\n'} Our team has taken a note of this issue.
+          </Text>
+          {/* <Button 
+            title="Try Again" 
+            onPress={() => CodePush.restartApp()} 
+          /> */}
+
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff'
+  },
+  message: {
+    fontSize: normalize(16),
+    color: 'black',
+    marginBottom: 20,
+    textAlign: 'center',
+    paddingHorizontal: 10,
+  },
+});

package/src/common/Icons.js

@@ -0,0 +1,49 @@
+import MaterialCommunityIconsI from 'react-native-vector-icons/MaterialCommunityIcons'
+import SimpleLineIconsI from 'react-native-vector-icons/SimpleLineIcons'
+import MaterialIconsI from 'react-native-vector-icons/MaterialIcons'
+import FontAwesomeI from 'react-native-vector-icons/FontAwesome'
+import FoundationI from 'react-native-vector-icons/Foundation'
+import EvilIconsI from 'react-native-vector-icons/EvilIcons'
+import OcticonsI from 'react-native-vector-icons/Octicons'
+import IoniconsI from 'react-native-vector-icons/Ionicons'
+import FeatherI from 'react-native-vector-icons/Feather'
+import EntypoI from 'react-native-vector-icons/Entypo'
+import ZocialI from 'react-native-vector-icons/Zocial'
+import FontAwesomeFive from 'react-native-vector-icons/FontAwesome5';
+import AntDesignI from 'react-native-vector-icons/AntDesign';
+import React from 'react'
+
+export const MaterialCommunityIcons = props => (
+    <MaterialCommunityIconsI {...props} />
+)
+const SimpleLineIcons = props => <SimpleLineIconsI {...props} />
+const MaterialIcons = props => <MaterialIconsI {...props} />
+const FontAwesome = props => <FontAwesomeI {...props} />
+const Foundation = props => <FoundationI {...props} />
+const EvilIcons = props => <EvilIconsI {...props} />
+const Ionicons = props => <IoniconsI {...props} />
+const Octicons = props => <OcticonsI {...props} />
+const Feather = props => <FeatherI {...props} />
+const Entypo = props => <EntypoI {...props} />
+const Zocial = props => <ZocialI {...props} />
+const FontAwesome5 = props => <FontAwesomeFive {...props} />
+const AntDesign = props => <AntDesignI {...props} />
+
+
+
+export default {
+    MaterialCommunityIcons,
+    SimpleLineIcons,
+    SimpleLineIcons,
+    MaterialIcons,
+    FontAwesome,
+    Foundation,
+    EvilIcons,
+    Ionicons,
+    Octicons,
+    Feather,
+    Entypo,
+    Zocial,
+    FontAwesome5,
+    AntDesign
+}