diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ecd56c..dc610a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## [1.3.0] 2019-11-06 +### Updated dependencies +- `expo@34.0.3` to `expo@35.0.0` +- `expo-font@6.0.1` to `expo-font@7.0.0` +- `expo-asset@6.0.0` to `expo-asset@7.0.0` +- `react-native SDK@34.0.0` to `react-native SDK@35.0.0` +- `galio-framework@0.6.1` to `galio-framework@0.6.3` +- `babel-preset-expo@5.0.0` to `babel-preset-expo@7.0.0` +### Updated files +- changed drawer items in order to have a similar look to the PRO version + ## [1.2.0] 2019-09-18 ### Updated dependencies - `expo@33.0.0` to `expo@34.0.3` diff --git a/app.json b/app.json index bdc5cb0..8e716c0 100644 --- a/app.json +++ b/app.json @@ -3,12 +3,12 @@ "name": "Argon FREE React Native", "slug": "argon-free-react-native", "privacy": "public", - "sdkVersion": "35.0.0", + "sdkVersion": "36.0.0", "platforms": [ "ios", "android" ], - "version": "1.3.0", + "version": "1.4.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { diff --git a/navigation/Menu.js b/navigation/Menu.js index ac024a1..d345de0 100644 --- a/navigation/Menu.js +++ b/navigation/Menu.js @@ -1,57 +1,55 @@ import React from "react"; -import { DrawerItems } from "react-navigation"; +import { useSafeArea } from "react-native-safe-area-context"; import { ScrollView, StyleSheet, - Dimensions, Image } from "react-native"; -import { Block, theme } from "galio-framework"; +import { Block, Text, theme } from "galio-framework"; import Images from "../constants/Images"; +import { DrawerItem as DrawerCustomItem } from '../components'; -const { width } = Dimensions.get("screen"); - -const Drawer = props => ( - - - +function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) { + const insets = useSafeArea(); + const screens = [ + "Home", + "Profile", + "Account", + "Elements", + "Articles", + ]; + return ( + + + + + + + {screens.map((item, index) => { + return ( + + ); + })} + + + DOCUMENTATION + + + + - - - - - - -); + ); +} -const Menu = { - contentComponent: props => , - drawerBackgroundColor: "white", - drawerWidth: width * 0.8, - contentOptions: { - activeTintColor: "white", - inactiveTintColor: "#000", - activeBackgroundColor: "transparent", - itemStyle: { - width: width * 0.75, - backgroundColor: "transparent" - }, - labelStyle: { - fontSize: 18, - marginLeft: 12, - fontWeight: "normal" - }, - itemsContainerStyle: { - paddingVertical: 16, - paddingHorizonal: 12, - justifyContent: "center", - alignContent: "center", - alignItems: "center", - overflow: "hidden" - } - } -}; const styles = StyleSheet.create({ container: { @@ -65,4 +63,4 @@ const styles = StyleSheet.create({ } }); -export default Menu; +export default CustomDrawerContent; diff --git a/navigation/Screens.js b/navigation/Screens.js index 89b8ac8..af7adcb 100644 --- a/navigation/Screens.js +++ b/navigation/Screens.js @@ -1,10 +1,9 @@ import React from "react"; -import { Easing, Animated } from "react-native"; -import { - createStackNavigator, - createDrawerNavigator, - createAppContainer -} from "react-navigation"; +import { Easing, Animated, Dimensions } from "react-native"; + +import { createStackNavigator } from "@react-navigation/stack"; +import { createDrawerNavigator } from "@react-navigation/drawer"; +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { Block } from "galio-framework"; @@ -17,173 +16,168 @@ import Register from "../screens/Register"; import Elements from "../screens/Elements"; import Articles from "../screens/Articles"; // drawer -import Menu from "./Menu"; -import DrawerItem from "../components/DrawerItem"; +import CustomDrawerContent from "./Menu"; // header for screens -import Header from "../components/Header"; +import { Icon, Header } from "../components"; +import { argonTheme, tabs } from "../constants"; -const transitionConfig = (transitionProps, prevTransitionProps) => ({ - transitionSpec: { - duration: 400, - easing: Easing.out(Easing.poly(4)), - timing: Animated.timing - }, - screenInterpolator: sceneProps => { - const { layout, position, scene } = sceneProps; - const thisSceneIndex = scene.index; - const width = layout.initWidth; +const { width } = Dimensions.get("screen"); - const scale = position.interpolate({ - inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1], - outputRange: [4, 1, 1] - }); - const opacity = position.interpolate({ - inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1], - outputRange: [0, 1, 1] - }); - const translateX = position.interpolate({ - inputRange: [thisSceneIndex - 1, thisSceneIndex], - outputRange: [width, 0] - }); +const Stack = createStackNavigator(); +const Drawer = createDrawerNavigator(); +const Tab = createBottomTabNavigator(); - const scaleWithOpacity = { opacity }; - const screenName = "Search"; +function ElementsStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#F8F9FE" } + }} + /> + + ); +} - if ( - screenName === transitionProps.scene.route.routeName || - (prevTransitionProps && - screenName === prevTransitionProps.scene.route.routeName) - ) { - return scaleWithOpacity; - } - return { transform: [{ translateX }] }; - } -}); +function ArticlesStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#F8F9FE" } + }} + /> + + ); +} -const ElementsStack = createStackNavigator({ - Elements: { - screen: Elements, - navigationOptions: ({ navigation }) => ({ - header:
- }) - } -},{ - cardStyle: { - backgroundColor: "#F8F9FE" - }, - transitionConfig -}); +function ProfileStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#FFFFFF" }, + headerTransparent: true + }} + /> + + ); +} -const ArticlesStack = createStackNavigator({ - Articles: { - screen: Articles, - navigationOptions: ({ navigation }) => ({ - header:
- }) - } -},{ - cardStyle: { - backgroundColor: "#F8F9FE" - }, - transitionConfig -}); +function HomeStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#F8F9FE" } + }} + /> + ( +
+ ), + headerTransparent: true + }} + /> + + ); +} -const ProfileStack = createStackNavigator( - { - Profile: { - screen: Profile, - navigationOptions: ({ navigation }) => ({ - header: ( -
- ), - headerTransparent: true - }) - } - }, - { - cardStyle: { backgroundColor: "#FFFFFF" }, - transitionConfig - } -); +export default function OnboardingStack(props) { + return ( + + + + + ); +} -const HomeStack = createStackNavigator( - { - Home: { - screen: Home, - navigationOptions: ({ navigation }) => ({ - header:
- }) - }, - Pro: { - screen: Pro, - navigationOptions: ({ navigation }) => ({ - header: ( -
} white transparent title="" navigation={navigation} /> - ), - headerTransparent: true - }) - } - }, - { - cardStyle: { - backgroundColor: "#F8F9FE" - }, - transitionConfig - } -); -// divideru se baga ca si cum ar fi un ecrna dar nu-i nimic duh -const AppStack = createDrawerNavigator( - { - Onboarding: { - screen: Onboarding, - navigationOptions: { - drawerLabel: () => {} - } - }, - Home: { - screen: HomeStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Profile: { - screen: ProfileStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Account: { - screen: Register, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Elements: { - screen: ElementsStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Articles: { - screen: ArticlesStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - } - }, - Menu -); +function AppStack(props) { + return ( + } + drawerStyle={{ + backgroundColor: "white", + width: width * 0.8 + }} + drawerContentOptions={{ + activeTintcolor: "white", + inactiveTintColor: "#000", + activeBackgroundColor: "transparent", + itemStyle: { + width: width * 0.75, + backgroundColor: "transparent", + paddingVertical: 16, + paddingHorizonal: 12, + justifyContent: "center", + alignContent: "center", + alignItems: "center", + overflow: "hidden" + }, + labelStyle: { + fontSize: 18, + marginLeft: 12, + fontWeight: "normal" + } + }} + initialRouteName="Home" + > + + + + + + + ); +} -const AppContainer = createAppContainer(AppStack); -export default AppContainer; diff --git a/package.json b/package.json index 8369189..9d17b2f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "argon-react-native", - "version": "1.3.0", + "version": "1.4.0", "description": "Argon React Native, based on Argon Design System. Coded by Creative Tim", "main": "node_modules/expo/AppEntry.js", "scripts": { @@ -14,16 +14,24 @@ "url": "git+https://github.com/creativetimofficial/argon-react-native.git" }, "dependencies": { - "expo": "^35.0.0", - "expo-asset": "~7.0.0", - "expo-font": "~7.0.0", + "@react-native-community/masked-view": "0.1.5", + "@react-navigation/bottom-tabs": "^5.0.6", + "@react-navigation/compat": "^5.0.0", + "@react-navigation/drawer": "5.0.0", + "@react-navigation/native": "5.0.0", + "@react-navigation/stack": "5.0.0", + "expo": "^36.0.0", + "expo-asset": "~8.0.0", + "expo-font": "~8.0.0", "galio-framework": "^0.6.3", "prop-types": "^15.7.2", - "react": "16.8.3", - "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", - "react-native-gesture-handler": "~1.3.0", - "react-native-modal-dropdown": "^0.6.2", - "react-navigation": "^3.11.0" + "react": "16.9.0", + "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz", + "react-native-gesture-handler": "~1.5.0", + "react-native-modal-dropdown": "^0.7.0", + "react-native-reanimated": "~1.4.0", + "react-native-safe-area-context": "0.6.0", + "react-native-screens": "2.0.0-alpha.12" }, "devDependencies": { "babel-preset-expo": "^7.0.0"