react-native-boxes 1.4.64 → 1.4.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.4.64",
+  "version": "1.4.66",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {

package/sample-app/App.tsx

@@ -1,34 +1,34 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-import { DemoScreen, Theme, ThemeContext } from 'react-native-boxes'
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-
-export default function App() {
-  const theme = new Theme()
-
-  loadAsync({
-    'Regular': require('./assets/fonts/Regular.ttf'),
-    'Bold': require('./assets/fonts/Bold.ttf'),
-    'Styled': require('./assets/fonts/Styled.ttf'),
-  })
-  return (
-    <ThemeContext.Provider value={theme}>
-      <SafeAreaProvider>
-        <DemoScreen />
-      </SafeAreaProvider>
-    </ThemeContext.Provider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-function loadAsync(arg0: { Regular: any; Bold: any; Styled: any; }) {
-  throw new Error('Function not implemented.');
-}
-
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { DemoScreen, Theme, ThemeContext } from 'react-native-boxes'
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function App() {
+  const theme = new Theme()
+
+  loadAsync({
+    'Regular': require('./assets/fonts/Regular.ttf'),
+    'Bold': require('./assets/fonts/Bold.ttf'),
+    'Styled': require('./assets/fonts/Styled.ttf'),
+  })
+  return (
+    <ThemeContext.Provider value={theme}>
+      <SafeAreaProvider>
+        <DemoScreen />
+      </SafeAreaProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+function loadAsync(arg0: { Regular: any; Bold: any; Styled: any; }) {
+  throw new Error('Function not implemented.');
+}
+

package/sample-app/app.json

@@ -1,30 +1,30 @@
-{
-  "expo": {
-    "name": "sample-app",
-    "slug": "sample-app",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}
+{
+  "expo": {
+    "name": "sample-app",
+    "slug": "sample-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/sample-app/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "sample-app",
-  "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
-  },
-  "dependencies": {
-    "@expo/metro-runtime": "~3.1.3",
-    "@expo/vector-icons": "^13.0.0",
-    "expo": "~50.0.14",
-    "expo-status-bar": "~1.11.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-boxes": "^1.4.61",
-    "react-native-gesture-handler": "^2.22.1",
-    "react-native-safe-area-context": "^4.9.0",
-    "react-native-web": "~0.19.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.45",
-    "typescript": "^5.1.3"
-  },
-  "private": true
-}
+{
+  "name": "sample-app",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~3.1.3",
+    "@expo/vector-icons": "^13.0.0",
+    "expo": "~50.0.14",
+    "expo-status-bar": "~1.11.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-boxes": "^1.4.61",
+    "react-native-gesture-handler": "^2.22.1",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-web": "~0.19.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

package/sample-app/tsconfig.json

@@ -1,6 +1,6 @@
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true
-  }
-}
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}

package/src/Bar.tsx

@@ -261,4 +261,35 @@ export function DividerView(props: DividerProps) {
             }} />
         </Center>
     )
+}
+
+
+export type ProgressBarViewProps = ViewProps & {
+    progress: number
+    progressColor?: String
+    pendingColor?: String
+}
+export function ProgressBarView(props: ProgressBarViewProps) {
+    const { progress } = props
+    const theme = useContext(ThemeContext)
+    return (
+        <View style={[{
+            marginTop: theme.dimens.space.md,
+            flexDirection: 'row',
+            height: theme.dimens.icon.sm / 3,
+            width: '100%',
+            backgroundColor: '#d3d3d3',
+            borderRadius: 5,
+            overflow: 'hidden',
+        }, props.style]}>
+            <View style={{
+                width: `${progress}%`,
+                backgroundColor: `${props.progressColor || theme.colors.accentLight}`,
+            }} />
+            <View style={{
+                width: `${100 - progress}%`,
+                backgroundColor: `${props.pendingColor || theme.colors.background}`,
+            }} />
+        </View>
+    );
 }

package/src/Button.tsx

@@ -283,8 +283,8 @@ export function LoadingButton(props: TextProps & TouchableHighlightProps
     useEffect(() => {
         if (props.loading != _loading) {
             LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-            _setIsLoading(props.loading)
         }
+        _setIsLoading(props.loading)
     }, [props.loading]);
     let loaderColor = theme.colors.invert.text
     let loaderSize = theme.dimens.icon.md