add - layout web
This commit is contained in:
Victor
@@ -9,6 +9,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
|
||||
import { useFonts } from "expo-font";
|
||||
import * as SplashScreen from "expo-splash-screen";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { Platform } from "react-native";
|
||||
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
|
||||
import moment from "moment";
|
||||
import "moment/locale/fr";
|
||||
@@ -119,7 +120,7 @@ const App = () => {
|
||||
|
||||
<GestureHandlerRootView
|
||||
onLayout={onLayoutRootView}
|
||||
style={[{ flex: 1, backgroundColor: Palette.darkPurple }]}
|
||||
style={[{ flex: 1, backgroundColor: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple }]}
|
||||
>
|
||||
<PortalProvider>
|
||||
<Providers>
|
||||
@@ -130,7 +131,7 @@ const App = () => {
|
||||
...DefaultTheme,
|
||||
colors: {
|
||||
...DefaultTheme.colors,
|
||||
background: Palette.darkPurple,
|
||||
background: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple,
|
||||
},
|
||||
}}
|
||||
ref={navigationRef}
|
||||
|
||||
+45
-4
@@ -1,7 +1,48 @@
|
||||
import "@expo/metro-runtime";
|
||||
import { registerRootComponent } from "expo";
|
||||
import "./src/styles/css/global.css";
|
||||
import '@expo/metro-runtime';
|
||||
import { registerRootComponent } from 'expo';
|
||||
|
||||
import App from "./App";
|
||||
// Inject minimal global CSS and a small setNativeProps polyfill for web
|
||||
if (typeof document !== 'undefined') {
|
||||
const style = document.createElement('style');
|
||||
style.setAttribute('data-inline-global', 'true');
|
||||
style.innerHTML = `
|
||||
html, body, #root { height: 100%; }
|
||||
body { margin: 0; }
|
||||
*:focus { outline: none; }
|
||||
* { scrollbar-width: none; -ms-overflow-style: none; }
|
||||
*::-webkit-scrollbar { display: none; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
const proto = window.HTMLElement && window.HTMLElement.prototype;
|
||||
if (proto && typeof proto.setNativeProps !== 'function') {
|
||||
proto.setNativeProps = function (nativeProps = {}) {
|
||||
try {
|
||||
const { style: s, pointerEvents, ...rest } = nativeProps || {};
|
||||
if (pointerEvents != null) {
|
||||
this.style.pointerEvents = pointerEvents;
|
||||
}
|
||||
if (s && typeof s === 'object') {
|
||||
for (const k in s) {
|
||||
if (Object.prototype.hasOwnProperty.call(s, k)) {
|
||||
try {
|
||||
this.style[k] = s[k];
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const k in rest) {
|
||||
if (Object.prototype.hasOwnProperty.call(rest, k)) {
|
||||
try {
|
||||
this.style[k] = rest[k];
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
import App from './App';
|
||||
|
||||
registerRootComponent(App);
|
||||
|
||||
@@ -67,7 +67,6 @@
|
||||
"react-native": "0.76.9",
|
||||
"react-native-actions-sheet": "~0.9.7",
|
||||
"react-native-compressor": "~1.12.0",
|
||||
"react-native-country-picker-modal": "~2.0.0",
|
||||
"react-native-dialog": "~9.3.0",
|
||||
"react-native-figma-squircle": "~0.3.4",
|
||||
"react-native-gesture-handler": "~2.20.2",
|
||||
|
||||
+70
-78
@@ -7,23 +7,23 @@ import {
|
||||
Image,
|
||||
Keyboard,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { useState } from "react";
|
||||
import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
|
||||
import usePlaceApi from "react-native-minuit/src/hooks/usePlacesApi";
|
||||
} from 'react-native';
|
||||
import { useState } from 'react';
|
||||
// import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
|
||||
import usePlaceApi from 'react-native-minuit/src/hooks/usePlacesApi';
|
||||
|
||||
import { art, icons } from "../assets";
|
||||
import { Fonts, Palette, Style, gutters } from "../styles";
|
||||
import { FONT_FAMILY, fontTypeList } from "../styles/Fonts";
|
||||
import { art, icons } from '../assets';
|
||||
import { Fonts, Palette, Style, gutters } from '../styles';
|
||||
import { FONT_FAMILY, fontTypeList } from '../styles/Fonts';
|
||||
|
||||
import { isWeb } from "../hooks/useLayoutType";
|
||||
import { GOOGLE_API_KEY } from "../data/keys";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { isWeb } from '../hooks/useLayoutType';
|
||||
import { GOOGLE_API_KEY } from '../data/keys';
|
||||
import { BlurView } from 'expo-blur';
|
||||
|
||||
const Input = ({
|
||||
inputRef = null,
|
||||
label = "",
|
||||
placeholder = "",
|
||||
label = '',
|
||||
placeholder = '',
|
||||
|
||||
containerStyle = {},
|
||||
textInputStyle = {},
|
||||
@@ -33,12 +33,12 @@ const Input = ({
|
||||
|
||||
textInputProps = {},
|
||||
|
||||
type = "default", // "default" | "password" | "textarea" | "coinAmount" | "countryPicker" | "autoCompleteAddress"
|
||||
theme = "default", // "default" | "radioactiv" | "dashed"
|
||||
type = 'default', // "default" | "password" | "textarea" | "coinAmount" | "countryPicker" | "autoCompleteAddress"
|
||||
theme = 'default', // "default" | "radioactiv" | "dashed"
|
||||
|
||||
borderType = "none", // "solid" | "dashed" | "none"
|
||||
borderType = 'none', // "solid" | "dashed" | "none"
|
||||
|
||||
layout = "default", // "default" | "line"
|
||||
layout = 'default', // "default" | "line"
|
||||
|
||||
isNumeric = false,
|
||||
isBlur = false,
|
||||
@@ -47,22 +47,22 @@ const Input = ({
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showCountryPicker, setShowCountryPicker] = useState(false);
|
||||
|
||||
const isDefaultLayout = layout === "default";
|
||||
const isDefaultLayout = layout === 'default';
|
||||
|
||||
const mainColor =
|
||||
theme === "radioactiv" ? Palette.radioactivGreen : Palette.primary;
|
||||
theme === 'radioactiv' ? Palette.radioactivGreen : Palette.primary;
|
||||
|
||||
const isRoundedRectangle =
|
||||
["textarea", "coinAmount"].includes(type) || layout === "default";
|
||||
['textarea', 'coinAmount'].includes(type) || layout === 'default';
|
||||
|
||||
const inputAccessoryViewID = "uniqueID";
|
||||
const inputAccessoryViewID = 'uniqueID';
|
||||
|
||||
const { places } = usePlaceApi({
|
||||
query: type === "autoCompleteAddress" ? value : "",
|
||||
query: type === 'autoCompleteAddress' ? value : '',
|
||||
apiKey: GOOGLE_API_KEY, // Your Google API Key
|
||||
queryFields: "formatted_address,geometry,name,address_components",
|
||||
queryCountries: ["fr"],
|
||||
language: "fr-FR",
|
||||
queryFields: 'formatted_address,geometry,name,address_components',
|
||||
queryCountries: ['fr'],
|
||||
language: 'fr-FR',
|
||||
minChars: 2,
|
||||
});
|
||||
|
||||
@@ -72,25 +72,23 @@ const Input = ({
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
...containerStyle,
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{label?.length > 0 && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<ContainerView
|
||||
tint="dark"
|
||||
tint='dark'
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
// }
|
||||
@@ -103,11 +101,11 @@ const Input = ({
|
||||
? {
|
||||
paddingVertical: 10,
|
||||
backgroundColor:
|
||||
type === "coinAmount"
|
||||
type === 'coinAmount'
|
||||
? Palette.transparentRadioactivGreen
|
||||
: Palette.glass,
|
||||
height: type === "textarea" ? 150 : 50,
|
||||
overflow: "hidden",
|
||||
height: type === 'textarea' ? 150 : 50,
|
||||
overflow: 'hidden',
|
||||
borderRadius: 12,
|
||||
}
|
||||
: {}),
|
||||
@@ -117,27 +115,25 @@ const Input = ({
|
||||
borderBottomColor: mainColor,
|
||||
borderBottomWidth: 1,
|
||||
}),
|
||||
...(borderType === "dashed"
|
||||
...(borderType === 'dashed'
|
||||
? {
|
||||
borderStyle: "dashed",
|
||||
borderStyle: 'dashed',
|
||||
borderColor: isFocused
|
||||
? Palette.primary
|
||||
: Palette.transparentPrimary,
|
||||
borderWidth: 1,
|
||||
}
|
||||
: {}),
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{type === "search" ? (
|
||||
width: '100%',
|
||||
}}>
|
||||
{type === 'search' ? (
|
||||
<Image
|
||||
source={icons.search}
|
||||
style={[Style.iconDefault, { marginRight: 10 }]}
|
||||
resizeMode="contain"
|
||||
resizeMode='contain'
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{type === "countryPicker" ? (
|
||||
{/* {type === "countryPicker" ? (
|
||||
<CountryPicker
|
||||
countryCode={value}
|
||||
onSelect={(country) => {
|
||||
@@ -169,77 +165,77 @@ const Input = ({
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
) : */}
|
||||
(
|
||||
<TextInput
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={Palette.gray}
|
||||
value={value}
|
||||
onChangeText={setValue}
|
||||
multiline={type === "textarea"}
|
||||
editable={type !== "countryPicker"}
|
||||
multiline={type === 'textarea'}
|
||||
editable={type !== 'countryPicker'}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
style={{
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
...(isRoundedRectangle
|
||||
? {
|
||||
height: "100%",
|
||||
height: '100%',
|
||||
flex: 1,
|
||||
textAlignVertical: type === "textarea" ? "top" : "center",
|
||||
textAlignVertical: type === 'textarea' ? 'top' : 'center',
|
||||
}
|
||||
: { textAlign: "center" }),
|
||||
: { textAlign: 'center' }),
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
...(isWeb
|
||||
? {
|
||||
lineHeight: "auto",
|
||||
lineHeight: 'auto',
|
||||
}
|
||||
: {}),
|
||||
...textInputStyle,
|
||||
}}
|
||||
{...(type === "password"
|
||||
{...(type === 'password'
|
||||
? {
|
||||
secureTextEntry: !showPassword,
|
||||
autoCapitalize: "none",
|
||||
autoCompleteType: "password",
|
||||
textContentType: "password",
|
||||
autoCapitalize: 'none',
|
||||
autoCompleteType: 'password',
|
||||
textContentType: 'password',
|
||||
}
|
||||
: {})}
|
||||
{...(type === "email"
|
||||
{...(type === 'email'
|
||||
? {
|
||||
keyboardType: "email-address",
|
||||
autoCapitalize: "none",
|
||||
autoCompleteType: "email",
|
||||
textContentType: "emailAddress",
|
||||
keyboardType: 'email-address',
|
||||
autoCapitalize: 'none',
|
||||
autoCompleteType: 'email',
|
||||
textContentType: 'emailAddress',
|
||||
}
|
||||
: {})}
|
||||
keyboardType={isNumeric ? "numeric" : "default"}
|
||||
keyboardAppearance="dark"
|
||||
keyboardType={isNumeric ? 'numeric' : 'default'}
|
||||
keyboardAppearance='dark'
|
||||
inputAccessoryViewID={inputAccessoryViewID}
|
||||
{...textInputProps}
|
||||
/>
|
||||
)}
|
||||
|
||||
{type === "password" ? (
|
||||
{type === 'password' ? (
|
||||
<Pressable onPress={() => setShowPassword(!showPassword)}>
|
||||
<Image
|
||||
source={icons.eye}
|
||||
style={[Style.iconDefault]}
|
||||
resizeMode="contain"
|
||||
resizeMode='contain'
|
||||
/>
|
||||
</Pressable>
|
||||
) : type === "coinAmount" ? (
|
||||
) : type === 'coinAmount' ? (
|
||||
<Image
|
||||
source={art.coin}
|
||||
style={[Style.iconDefault]}
|
||||
resizeMode="contain"
|
||||
resizeMode='contain'
|
||||
/>
|
||||
) : null}
|
||||
</ContainerView>
|
||||
|
||||
{type === "autoCompleteAddress" &&
|
||||
{type === 'autoCompleteAddress' &&
|
||||
places?.[0]?.description &&
|
||||
places?.[0]?.description !== value &&
|
||||
places.map((place, index) => (
|
||||
@@ -251,36 +247,32 @@ const Input = ({
|
||||
style={{
|
||||
...Style.containerSpaceBetween,
|
||||
marginBottom: index !== places.length - 1 ? gutters / 2 : 0,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({}),
|
||||
}}
|
||||
>
|
||||
{place?.description || "-"}
|
||||
}}>
|
||||
{place?.description || '-'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{(type === "textarea" || isNumeric) && !isWeb && (
|
||||
{(type === 'textarea' || isNumeric) && !isWeb && (
|
||||
<InputAccessoryView nativeID={inputAccessoryViewID}>
|
||||
<Pressable
|
||||
onPress={() => Keyboard.dismiss()}
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
justifyContent: "flex-end",
|
||||
justifyContent: 'flex-end',
|
||||
backgroundColor: Palette.transparentPrimary,
|
||||
padding: gutters,
|
||||
paddingVertical: gutters / 2,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({ color: Palette.primary }),
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Fermer
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { Palette } from "../styles";
|
||||
import { Palette } from '../styles';
|
||||
|
||||
export default {
|
||||
currentUID: null,
|
||||
currentUserData: null,
|
||||
currentUserRoles: [],
|
||||
|
||||
webBackgroundImg: null,
|
||||
|
||||
_config: {
|
||||
colors: {
|
||||
primary: Palette.primary,
|
||||
|
||||
+53
-19
@@ -1,41 +1,75 @@
|
||||
import { View } from "react-native";
|
||||
import { Motion } from "@legendapp/motion";
|
||||
import { View, Image } from 'react-native';
|
||||
import { useGlobal } from 'reactn';
|
||||
import { Motion } from '@legendapp/motion';
|
||||
|
||||
import useLayoutType from "../hooks/useLayoutType";
|
||||
import useLayoutType from '../hooks/useLayoutType';
|
||||
|
||||
import Home from "../screens/Home";
|
||||
import Home from '../screens/Home';
|
||||
|
||||
import { Style } from "../styles";
|
||||
import { Palette, Style } from '../styles';
|
||||
import { background as backgrounds } from '../assets';
|
||||
|
||||
export default ({ currentUID = null, children }) => {
|
||||
const { isWeb = false } = useLayoutType();
|
||||
|
||||
const sharedPanelStyle = {
|
||||
...(isWeb ? {} : {}),
|
||||
};
|
||||
|
||||
const mainContainer = {
|
||||
flex: 1,
|
||||
...(isWeb ? { maxHeight: "100svh" } : {}),
|
||||
};
|
||||
// Web: full-screen background with a centered content area (30% width)
|
||||
const [webBackgroundImg] = useGlobal('webBackgroundImg');
|
||||
|
||||
if (isWeb) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
...mainContainer,
|
||||
flexDirection: "row-reverse",
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minHeight: '100svh',
|
||||
position: 'relative',
|
||||
}}>
|
||||
{/* Full-viewport background for web */}
|
||||
<Image
|
||||
source={webBackgroundImg || backgrounds.homeBG}
|
||||
resizeMode='cover'
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
/>
|
||||
|
||||
{/* Centered content column (phone-like width) */}
|
||||
<View
|
||||
style={{
|
||||
width: '30%',
|
||||
minWidth: 360,
|
||||
maxWidth: 520,
|
||||
height: '100svh',
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<View style={{ flex: 1 }}>{children}</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// Native / non-web: original layout
|
||||
const sharedPanelStyle = {};
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row-reverse',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
flex: 2,
|
||||
position: "relative",
|
||||
position: 'relative',
|
||||
...Style.defaultBorder,
|
||||
borderTopWidth: 0,
|
||||
borderBottomWidth: 0,
|
||||
...sharedPanelStyle,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
+38
-28
@@ -1,20 +1,21 @@
|
||||
/* eslint-disable react/display-name */
|
||||
import React, { useState } from "reactn";
|
||||
import { Image, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { Motion } from "@legendapp/motion";
|
||||
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
|
||||
import React, { useState, useEffect } from 'reactn';
|
||||
import { setGlobal } from 'reactn';
|
||||
import { Image, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Motion } from '@legendapp/motion';
|
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
|
||||
|
||||
import { responsiveHeight } from "../actions/responsiveSizes.js";
|
||||
import { responsiveHeight } from '../actions/responsiveSizes.js';
|
||||
|
||||
import { Fonts, gutters } from "../styles";
|
||||
import { Fonts, gutters } from '../styles';
|
||||
|
||||
import BaseHeader from "../components/BaseHeader";
|
||||
import NavigateHeader from "../components/NavigateHeader";
|
||||
import BaseHeader from '../components/BaseHeader';
|
||||
import NavigateHeader from '../components/NavigateHeader';
|
||||
|
||||
import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
|
||||
import { useUserData } from "../providers/UserDataProvider.js";
|
||||
import { background } from "../assets/index.js";
|
||||
import { isDesktop, isWeb } from '../hooks/useLayoutType.js';
|
||||
import { useUserData } from '../providers/UserDataProvider.js';
|
||||
import { background } from '../assets/index.js';
|
||||
|
||||
export default ({
|
||||
children,
|
||||
@@ -22,11 +23,11 @@ export default ({
|
||||
topStickyContent = null,
|
||||
bottomStickyContent = null,
|
||||
|
||||
title = "",
|
||||
title = '',
|
||||
rightComponent = null,
|
||||
|
||||
containerType = "SAFE_AREA_VIEW",
|
||||
headerType = "BASE",
|
||||
containerType = 'SAFE_AREA_VIEW',
|
||||
headerType = 'BASE',
|
||||
|
||||
containerStyle = {},
|
||||
headerStyle = {},
|
||||
@@ -44,7 +45,7 @@ export default ({
|
||||
const [scrollPosition, setScrollPosition] = useState(0);
|
||||
|
||||
const PageContainer =
|
||||
containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
|
||||
containerType === 'SAFE_AREA_VIEW' ? SafeAreaView : View;
|
||||
|
||||
const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
|
||||
|
||||
@@ -53,28 +54,38 @@ export default ({
|
||||
setScrollPosition(position);
|
||||
};
|
||||
|
||||
// On web, push the background image to a global so AppLayout can render
|
||||
// a full-screen background behind the phone frame. We avoid rendering
|
||||
// the per-screen background inside the phone on web to prevent duplication.
|
||||
useEffect(() => {
|
||||
if (isWeb && backgroundImg) {
|
||||
setGlobal({ webBackgroundImg: backgroundImg });
|
||||
}
|
||||
}, [isWeb, backgroundImg]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isWeb && (
|
||||
<Image
|
||||
source={backgroundImg}
|
||||
style={{ width: "100%", height: "100%", position: "absolute" }}
|
||||
style={{ width: '100%', height: '100%', position: 'absolute' }}
|
||||
/>
|
||||
)}
|
||||
<PageContainer
|
||||
{...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
|
||||
{...(containerType === 'SAFE_AREA_VIEW' ? { edges: ['top'] } : {})}
|
||||
style={{
|
||||
height: "100%",
|
||||
height: '100%',
|
||||
paddingTop: isWeb ? gutters / 2 : 0,
|
||||
padding: gutters,
|
||||
paddingBottom: 0,
|
||||
...(isWeb ? { maxHeight: "100vh" } : {}),
|
||||
...(isWeb ? { maxHeight: '100vh', width: '100%' } : {}),
|
||||
...(!currentUID && isDesktop
|
||||
? { maxWidth: 500, alignSelf: "center" }
|
||||
? { maxWidth: 500, alignSelf: 'center' }
|
||||
: {}),
|
||||
...containerStyle,
|
||||
}}
|
||||
>
|
||||
{headerType !== "NONE" ? (
|
||||
headerType === "BASE" ? (
|
||||
}}>
|
||||
{headerType !== 'NONE' ? (
|
||||
headerType === 'BASE' ? (
|
||||
<BaseHeader containerStyle={{ ...headerStyle }} />
|
||||
) : (
|
||||
<NavigateHeader
|
||||
@@ -98,10 +109,9 @@ export default ({
|
||||
scrollEventThrottle: 80,
|
||||
showsVerticalScrollIndicator: false,
|
||||
contentContainerStyle: { paddingBottom: responsiveHeight(55) },
|
||||
keyboardDismissMode: "on-drag",
|
||||
keyboardDismissMode: 'on-drag',
|
||||
}
|
||||
: {})}
|
||||
>
|
||||
: {})}>
|
||||
{children}
|
||||
</ContentContainer>
|
||||
</PageContainer>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { Platform } from "react-native";
|
||||
import { createStackNavigator } from "@react-navigation/stack";
|
||||
|
||||
import { Palette } from "../styles";
|
||||
@@ -6,6 +7,8 @@ import { Routes } from "./Routes";
|
||||
|
||||
import Chat from "../screens/Chat";
|
||||
|
||||
const isWeb = Platform.OS === "web";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
cardOverlayEnabled: true,
|
||||
@@ -14,6 +17,12 @@ const screenOptions = {
|
||||
},
|
||||
headerTitleAlign: "center",
|
||||
headerBackTitleVisible: false,
|
||||
...(isWeb
|
||||
? {
|
||||
animationEnabled: false,
|
||||
gestureEnabled: false,
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { Platform } from "react-native";
|
||||
import { createStackNavigator } from "@react-navigation/stack";
|
||||
|
||||
import { Palette } from "../styles";
|
||||
@@ -7,6 +8,8 @@ import { Routes } from "./Routes";
|
||||
import Home from "../screens/Home";
|
||||
import CreateSongs from "../screens/CreateSongs";
|
||||
|
||||
const isWeb = Platform.OS === "web";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
cardOverlayEnabled: true,
|
||||
@@ -15,6 +18,12 @@ const screenOptions = {
|
||||
},
|
||||
headerTitleAlign: "center",
|
||||
headerBackTitleVisible: false,
|
||||
...(isWeb
|
||||
? {
|
||||
animationEnabled: false,
|
||||
gestureEnabled: false,
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { Platform } from "react-native";
|
||||
import { createStackNavigator } from "@react-navigation/stack";
|
||||
import { Palette } from "../styles";
|
||||
import { Routes } from "./Routes";
|
||||
@@ -59,6 +60,8 @@ import CreatePseudo from "../screens/CreatePseudo";
|
||||
import { ChooseCoverType } from "../screens/cover/ChooseCoverType";
|
||||
import ValidateCover from "../screens/cover/ValidateCover";
|
||||
|
||||
const isWeb = Platform.OS === "web";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
cardOverlayEnabled: true,
|
||||
@@ -68,6 +71,13 @@ const screenOptions = {
|
||||
headerTitleStyle: {},
|
||||
headerTitleAlign: "center",
|
||||
headerBackTitleVisible: false,
|
||||
...(isWeb
|
||||
? {
|
||||
// Avoid web-specific pointerEvents issues by disabling animations/gestures
|
||||
animationEnabled: false,
|
||||
gestureEnabled: false,
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
const MainStack = createStackNavigator();
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { Platform } from "react-native";
|
||||
import { createStackNavigator } from "@react-navigation/stack";
|
||||
|
||||
import { Palette } from "../styles";
|
||||
@@ -8,6 +9,8 @@ import ProjectSettings from "../screens/ProjectSettings";
|
||||
import AccountSettings from "../screens/AccountSettings";
|
||||
import Settings from "../screens/Profile/Settings";
|
||||
|
||||
const isWeb = Platform.OS === "web";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
cardOverlayEnabled: true,
|
||||
@@ -16,6 +19,12 @@ const screenOptions = {
|
||||
},
|
||||
headerTitleAlign: "center",
|
||||
headerBackTitleVisible: false,
|
||||
...(isWeb
|
||||
? {
|
||||
animationEnabled: false,
|
||||
gestureEnabled: false,
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { Platform } from "react-native";
|
||||
import { createStackNavigator } from "@react-navigation/stack";
|
||||
|
||||
import { Palette } from "../styles";
|
||||
@@ -6,6 +7,8 @@ import { Routes } from "./Routes";
|
||||
|
||||
import Tasks from "../screens/Tasks";
|
||||
|
||||
const isWeb = Platform.OS === "web";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
cardOverlayEnabled: true,
|
||||
@@ -14,6 +17,12 @@ const screenOptions = {
|
||||
},
|
||||
headerTitleAlign: "center",
|
||||
headerBackTitleVisible: false,
|
||||
...(isWeb
|
||||
? {
|
||||
animationEnabled: false,
|
||||
gestureEnabled: false,
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
@@ -984,15 +984,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@borewit/text-codec/-/text-codec-0.1.1.tgz#7e7f27092473d5eabcffef693a849f2cc48431da"
|
||||
integrity sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==
|
||||
|
||||
"@callstack/react-theme-provider@3.0.3":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7"
|
||||
integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA==
|
||||
dependencies:
|
||||
"@types/hoist-non-react-statics" "^3.3.1"
|
||||
deepmerge "^3.2.0"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
|
||||
"@egjs/hammerjs@^2.0.17":
|
||||
version "2.0.17"
|
||||
resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
|
||||
@@ -4194,11 +4185,6 @@ deep-is@^0.1.3:
|
||||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
|
||||
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
|
||||
|
||||
deepmerge@^3.2.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
|
||||
integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
|
||||
|
||||
deepmerge@^4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
|
||||
@@ -5800,11 +5786,6 @@ functions-have-names@^1.2.3:
|
||||
resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
|
||||
integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
|
||||
|
||||
fuse.js@3.4.5:
|
||||
version "3.4.5"
|
||||
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.5.tgz#8954fb43f9729bd5dbcb8c08f251db552595a7a6"
|
||||
integrity sha512-s9PGTaQIkT69HaeoTVjwGsLfb8V8ScJLx5XGFcKHg0MqLUH/UZ4EKOtqtXX9k7AFqCGxD1aJmYb8Q5VYDibVRQ==
|
||||
|
||||
gensync@^1.0.0-beta.2:
|
||||
version "1.0.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
|
||||
@@ -7230,11 +7211,6 @@ lodash.throttle@^4.1.1:
|
||||
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
|
||||
|
||||
lodash.toarray@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
|
||||
integrity sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==
|
||||
|
||||
lodash@^4.17.15, lodash@^4.17.21, lodash@~4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
@@ -7755,13 +7731,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
|
||||
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
|
||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
||||
|
||||
modal-react-native-web@0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/modal-react-native-web/-/modal-react-native-web-0.2.0.tgz#5daaa76213218fd25df739a267b11aed37e8c0c2"
|
||||
integrity sha512-sC0/jL3ZL4bGtv1VS43TnrH7/FHUqgb7IU3VYWNDzuR223fYlpG5Gc974GsTP172Vi+lnnBL/G70xONmaggxeQ==
|
||||
dependencies:
|
||||
warning "^4.0.1"
|
||||
|
||||
moment-range@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/moment-range/-/moment-range-4.0.2.tgz#f7c3863df2a1ed7fd1822ba5a7bcf53a78701be9"
|
||||
@@ -7850,13 +7819,6 @@ node-dir@^0.1.17:
|
||||
dependencies:
|
||||
minimatch "^3.0.2"
|
||||
|
||||
node-emoji@1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
|
||||
integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
|
||||
dependencies:
|
||||
lodash.toarray "^4.4.0"
|
||||
|
||||
node-fetch@2.6.7:
|
||||
version "2.6.7"
|
||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
|
||||
@@ -8546,15 +8508,6 @@ prompts@^2.3.2:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
dependencies:
|
||||
loose-envify "^1.4.0"
|
||||
object-assign "^4.1.1"
|
||||
react-is "^16.8.1"
|
||||
|
||||
prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.6.0, 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"
|
||||
@@ -8675,11 +8628,6 @@ rc@~1.2.7:
|
||||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
react-async-hook@3.6.1:
|
||||
version "3.6.1"
|
||||
resolved "https://registry.yarnpkg.com/react-async-hook/-/react-async-hook-3.6.1.tgz#aed3e492d87319392865c83ed7cef3609e2a7fef"
|
||||
integrity sha512-YWBB2feVQF79t5u2raMPHlZ8975Jds+guCvkWVC4kRLDlSCouLsYpQm4DGSqPeHvoHYVVcDfqNayLZAXQmnxnw==
|
||||
|
||||
react-devtools-core@^5.3.1:
|
||||
version "5.3.2"
|
||||
resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.3.2.tgz#d5df92f8ef2a587986d094ef2c47d84cf4ae46ec"
|
||||
@@ -8706,7 +8654,7 @@ react-freeze@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.4.tgz#cbbea2762b0368b05cbe407ddc9d518c57c6f3ad"
|
||||
integrity sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==
|
||||
|
||||
react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
|
||||
react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
@@ -8742,18 +8690,6 @@ react-native-compressor@~1.12.0:
|
||||
resolved "https://registry.yarnpkg.com/react-native-compressor/-/react-native-compressor-1.12.0.tgz#4c387f100ec6d98adbee10c22496d0e42397d8bf"
|
||||
integrity sha512-NMAYpXnTLwx/KecwlLF+9Dnrn/tKV5UVfta8Lk9eROsb05JYnUoKLprRzSSpHcyLjIdQAVaTtx2lPYsappMezw==
|
||||
|
||||
react-native-country-picker-modal@~2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-country-picker-modal/-/react-native-country-picker-modal-2.0.0.tgz#005421303349a81fedf5975e465405bb4b7312d5"
|
||||
integrity sha512-p0wfkKx1mOCEkn3Qm2/FA8TrxSdUw/nqaCcT6KYvIGmPtPdia1Ce+iWh5G0j2hZcDs6yJSkYAx+7lrZ0HwixAw==
|
||||
dependencies:
|
||||
"@callstack/react-theme-provider" "3.0.3"
|
||||
fuse.js "3.4.5"
|
||||
modal-react-native-web "0.2.0"
|
||||
node-emoji "1.10.0"
|
||||
prop-types "15.7.2"
|
||||
react-async-hook "3.6.1"
|
||||
|
||||
react-native-dialog@~9.3.0:
|
||||
version "9.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-dialog/-/react-native-dialog-9.3.0.tgz#9d745cc51653a1e2ae08076b46f11d99723c47f6"
|
||||
@@ -10611,13 +10547,6 @@ warn-once@0.1.1, warn-once@^0.1.0:
|
||||
resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
|
||||
integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
|
||||
|
||||
warning@^4.0.1:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
|
||||
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
wcwidth@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
|
||||
|
||||
Reference in New Issue
Block a user