diff --git a/apps/components/Card/CardHomePromo.js b/apps/components/Card/CardHomePromo.js new file mode 100644 index 0000000..6e5c0e7 --- /dev/null +++ b/apps/components/Card/CardHomePromo.js @@ -0,0 +1,175 @@ +import Text from '@components/Text'; +import {BaseColor} from '@config'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {ActivityIndicator, StyleSheet, TouchableOpacity} from 'react-native'; +// import styles from './styles'; +import {useTheme} from '@react-navigation/native'; +import {Image, View} from 'react-native'; +import {Fonts} from '@config'; + +export default function CardHomePromo(props) { + const {colors} = useTheme(); + const { + style, + loading, + children, + backgroundColor, + title, + subtitle, + onPressSeeDetails, + onPress, + image, + ...rest + } = props; + + return ( + + + + + {/* Step into your new elegance design home. */} + {title} + + + {/* Each apartment showcase contemporary architecture, high-end finished, and + top-of the-line appliance. */} + {subtitle} + + + + + + See details + + + + + + + + + + + // + // {icon ? icon : null} + // + // {children} + // + // {loading ? ( + // + // ) : null} + // + ); +} + +CardHomePromo.propTypes = { + loading: PropTypes.bool, + + backgroundColor: PropTypes.string, + title: PropTypes.string, + subtitle: PropTypes.string, + onPressSeeDetails: PropTypes.func, + onPress: PropTypes.func, + image: PropTypes.node, + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + loading: PropTypes.bool, +}; + +CardHomePromo.defaultProps = { + style: {}, + loading: false, + image: '', + onPress: () => {}, + onPressSeeDetails: () => {}, + subtitle: '', + title: '', + backgroundColor: '', +}; diff --git a/apps/components/Card/styles.js b/apps/components/Card/styles.js new file mode 100644 index 0000000..e69de29 diff --git a/apps/components/Header/Animated/index.js b/apps/components/Header/Animated/index.js new file mode 100644 index 0000000..cf41cbf --- /dev/null +++ b/apps/components/Header/Animated/index.js @@ -0,0 +1,103 @@ +import React from "react"; +import { Animated, View } from "react-native"; +import styles from "./styles"; + +const HeaderAnimated = ({ + title = "", + componentRight = null, + componentLeft = null, + componentBottom = null, + scrollY = 0, + widthRight = 80, + heightScroll = 140, + styleRight = {}, + style = {} +}) => { + // const scrollY = useRef(new Animated.Value(0)).current; + + //For header background color from transparent to header color + const positionTopInput = scrollY.interpolate({ + inputRange: [0, heightScroll], + outputRange: [75, 16], + extrapolate: "clamp", + useNativeDriver: true, + }); + + const paddingInput = scrollY.interpolate({ + inputRange: [0, heightScroll], + outputRange: [0, widthRight], + extrapolate: "clamp", + useNativeDriver: true, + }); + const heightView = scrollY.interpolate({ + inputRange: [0, heightScroll], + outputRange: [45, 0], + extrapolate: "clamp", + useNativeDriver: true, + }); + + const opacityHeader = scrollY.interpolate({ + inputRange: [0, heightScroll], + outputRange: [1, 0], + extrapolate: "clamp", + useNativeDriver: true, + }); + + return ( + + + + {componentLeft} + + + + + {componentBottom} + + + {componentRight} + + + ); +}; + +export default HeaderAnimated; diff --git a/apps/components/Header/Animated/styles.js b/apps/components/Header/Animated/styles.js new file mode 100644 index 0000000..97bcea0 --- /dev/null +++ b/apps/components/Header/Animated/styles.js @@ -0,0 +1,14 @@ +import { StyleSheet } from "react-native"; + +export default StyleSheet.create({ + paddingSrollView: { padding: 20 }, + paddingFlatList: { + paddingTop: 8, + }, + componentRight: { + alignItems: "flex-end", + position: "absolute", + right: 20, + top: 22, + }, +}); diff --git a/apps/components/Header/Header/index.js b/apps/components/Header/Header/index.js new file mode 100644 index 0000000..4f2b666 --- /dev/null +++ b/apps/components/Header/Header/index.js @@ -0,0 +1,133 @@ +import Text from '@components/Text'; +import PropTypes from 'prop-types'; +import React, {useEffect} from 'react'; +import {StatusBar, TouchableOpacity, View} from 'react-native'; +// import {useDarkMode} from 'react-native-dark-mode'; +// import {} +import {DarkTheme, useTheme} from '@react-navigation/native'; +import {useSelector} from 'react-redux'; +import styles from './styles'; +import {Fonts, BaseColor} from '@config'; + +export default function Header(props) { + const forceDark = useSelector(state => state.application.force_dark); + const { + style, + styleLeft, + styleContentLeft, + styleContentCenter, + styleRight, + styleRightSecond, + styleContentRight, + title, + subTitle, + onPressLeft, + onPressRight, + onPressRightSecond, + renderLeft, + renderRightSecond, + renderRight, + barStyle, + _numberOfLines, + } = props; + const isDarkMode = useTheme(); + + useEffect(() => { + let option = isDarkMode ? 'light-content' : 'dark-content'; + if (forceDark) { + option = 'light-content'; + } + if (forceDark == false) { + option = 'dark-content'; + } + if (barStyle) { + option = barStyle; + } + StatusBar.setBarStyle(option, true); + }, [forceDark, isDarkMode]); + + return ( + + + + {renderLeft()} + + + + + {title} + + + {subTitle != '' && ( + + {subTitle} + + )} + + + + {renderRightSecond()} + + + {renderRight()} + + + + ); +} + +Header.propTypes = { + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleLeft: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleContentLeft: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleCenter: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleContentCenter: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleRight: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleRightSecond: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + styleContentRight: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + renderLeft: PropTypes.func, + renderRight: PropTypes.func, + renderRightSecond: PropTypes.func, + onPressRightSecond: PropTypes.func, + onPressLeft: PropTypes.func, + onPressRight: PropTypes.func, + title: PropTypes.string, + subTitle: PropTypes.string, + barStyle: PropTypes.string, + _numberOfLines: PropTypes.number, +}; + +Header.defaultProps = { + style: {}, + styleLeft: {}, + styleContentLeft: {}, + styleCenter: {}, + styleContentCenter: {}, + styleRight: {}, + styleRightSecond: {}, + styleContentRight: {}, + renderLeft: () => {}, + renderRight: () => {}, + renderRightSecond: () => {}, + onPressLeft: () => {}, + onPressRight: () => {}, + onPressRightSecond: () => {}, + title: 'Title', + subTitle: '', + barStyle: '', + _numberOfLines: 10, +}; diff --git a/apps/components/Header/Header/styles.js b/apps/components/Header/Header/styles.js new file mode 100644 index 0000000..92c882a --- /dev/null +++ b/apps/components/Header/Header/styles.js @@ -0,0 +1,38 @@ +import React from 'react'; +import {StyleSheet, I18nManager} from 'react-native'; +import {BaseStyle} from '@config'; + +export default StyleSheet.create({ + contain: {height: 45, flexDirection: 'row'}, + contentLeft: { + flex: 1, + justifyContent: 'center', + paddingHorizontal: 20, + width: 60, + }, + contentCenter: { + flex: 2, + alignItems: 'center', + justifyContent: 'center', + }, + contentRight: { + justifyContent: 'center', + alignItems: 'flex-end', + paddingLeft: 10, + paddingRight: 20, + height: '100%', + }, + contentRightSecond: { + justifyContent: 'center', + alignItems: 'flex-end', + // paddingLeft: 10, + paddingRight: 10, + height: '100%', + }, + right: { + flex: 1, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'flex-end', + }, +}); diff --git a/apps/components/Header/Text/index.js b/apps/components/Header/Text/index.js new file mode 100644 index 0000000..e7b2913 --- /dev/null +++ b/apps/components/Header/Text/index.js @@ -0,0 +1,35 @@ +import Header from "@components/Header/Header"; +import Text from "@components/Text"; +import React from "react"; + +function HeaderText({ title = "", props = {} }) { + return ( +
( + + {title} + + )} + title={""} + styleLeft={{ + flex: 1, + }} + styleContentLeft={{ + flex: 1, + justifyContent: "center", + paddingHorizontal: 0, + width: "100%", + paddingHorizontal: 20, + }} + styleContentCenter={{ + flex: 0, + alignItems: "flex-start", + justifyContent: "flex-start", + }} + styleRight={{ flex: 0 }} + {...props} + /> + ); +} + +export default HeaderText; diff --git a/apps/components/ModalFilter/index.js b/apps/components/ModalFilter/index.js new file mode 100644 index 0000000..95312ed --- /dev/null +++ b/apps/components/ModalFilter/index.js @@ -0,0 +1,72 @@ +import Button from '@components/Button'; +import Icon from '@components/Icon'; +import Image from '@components/Image'; +import Text from '@components/Text'; +// import { useTheme } from "@config"; +import {DarkTheme, useTheme} from '@react-navigation/native'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {useTranslation} from 'react-i18next'; +import {StyleSheet, TouchableOpacity, View} from 'react-native'; +import Modal from 'react-native-modal'; +import styles from './styles'; + +const ModalFilter = props => { + const {colors} = useTheme(); + const {t} = useTranslation(); + const cardColor = colors.card; + const {options, onApply, onSelectFilter, ...attrs} = props; + + return ( + + + + + + {options.map((item, index) => ( + onSelectFilter(item)}> + + {item.image && } + + {t(item.text)} + + + {item.checked && ( + + )} + + ))} + + + + ); +}; + +ModalFilter.defaultProps = { + options: [], + onApply: () => {}, + onSelectFilter: () => {}, +}; + +ModalFilter.propTypes = { + options: PropTypes.array, + onApply: PropTypes.func, + onSelectFilter: PropTypes.func, +}; + +export default ModalFilter; diff --git a/apps/components/ModalFilter/styles.js b/apps/components/ModalFilter/styles.js new file mode 100644 index 0000000..27e2766 --- /dev/null +++ b/apps/components/ModalFilter/styles.js @@ -0,0 +1,35 @@ +import { StyleSheet } from "react-native"; +import { BaseColor } from "@config"; + +export default StyleSheet.create({ + bottomModal: { + justifyContent: "flex-end", + margin: 0, + }, + contentFilterBottom: { + width: "100%", + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + paddingHorizontal: 20, + }, + contentSwipeDown: { + paddingTop: 10, + alignItems: "center", + }, + lineSwipeDown: { + width: 30, + height: 2.5, + backgroundColor: BaseColor.dividerColor, + }, + contentActionModalBottom: { + flexDirection: "row", + paddingVertical: 15, + justifyContent: "space-between", + }, + image: { + width: 16, + height: 16, + borderRadius: 16, + marginRight: 8, + }, +}); diff --git a/apps/components/index.js b/apps/components/index.js index 801d761..55d4f64 100644 --- a/apps/components/index.js +++ b/apps/components/index.js @@ -5,3 +5,11 @@ export {default as Icon} from './Icon'; export {default as Button} from './Button'; export {default as Text} from './Text'; export {default as ButtonMenuHome} from './ButtonMenu/ButtonMenuHome'; +export {default as CardHomePromo} from './Card/CardHomePromo'; +// Header components +export {default as Header} from './Header/Header'; + +export {default as HeaderAnimated} from './Header/Animated'; +export {default as HeaderText} from './Header/Text'; +export {default as ModalFilter} from './ModalFilter'; +export {SafeAreaView} from 'react-native-safe-area-context'; diff --git a/apps/lang/en.json b/apps/lang/en.json index 1714c77..f3a5138 100644 --- a/apps/lang/en.json +++ b/apps/lang/en.json @@ -1,4 +1,5 @@ { + "choose_project": "Choose Project", "confirm_password": "Password Confirmation", "full_name": "Full Name", "location": "Location", diff --git a/apps/lang/id.json b/apps/lang/id.json index a7a1970..aa9ee7f 100644 --- a/apps/lang/id.json +++ b/apps/lang/id.json @@ -1,4 +1,5 @@ { + "choose_project": "Pilih Projek", "confirm_password": "Konfirmasi Password", "full_name": "Nama Lengkap", "location": "Lokasi", diff --git a/apps/navigation/MainStack.js b/apps/navigation/MainStack.js index 26adf7d..6aa5725 100644 --- a/apps/navigation/MainStack.js +++ b/apps/navigation/MainStack.js @@ -20,6 +20,7 @@ import Register from '../screens/Register'; import ProfileScreen from '../screens/Profile'; import ProjectScreen from '../screens/ProjectScreen'; import CustomModal from '../screens/CustomModal'; +import Notification from '../screens/Notification'; import IconFontAwesome5 from 'react-native-vector-icons/FontAwesome5'; const Stack = createStackNavigator(); const Drawer = createDrawerNavigator(); @@ -47,9 +48,18 @@ export const WalletTabScreens = { tabBarIcon({focused, color, name: 'home'}), }, }, + ProjectScreen: { + component: ProjectScreen, + options: { + title: 'Project', + headerShown: false, + tabBarIcon: ({focused, color}) => + tabBarIcon({focused, color, name: 'city'}), + }, + }, CustomModal: { - // component: CustomModal, - component: CreateNewPlaceholder, + component: CustomModal, + // component: CreateNewPlaceholder, options: { title: 'Menu', headerShown: false, @@ -72,6 +82,16 @@ export const WalletTabScreens = { // tabBarIcon({focused, color, name: 'history'}), }, }, + NotificationScreen: { + component: Notification, + options: { + title: 'Notification', + headerShown: false, + + tabBarIcon: ({focused, color}) => + tabBarIcon({focused, color, name: 'bell'}), + }, + }, ProfileScreen: { component: ProfileScreen, options: { diff --git a/apps/navigation/components/index.js b/apps/navigation/components/index.js index 810ae65..123539b 100644 --- a/apps/navigation/components/index.js +++ b/apps/navigation/components/index.js @@ -156,14 +156,15 @@ export const BottomTabNavigatorMazi = ({tabScreens = {}}) => { animationEnabled: false, tabBarShowIcon: true, tabBarShowLabel: true, - tabBarInactiveTintColor: BaseColor.corn30, - tabBarActiveTintColor: BaseColor.corn70, + tabBarInactiveTintColor: BaseColor.corn70, + tabBarActiveTintColor: BaseColor.corn50, tabBarStyle: { //cek position: 'absolute', elevation: 0, backgroundColor: BaseColor.corn10, + // backgroundColor:BaseColor.whiteColor borderRadius: 15, height: 60, ...styles.shadow, @@ -192,16 +193,19 @@ export const BottomTabNavigatorMazi = ({tabScreens = {}}) => { key={index} name={name} component={component} - listeners={({navigation, route}) => ({ - tabPress: e => { - console.log('ini yg diklik', e), - // Prevent default action - e.preventDefault(); - - // Do something with the `navigation` object - navigation.navigate('CustomModal'); + listeners={({navigation, route}) => ( + { + tabPress: e => { + console.log('ini yg diklik', e), + // Prevent default action + e.preventDefault(); + + // Do something with the `navigation` object + navigation.navigate('CustomModal'); + }, }, - })} + console.log('navigasi custom modal', navigation) + )} options={{ tabBarIconStyle: {paddingVertical: 0, marginVertical: 0}, ...options, diff --git a/apps/screens/Home/data_dummy.json b/apps/screens/Home/data_dummy.json new file mode 100644 index 0000000..19d8ee5 --- /dev/null +++ b/apps/screens/Home/data_dummy.json @@ -0,0 +1,27 @@ +{ + "data_dummy": [ + { + "key": 1, + "project_no": 1, + "image": "require('@assets/images/home/slider-project/sudirmansuite.jpeg')", + + "project_name": " 31 Sudirman Suites", + "location": "Makassar, Indonesia" + }, + + { + "key": 2, + "project_no": 2, + "image": "require('@assets/images/home/slider-project/beachwalk.jpeg')", + "project_name": "Beachwalk Residence", + "location": "Bali, Indonesia" + }, + { + "key": 3, + "project_no": 3, + "image": "require('@assets/images/home/slider-project/antasariplace.jpeg')", + "project_name": "Antasari Place", + "location": "Jakarta, Indonesia" + } + ] +} diff --git a/apps/screens/Home/index.js b/apps/screens/Home/index.js index 6804170..93130f5 100644 --- a/apps/screens/Home/index.js +++ b/apps/screens/Home/index.js @@ -1,4 +1,11 @@ -import {View, Image, Dimensions, Animated, ScrollView} from 'react-native'; +import { + View, + Image, + Dimensions, + Animated, + ScrollView, + TouchableOpacity, +} from 'react-native'; import {Button, Text, Icon} from '@components'; import {ButtonMenuHome} from '../../components'; @@ -13,7 +20,7 @@ import ActionButton from 'react-native-action-button'; import {BaseStyle, BaseColor, Fonts, DefaultTheme, useFont} from '@config'; // import Carousel from 'react-native-reanimated-carousel'; import Carousel, {ParallaxImage, Pagination} from 'react-native-snap-carousel'; - +import {CardHomePromo} from '../../components'; const {width: screenWidth} = Dimensions.get('window'); const Home = props => { @@ -25,6 +32,7 @@ const Home = props => { console.log('user dihome', user); const carouselRef = useRef(null); const [activeSlide, setActiveSlide] = useState(0); + const [datas, setDatas] = useState([]); useEffect(() => { if (user == null) { @@ -32,16 +40,7 @@ const Home = props => { } }, [user]); - const onLogOut = () => { - setLoading(true); - dispatch( - authentication(false, response => { - setLoading(false); - }), - ); - }; - - const datas = [ + const data_dummy = [ { key: 1, project_no: 1, @@ -74,6 +73,10 @@ const Home = props => { }, ]; + useEffect(() => { + setDatas(data_dummy); + }, []); + const MENUS = { news: { id: 'news', @@ -99,7 +102,7 @@ const Home = props => { }); }; - const _renderItem = ({item, index}, parallaxProps) => { + const _renderItem = ({item, index, dataIndex}, parallaxProps) => { console.log('item render', item); console.log('index', index); return ( @@ -115,7 +118,9 @@ const Home = props => { // apparitionDelay={2} // currentIndex={0} // onSnapToItem={index => console.log(index)} - // onSnapToItem={index => setActiveSlide(index)} + // onBeforeSnapToItem={index} + // onScrollIndexChanged={index => setActiveSlide(index)} + onSnapToItem={index => setActiveSlide(index)} {...parallaxProps} /> @@ -164,9 +169,27 @@ const Home = props => { ); }; - // const _renderItem = ({item, index}) => { - // return {item.project_name}; - // }; + const _renderItem_ = ({item, index, dataIndex}, parallaxProps) => { + console.log('item render', item); + console.log('index', index); + return ( + + + {/* {index} + + {item.project_name} + */} + + ); + }; + return ( { data={datas} renderItem={_renderItem} hasParallaxImages={true} - // onSnapToItem={index => setActiveSlide(index)} - // onSnapToItem={setActiveSlide} - // removeClippedSubviews={false} - // removeClippedSubviews={true} - // useScrollView={false} - // style={{borderWidth: 1, borderColor: 'black'}} /> {/* { nameicon={'calculator'}> - My Unit - + + {/* //INI PROMO OFFERS */} + + + + Promo & Offers + + + See all + + + + + alert('ini onpress see details')} + onPress={() => alert('ini onpress promo')} + image={require('@assets/images/home/slider-project/sudirmansuite.jpeg')}> + {/* */} + + + + {/* //INI NEWS UPDATE */} + + + + News & Update + + + See all + + + + + alert('ini onpress see details')} + onPress={() => alert('ini onpress news update')} + image={require('@assets/images/home/slider-project/sudirmansuite.jpeg')}> + {/* */} + + + diff --git a/apps/screens/Notification/index.js b/apps/screens/Notification/index.js new file mode 100644 index 0000000..7fd147e --- /dev/null +++ b/apps/screens/Notification/index.js @@ -0,0 +1,6 @@ +import {Text} from '@components'; + +const Notification = props => { + return inni notif; +}; +export default Notification; diff --git a/apps/screens/Profile/index.js b/apps/screens/Profile/index.js index 472ad71..92ef913 100644 --- a/apps/screens/Profile/index.js +++ b/apps/screens/Profile/index.js @@ -1,6 +1,67 @@ -import {Text} from '@components'; +import {Text, Button, Header, Icon} from '@components'; +import {useDispatch, useSelector} from 'react-redux'; +import React, {useState, useEffect, useRef} from 'react'; +import {BaseStyle, Fonts, BaseColor} from '@config'; +import data_dummy from '../Home/data_dummy.json'; +import {View, ScrollView, Image} from 'react-native'; +import styles from './styles'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {useTranslation} from 'react-i18next'; + const Profile = props => { - return ini profile; + const [loading, setLoading] = useState(false); + const {t} = useTranslation(); + const dispatch = useDispatch(); + + const onLogOut = () => { + setLoading(true); + dispatch( + authentication(false, response => { + setLoading(false); + }), + ); + }; + + return ( + +
{ + return ( + + ); + }} + style={{height: 80}} + onPressLeft={() => { + navigation.goBack(); + }} + /> + + ini profile + + + + ); }; export default Profile; diff --git a/apps/screens/Profile/styles.js b/apps/screens/Profile/styles.js new file mode 100644 index 0000000..e69de29 diff --git a/apps/screens/ProjectScreen/index.js b/apps/screens/ProjectScreen/index.js index d5d40ed..cc0ef35 100644 --- a/apps/screens/ProjectScreen/index.js +++ b/apps/screens/ProjectScreen/index.js @@ -1,6 +1,114 @@ -import {Text} from '@components'; +import {Text, Header, Icon} from '@components'; +import data_dummy from '../Home/data_dummy.json'; +import {View, ScrollView, Image} from 'react-native'; +import styles from './styles'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {BaseStyle, Fonts, BaseColor} from '@config'; +import {useTranslation} from 'react-i18next'; + const ProjectScreen = props => { - return ini project screen; + console.log('data dummy', data_dummy); + const datas = data_dummy.data_dummy; + console.log('image', datas[0].image); + const {navigation} = props; + const {t} = useTranslation(); + return ( + +
{ + return ( + + ); + }} + style={{height: 80}} + onPressLeft={() => { + navigation.goBack(); + }} + /> + + + {datas.map((item, index) => ( + + {/* {item.image} */} + + + + + + {item.project_name} + + + {item.location} + + + + + ))} + + + + ); }; export default ProjectScreen; diff --git a/apps/screens/ProjectScreen/styles.js b/apps/screens/ProjectScreen/styles.js new file mode 100644 index 0000000..c15d5a5 --- /dev/null +++ b/apps/screens/ProjectScreen/styles.js @@ -0,0 +1,71 @@ +import {StyleSheet, Dimensions} from 'react-native'; +import {BaseColor, Fonts} from '@config'; +const {width: screenWidth} = Dimensions.get('window'); +export default StyleSheet.create({ + textInput: { + height: 46, + backgroundColor: BaseColor.fieldColor, + borderRadius: 5, + // marginTop: 10, + padding: 10, + width: '100%', + }, + forgotPassword: { + fontFamily: Fonts.type.Lato, + width: '30%', + borderBottomColor: BaseColor.corn70, + borderBottomWidth: 1, + textAlign: 'center', + }, + contain: { + padding: 20, + paddingTop: 0, + flex: 1, + justifyContent: 'center', // ini untuk center tengah dari atas ke bawah + }, + contentActionBottom: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + textTitle: { + color: '#dadada', + // fontSize: Fonts.moderateScale(20), + alignSelf: 'center', + marginBottom: 450, + fontFamily: Fonts.type.Lato, + }, + text: { + color: '#ffffff', + }, + inner: { + padding: 24, + flex: 1, + justifyContent: 'space-around', + }, + mainContent: { + flex: 1, + alignItems: 'center', + // justifyContent: 'space-around', + // justifyContent: 'space-evenly', + + justifyContent: 'center', + }, + item: { + // width: screenWidth - 50, + // height: screenWidth - 70, + width: screenWidth - 80, + height: screenWidth - 80, + }, + imageContainer: { + flex: 1, + marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue + backgroundColor: 'white', + borderRadius: 25, + }, + image: { + ...StyleSheet.absoluteFillObject, + resizeMode: 'contain', + // width: screenWidth - 50, + // height: screenWidth - 70, + }, +}); diff --git a/package.json b/package.json index 504ca2d..e84cba1 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react-native-dotenv": "^3.4.9", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "^2.12.1", + "react-native-modal": "^13.0.1", "react-native-raw-bottom-sheet": "^2.2.0", "react-native-reanimated": "^3.4.2", "react-native-reanimated-carousel": "^3.5.1", diff --git a/yarn.lock b/yarn.lock index 9fa2f19..3520280 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5716,7 +5716,7 @@ prompts@^2.0.1, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@*, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@*, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -5818,6 +5818,13 @@ react-native-action-button@^2.8.5: dependencies: prop-types "^15.5.10" +react-native-animatable@1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a" + integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w== + dependencies: + prop-types "^15.7.2" + react-native-app-intro-slider@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/react-native-app-intro-slider/-/react-native-app-intro-slider-4.0.4.tgz#fa5cda7057db62c448ac975ffd2ba0cff94cc8d8" @@ -5859,6 +5866,14 @@ react-native-gesture-handler@^2.12.1: lodash "^4.17.21" prop-types "^15.7.2" +react-native-modal@^13.0.1: + version "13.0.1" + resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.1.tgz#691f1e646abb96fa82c1788bf18a16d585da37cd" + integrity sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw== + dependencies: + prop-types "^15.6.2" + react-native-animatable "1.3.3" + react-native-raw-bottom-sheet@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/react-native-raw-bottom-sheet/-/react-native-raw-bottom-sheet-2.2.0.tgz#d11dabb86aadb014273767ef7b554924b13633c5"