added CosyncStorage React Expo

Author: tolacambo

CosyncStorage/CosyncStorageReactExpo/App.js

@@ -0,0 +1,24 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import {  AuthProvider } from './context/AuthContext';
+import AppNav from './components/AppNav';
+export default function App() {
+  return ( 
+    <>
+      <StatusBar style='light' />
+
+      <AuthProvider>
+        <AppNav/> 
+      </AuthProvider>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

CosyncStorage/CosyncStorageReactExpo/app.json

@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "name": "CosyncStorageReactExpo",
+    "slug": "CosyncStorageReactExpo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/cosynclogo.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.tolacambo.CosyncStorageReactExpo"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "com.tolacambo.CosyncStorageReactExpo"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

CosyncStorage/CosyncStorageReactExpo/assets/adaptive-icon.png

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

CosyncStorage/CosyncStorageReactExpo/assets/cosynclogo.png

@@ -0,0 +1,46 @@
+
+import React, { useContext } from 'react'; 
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import RegisterScreen from '../screens/RegisterScreen';
+import LoginScreen from '../screens/LoginScreen';
+import HomeScreen from '../screens/HomeScreen';  
+import { AuthContext } from '../context/AuthContext';
+
+const Stack = createNativeStackNavigator();
+
+
+export default function AppNav() {
+  
+    const { realmUser } = useContext(AuthContext);
+
+    return (
+      <NavigationContainer>
+          {realmUser ? 
+              <AppStack/> : 
+              <AuthStack/>
+          }
+      </NavigationContainer>
+
+    )
+}
+
+
+const AuthStack = () => {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen name="LoginScreen" component={LoginScreen} />
+        <Stack.Screen name="RegisterScreen" component={RegisterScreen} />  
+      </Stack.Navigator>
+    );
+  };
+  
+  
+  const AppStack = () => {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/> 
+      </Stack.Navigator>
+    );
+  };
+  

CosyncStorage/CosyncStorageReactExpo/assets/favicon.png

@@ -0,0 +1,178 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import PropTypes from 'prop-types';
+
+const CircularProgressBar = (props) => {
+  const {
+    activeColor,
+    passiveColor,
+    baseColor,
+    radius,
+    percent,
+    width,
+    duration,
+    children,
+  } = props;
+
+  const initialValueHalfCircle = percent >= 50 ? 0 : 180;
+  const initialValueInnerCircle = 0;
+  const firstCircleAnimatedValue = new Animated.Value(initialValueHalfCircle);
+  const secondCircleAnimatedValue = new Animated.Value(initialValueHalfCircle);
+  const thirdCircleAnimatedValue = new Animated.Value(initialValueInnerCircle);
+  const timePerDegree = duration / 360;
+  const firstCircleColor = activeColor;
+  const secondCircleColor = percent >= 50 ? activeColor : passiveColor;
+
+  const secondAnimation = () => {
+    firstCircleAnimatedValue.setValue(initialValueHalfCircle);
+    secondCircleAnimatedValue.setValue(initialValueHalfCircle);
+    thirdCircleAnimatedValue.setValue(initialValueHalfCircle);
+    Animated.parallel([
+      Animated.timing(firstCircleAnimatedValue, {
+        toValue: 180,
+        duration: 180 * timePerDegree,
+        useNativeDriver: true,
+        easing: Easing.linear,
+      }),
+      Animated.timing(secondCircleAnimatedValue, {
+        toValue: 180 + (percent - 50) * 3.6,
+        duration: (180 + (percent - 50) * 3.6) * timePerDegree,
+        useNativeDriver: true,
+        easing: Easing.linear,
+      }),
+      Animated.timing(thirdCircleAnimatedValue, {
+        toValue: (percent - 50) * 3.6,
+        delay: 180 * timePerDegree,
+        duration: timePerDegree * ((percent - 50) * 3.6),
+        useNativeDriver: false,
+        easing: Easing.linear,
+      }),
+    ]).start();
+  };
+
+  const firstAnimation = () => {
+    Animated.timing(secondCircleAnimatedValue, {
+      toValue: 180 + percent * 3.6,
+      duration: percent * 3.6 * timePerDegree,
+      useNativeDriver: true,
+      easing: Easing.linear,
+    }).start();
+  };
+
+  useEffect(() => {
+    if (percent < 50) {
+      firstAnimation();
+    } else {
+      secondAnimation();
+    }
+  });
+
+  const renderHalf = (color, transforms = [], otherStyles = {}) => (
+    <Animated.View
+      style={[
+        styles.half,
+        { backgroundColor: color, borderColor: color },
+        { width: radius, height: radius * 2, borderRadius: radius },
+        {
+          transform: [
+            { translateX: radius / 2 },
+            ...transforms,
+            { translateX: -radius / 2 },
+          ],
+        },
+        otherStyles,
+      ]}
+    />
+  );
+
+  const rotate1 = firstCircleAnimatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '1deg'],
+  });
+
+  const rotate2 = secondCircleAnimatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '1deg'],
+  });
+
+  const rotate3 = thirdCircleAnimatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '1deg'],
+  });
+
+  const elevation3 = thirdCircleAnimatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -1],
+  });
+
+  const innerCircleStyle = {
+    backgroundColor: baseColor,
+    width: 2 * radius - width,
+    height: 2 * radius - width,
+    borderRadius: radius,
+    elevation: 1000,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return (
+    <View style={styles.container} key={percent}>
+      <View
+        style={[
+          styles.outerCircle,
+          {
+            height: radius * 2,
+            width: radius * 2,
+            borderRadius: radius,
+            backgroundColor: passiveColor,
+            overflow: 'hidden',
+          },
+        ]}
+      >
+        {renderHalf(firstCircleColor, [{ rotate: rotate1 }])}
+        {renderHalf(secondCircleColor, [{ rotate: rotate2 }])}
+        {renderHalf(passiveColor, [{ rotate: rotate3 }], {
+          elevation: elevation3, zIndex: elevation3,
+        })}
+        {<View style={innerCircleStyle}>
+          {children}
+        </View>}
+      </View>
+    </View>
+  );
+};
+
+CircularProgressBar.propTypes = {
+  activeColor: PropTypes.string.isRequired,
+  passiveColor: PropTypes.string.isRequired,
+  baseColor: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  radius: PropTypes.number.isRequired,
+  percent: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
+  children: PropTypes.element,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outerCircle: {
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  half: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+});
+
+export default CircularProgressBar;