feat(mobile/navigation): revert to stack navigator (#11811)
* feat(mobile/navigation): replaced native stack with stack navigator and other ui fixes
This commit is contained in:
parent
e9cfa78aaf
commit
0d50f1867d
|
@ -49,7 +49,7 @@
|
||||||
"@react-navigation/elements": "1.2.1",
|
"@react-navigation/elements": "1.2.1",
|
||||||
"@react-navigation/material-top-tabs": "6.0.6",
|
"@react-navigation/material-top-tabs": "6.0.6",
|
||||||
"@react-navigation/native": "6.0.6",
|
"@react-navigation/native": "6.0.6",
|
||||||
"@react-navigation/native-stack": "6.6.2",
|
"@react-navigation/stack": "6.2.2",
|
||||||
"@svgr/webpack": "4.3.2",
|
"@svgr/webpack": "4.3.2",
|
||||||
"@tensorflow/tfjs-backend-wasm": "3.13.0",
|
"@tensorflow/tfjs-backend-wasm": "3.13.0",
|
||||||
"@tensorflow/tfjs-core": "3.13.0",
|
"@tensorflow/tfjs-core": "3.13.0",
|
||||||
|
@ -5026,33 +5026,6 @@
|
||||||
"react-native": "*"
|
"react-native": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@react-navigation/native-stack": {
|
|
||||||
"version": "6.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz",
|
|
||||||
"integrity": "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==",
|
|
||||||
"dependencies": {
|
|
||||||
"@react-navigation/elements": "^1.3.3",
|
|
||||||
"warn-once": "^0.1.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@react-navigation/native": "^6.0.0",
|
|
||||||
"react": "*",
|
|
||||||
"react-native": "*",
|
|
||||||
"react-native-safe-area-context": ">= 3.0.0",
|
|
||||||
"react-native-screens": ">= 3.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@react-navigation/native-stack/node_modules/@react-navigation/elements": {
|
|
||||||
"version": "1.3.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.3.tgz",
|
|
||||||
"integrity": "sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw==",
|
|
||||||
"peerDependencies": {
|
|
||||||
"@react-navigation/native": "^6.0.0",
|
|
||||||
"react": "*",
|
|
||||||
"react-native": "*",
|
|
||||||
"react-native-safe-area-context": ">= 3.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@react-navigation/routers": {
|
"node_modules/@react-navigation/routers": {
|
||||||
"version": "6.1.0",
|
"version": "6.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
|
||||||
|
@ -5061,6 +5034,63 @@
|
||||||
"nanoid": "^3.1.23"
|
"nanoid": "^3.1.23"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-navigation/stack": {
|
||||||
|
"version": "6.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.2.2.tgz",
|
||||||
|
"integrity": "sha512-P9ZfmluOXNmbs7YdG1UWS1fAh87Yse9aX8TgqOz4FlHEm5q7g5eaM35QgWByt+wif3UiqE40D8wXpqRQvMgPWg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-navigation/elements": "^1.3.4",
|
||||||
|
"color": "^4.2.3",
|
||||||
|
"warn-once": "^0.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@react-navigation/native": "^6.0.0",
|
||||||
|
"react": "*",
|
||||||
|
"react-native": "*",
|
||||||
|
"react-native-gesture-handler": ">= 1.0.0",
|
||||||
|
"react-native-safe-area-context": ">= 3.0.0",
|
||||||
|
"react-native-screens": ">= 3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-navigation/stack/node_modules/@react-navigation/elements": {
|
||||||
|
"version": "1.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.4.tgz",
|
||||||
|
"integrity": "sha512-O0jICpjn3jskVo4yiWzZozmj7DZy1ZBbn3O7dbenuUjZSj/cscjwaapmZZFGcI/IMmjmx8UTKsybhCFEIbGf3g==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@react-navigation/native": "^6.0.0",
|
||||||
|
"react": "*",
|
||||||
|
"react-native": "*",
|
||||||
|
"react-native-safe-area-context": ">= 3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-navigation/stack/node_modules/color": {
|
||||||
|
"version": "4.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||||
|
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
|
||||||
|
"dependencies": {
|
||||||
|
"color-convert": "^2.0.1",
|
||||||
|
"color-string": "^1.9.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-navigation/stack/node_modules/color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-navigation/stack/node_modules/color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||||
|
},
|
||||||
"node_modules/@sideway/address": {
|
"node_modules/@sideway/address": {
|
||||||
"version": "4.1.4",
|
"version": "4.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
|
||||||
|
@ -23766,22 +23796,6 @@
|
||||||
"nanoid": "^3.1.23"
|
"nanoid": "^3.1.23"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@react-navigation/native-stack": {
|
|
||||||
"version": "6.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.6.2.tgz",
|
|
||||||
"integrity": "sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q==",
|
|
||||||
"requires": {
|
|
||||||
"@react-navigation/elements": "^1.3.3",
|
|
||||||
"warn-once": "^0.1.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@react-navigation/elements": {
|
|
||||||
"version": "1.3.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.3.tgz",
|
|
||||||
"integrity": "sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw=="
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@react-navigation/routers": {
|
"@react-navigation/routers": {
|
||||||
"version": "6.1.0",
|
"version": "6.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
|
||||||
|
@ -23790,6 +23804,45 @@
|
||||||
"nanoid": "^3.1.23"
|
"nanoid": "^3.1.23"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@react-navigation/stack": {
|
||||||
|
"version": "6.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.2.2.tgz",
|
||||||
|
"integrity": "sha512-P9ZfmluOXNmbs7YdG1UWS1fAh87Yse9aX8TgqOz4FlHEm5q7g5eaM35QgWByt+wif3UiqE40D8wXpqRQvMgPWg==",
|
||||||
|
"requires": {
|
||||||
|
"@react-navigation/elements": "^1.3.4",
|
||||||
|
"color": "^4.2.3",
|
||||||
|
"warn-once": "^0.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@react-navigation/elements": {
|
||||||
|
"version": "1.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.4.tgz",
|
||||||
|
"integrity": "sha512-O0jICpjn3jskVo4yiWzZozmj7DZy1ZBbn3O7dbenuUjZSj/cscjwaapmZZFGcI/IMmjmx8UTKsybhCFEIbGf3g=="
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"version": "4.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||||
|
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
|
||||||
|
"requires": {
|
||||||
|
"color-convert": "^2.0.1",
|
||||||
|
"color-string": "^1.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"requires": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@sideway/address": {
|
"@sideway/address": {
|
||||||
"version": "4.1.4",
|
"version": "4.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
|
||||||
|
|
|
@ -54,7 +54,7 @@
|
||||||
"@react-navigation/elements": "1.2.1",
|
"@react-navigation/elements": "1.2.1",
|
||||||
"@react-navigation/material-top-tabs": "6.0.6",
|
"@react-navigation/material-top-tabs": "6.0.6",
|
||||||
"@react-navigation/native": "6.0.6",
|
"@react-navigation/native": "6.0.6",
|
||||||
"@react-navigation/native-stack": "6.6.2",
|
"@react-navigation/stack": "6.2.2",
|
||||||
"@svgr/webpack": "4.3.2",
|
"@svgr/webpack": "4.3.2",
|
||||||
"@tensorflow/tfjs-backend-wasm": "3.13.0",
|
"@tensorflow/tfjs-backend-wasm": "3.13.0",
|
||||||
"@tensorflow/tfjs-core": "3.13.0",
|
"@tensorflow/tfjs-core": "3.13.0",
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Platform, StyleSheet, View } from 'react-native';
|
import { Platform, StyleSheet, View } from 'react-native';
|
||||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||||
import { FullWindowOverlay } from 'react-native-screens';
|
|
||||||
import SplashScreen from 'react-native-splash-screen';
|
import SplashScreen from 'react-native-splash-screen';
|
||||||
|
|
||||||
import { DialogContainer } from '../../base/dialog';
|
import { DialogContainer } from '../../base/dialog';
|
||||||
|
@ -24,7 +23,6 @@ import '../reducers';
|
||||||
declare var __DEV__;
|
declare var __DEV__;
|
||||||
|
|
||||||
const DialogContainerWrapper = Platform.select({
|
const DialogContainerWrapper = Platform.select({
|
||||||
ios: FullWindowOverlay,
|
|
||||||
default: View
|
default: View
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { getDefaultHeaderHeight } from '@react-navigation/elements';
|
import { useHeaderHeight } from '@react-navigation/elements';
|
||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
Keyboard,
|
Keyboard,
|
||||||
|
@ -8,7 +8,7 @@ import {
|
||||||
Platform,
|
Platform,
|
||||||
StatusBar
|
StatusBar
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import { StyleType } from '../../styles';
|
import { StyleType } from '../../styles';
|
||||||
|
|
||||||
|
@ -34,11 +34,6 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
hasTabNavigator: boolean,
|
hasTabNavigator: boolean,
|
||||||
|
|
||||||
/**
|
|
||||||
* Is the screen presented as a modal?
|
|
||||||
*/
|
|
||||||
isModalPresentation: boolean,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Additional style to be appended to the KeyboardAvoidingView.
|
* Additional style to be appended to the KeyboardAvoidingView.
|
||||||
*/
|
*/
|
||||||
|
@ -51,33 +46,26 @@ const JitsiKeyboardAvoidingView = (
|
||||||
contentContainerStyle,
|
contentContainerStyle,
|
||||||
hasTabNavigator,
|
hasTabNavigator,
|
||||||
hasBottomTextInput,
|
hasBottomTextInput,
|
||||||
isModalPresentation,
|
|
||||||
style
|
style
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const frame = useSafeAreaFrame();
|
const headerHeight = useHeaderHeight();
|
||||||
const insets = useSafeAreaInsets();
|
const insets = useSafeAreaInsets();
|
||||||
const [ bottomPadding, setBottomPadding ] = useState(insets.bottom);
|
const [ bottomPadding, setBottomPadding ] = useState(insets.bottom);
|
||||||
const [ topPadding, setTopPadding ] = useState(insets.top);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// This useEffect is needed because insets are undefined at first for some reason
|
// This useEffect is needed because insets are undefined at first for some reason
|
||||||
// https://github.com/th3rdwave/react-native-safe-area-context/issues/54
|
// https://github.com/th3rdwave/react-native-safe-area-context/issues/54
|
||||||
setBottomPadding(insets.bottom);
|
setBottomPadding(insets.bottom);
|
||||||
setTopPadding(insets.top);
|
}, [ insets.bottom ]);
|
||||||
}, [ insets.bottom, insets.top ]);
|
|
||||||
|
|
||||||
const headerHeight = getDefaultHeaderHeight(frame, isModalPresentation, topPadding);
|
|
||||||
|
|
||||||
// Notch devices have in general a header height between 103 and 106px
|
|
||||||
const topNotchDevice = headerHeight > 100;
|
|
||||||
const deviceHeight = topNotchDevice ? headerHeight - 50 : headerHeight;
|
|
||||||
const tabNavigatorPadding
|
const tabNavigatorPadding
|
||||||
= hasTabNavigator ? deviceHeight : 0;
|
= hasTabNavigator ? headerHeight : 0;
|
||||||
const noNotchDevicePadding = bottomPadding || 10;
|
const noNotchDevicePadding = bottomPadding || 10;
|
||||||
const iosVerticalOffset
|
const iosVerticalOffset
|
||||||
= deviceHeight + noNotchDevicePadding + tabNavigatorPadding;
|
= headerHeight + noNotchDevicePadding + tabNavigatorPadding;
|
||||||
const androidVerticalOffset = hasBottomTextInput
|
const androidVerticalOffset = hasBottomTextInput
|
||||||
? deviceHeight + StatusBar.currentHeight : deviceHeight;
|
? headerHeight + StatusBar.currentHeight : headerHeight;
|
||||||
|
|
||||||
// Tells the view what to do with taps
|
// Tells the view what to do with taps
|
||||||
const shouldSetResponse = useCallback(() => true);
|
const shouldSetResponse = useCallback(() => true);
|
||||||
|
|
|
@ -37,11 +37,6 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
hasTabNavigator?: boolean,
|
hasTabNavigator?: boolean,
|
||||||
|
|
||||||
/**
|
|
||||||
* Is the screen presented as a modal?
|
|
||||||
*/
|
|
||||||
isModalPresentation?: boolean,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Insets for the SafeAreaView.
|
* Insets for the SafeAreaView.
|
||||||
*/
|
*/
|
||||||
|
@ -59,7 +54,6 @@ const JitsiScreen = ({
|
||||||
footerComponent,
|
footerComponent,
|
||||||
hasTabNavigator = false,
|
hasTabNavigator = false,
|
||||||
hasBottomTextInput = false,
|
hasBottomTextInput = false,
|
||||||
isModalPresentation = true,
|
|
||||||
safeAreaInsets = [ 'left', 'right' ],
|
safeAreaInsets = [ 'left', 'right' ],
|
||||||
style
|
style
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
|
@ -69,7 +63,6 @@ const JitsiScreen = ({
|
||||||
contentContainerStyle = { contentContainerStyle }
|
contentContainerStyle = { contentContainerStyle }
|
||||||
hasBottomTextInput = { hasBottomTextInput }
|
hasBottomTextInput = { hasBottomTextInput }
|
||||||
hasTabNavigator = { hasTabNavigator }
|
hasTabNavigator = { hasTabNavigator }
|
||||||
isModalPresentation = { isModalPresentation }
|
|
||||||
style = { style }>
|
style = { style }>
|
||||||
<SafeAreaView
|
<SafeAreaView
|
||||||
edges = { safeAreaInsets }
|
edges = { safeAreaInsets }
|
||||||
|
|
|
@ -41,14 +41,20 @@ export default {
|
||||||
width: BaseTheme.spacing[6]
|
width: BaseTheme.spacing[6]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
headerNavigationIcon: {
|
||||||
|
marginLeft: 12
|
||||||
|
},
|
||||||
|
|
||||||
headerNavigationText: {
|
headerNavigationText: {
|
||||||
color: BaseTheme.palette.text01,
|
color: BaseTheme.palette.text01,
|
||||||
|
marginLeft: BaseTheme.spacing[3],
|
||||||
fontSize: HEADER_ACTION_BUTTON_SIZE
|
fontSize: HEADER_ACTION_BUTTON_SIZE
|
||||||
},
|
},
|
||||||
|
|
||||||
headerNavigationTextBold: {
|
headerNavigationTextBold: {
|
||||||
...BaseTheme.typography.labelButton,
|
...BaseTheme.typography.labelButton,
|
||||||
color: BaseTheme.palette.text01,
|
color: BaseTheme.palette.text01,
|
||||||
|
marginRight: BaseTheme.spacing[3],
|
||||||
fontSize: HEADER_ACTION_BUTTON_SIZE
|
fontSize: HEADER_ACTION_BUTTON_SIZE
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -61,7 +61,8 @@ const HeaderNavigationButton
|
||||||
styles.headerNavigationButton ] } >
|
styles.headerNavigationButton ] } >
|
||||||
<Icon
|
<Icon
|
||||||
size = { 24 }
|
size = { 24 }
|
||||||
src = { src } />
|
src = { src }
|
||||||
|
style = { styles.headerNavigationIcon } />
|
||||||
</TouchableRipple>
|
</TouchableRipple>
|
||||||
) : (
|
) : (
|
||||||
<TouchableRipple
|
<TouchableRipple
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { NavigationContainer } from '@react-navigation/native';
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
import { createStackNavigator } from '@react-navigation/stack';
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback } from 'react';
|
||||||
|
|
||||||
import { connect } from '../../../base/redux';
|
import { connect } from '../../../base/redux';
|
||||||
|
@ -24,7 +24,7 @@ import ConferenceNavigationContainer
|
||||||
import WelcomePageNavigationContainer
|
import WelcomePageNavigationContainer
|
||||||
from './welcome/components/WelcomePageNavigationContainer';
|
from './welcome/components/WelcomePageNavigationContainer';
|
||||||
|
|
||||||
const RootStack = createNativeStackNavigator();
|
const RootStack = createStackNavigator();
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { NavigationContainer } from '@react-navigation/native';
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
import { createStackNavigator } from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
@ -46,7 +46,7 @@ import {
|
||||||
conferenceNavigationRef
|
conferenceNavigationRef
|
||||||
} from '../ConferenceNavigationContainerRef';
|
} from '../ConferenceNavigationContainerRef';
|
||||||
|
|
||||||
const ConferenceStack = createNativeStackNavigator();
|
const ConferenceStack = createStackNavigator();
|
||||||
|
|
||||||
const ConferenceNavigationContainer = () => {
|
const ConferenceNavigationContainer = () => {
|
||||||
const isPollsDisabled = useSelector(getDisablePolls);
|
const isPollsDisabled = useSelector(getDisablePolls);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { NavigationContainer } from '@react-navigation/native';
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
import { createStackNavigator } from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ import {
|
||||||
} from '../../../screenOptions';
|
} from '../../../screenOptions';
|
||||||
import { lobbyNavigationContainerRef } from '../LobbyNavigationContainerRef';
|
import { lobbyNavigationContainerRef } from '../LobbyNavigationContainerRef';
|
||||||
|
|
||||||
const LobbyStack = createNativeStackNavigator();
|
const LobbyStack = createStackNavigator();
|
||||||
|
|
||||||
|
|
||||||
const LobbyNavigationContainer = () => {
|
const LobbyNavigationContainer = () => {
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { TransitionPresets } from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Platform } from 'react-native';
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
|
@ -16,6 +17,23 @@ import { lobbyScreenHeaderCloseButton, screenHeaderCloseButton } from './functio
|
||||||
import { goBack as goBackToWelcomeScreen } from './rootNavigationContainerRef';
|
import { goBack as goBackToWelcomeScreen } from './rootNavigationContainerRef';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default modal transition for the current platform.
|
||||||
|
*/
|
||||||
|
export const modalPresentation = Platform.select({
|
||||||
|
ios: TransitionPresets.ModalPresentationIOS,
|
||||||
|
default: TransitionPresets.DefaultTransition
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Screen options and transition types.
|
||||||
|
*/
|
||||||
|
export const fullScreenOptions = {
|
||||||
|
...TransitionPresets.ModalTransition,
|
||||||
|
gestureEnabled: false,
|
||||||
|
headerShown: false
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Navigation container theme.
|
* Navigation container theme.
|
||||||
*/
|
*/
|
||||||
|
@ -29,7 +47,7 @@ export const navigationContainerTheme = {
|
||||||
* Drawer navigator screens options and transition types.
|
* Drawer navigator screens options and transition types.
|
||||||
*/
|
*/
|
||||||
export const drawerNavigatorScreenOptions = {
|
export const drawerNavigatorScreenOptions = {
|
||||||
animation: 'default',
|
...TransitionPresets.ModalTransition,
|
||||||
gestureEnabled: true,
|
gestureEnabled: true,
|
||||||
headerShown: false
|
headerShown: false
|
||||||
};
|
};
|
||||||
|
@ -39,16 +57,12 @@ export const drawerNavigatorScreenOptions = {
|
||||||
* Drawer screen options and transition types.
|
* Drawer screen options and transition types.
|
||||||
*/
|
*/
|
||||||
export const drawerScreenOptions = {
|
export const drawerScreenOptions = {
|
||||||
animation: 'default',
|
...TransitionPresets.ModalTransition,
|
||||||
gestureEnabled: true,
|
gestureEnabled: true,
|
||||||
headerShown: true,
|
headerShown: true,
|
||||||
headerStyle: {
|
headerStyle: {
|
||||||
backgroundColor: BaseTheme.palette.screen02Header
|
backgroundColor: BaseTheme.palette.screen02Header
|
||||||
},
|
}
|
||||||
orientation: Platform.select({
|
|
||||||
ios: 'default',
|
|
||||||
android: 'all'
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -138,15 +152,7 @@ export const helpScreenOptions = {
|
||||||
/**
|
/**
|
||||||
* Screen options for conference.
|
* Screen options for conference.
|
||||||
*/
|
*/
|
||||||
export const conferenceScreenOptions = {
|
export const conferenceScreenOptions = fullScreenOptions;
|
||||||
animation: 'default',
|
|
||||||
gestureEnabled: false,
|
|
||||||
headerShown: false,
|
|
||||||
orientation: Platform.select({
|
|
||||||
ios: 'default',
|
|
||||||
android: 'all'
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tab bar options for chat screen.
|
* Tab bar options for chat screen.
|
||||||
|
@ -172,6 +178,7 @@ export const chatTabBarOptions = {
|
||||||
* Screen options for presentation type modals.
|
* Screen options for presentation type modals.
|
||||||
*/
|
*/
|
||||||
export const presentationScreenOptions = {
|
export const presentationScreenOptions = {
|
||||||
|
...modalPresentation,
|
||||||
headerBackTitleVisible: false,
|
headerBackTitleVisible: false,
|
||||||
headerLeft: () => screenHeaderCloseButton(goBack),
|
headerLeft: () => screenHeaderCloseButton(goBack),
|
||||||
headerStatusBarHeight: 0,
|
headerStatusBarHeight: 0,
|
||||||
|
@ -180,20 +187,13 @@ export const presentationScreenOptions = {
|
||||||
},
|
},
|
||||||
headerTitleStyle: {
|
headerTitleStyle: {
|
||||||
color: BaseTheme.palette.text01
|
color: BaseTheme.palette.text01
|
||||||
},
|
}
|
||||||
orientation: Platform.select({
|
|
||||||
ios: 'default',
|
|
||||||
android: 'all'
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Screen options for car mode.
|
* Screen options for car mode.
|
||||||
*/
|
*/
|
||||||
export const carmodeScreenOptions = {
|
export const carmodeScreenOptions = presentationScreenOptions;
|
||||||
...presentationScreenOptions,
|
|
||||||
orientation: 'portrait'
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Screen options for chat.
|
* Screen options for chat.
|
||||||
|
@ -205,7 +205,6 @@ export const chatScreenOptions = presentationScreenOptions;
|
||||||
*/
|
*/
|
||||||
export const dialInSummaryScreenOptions = {
|
export const dialInSummaryScreenOptions = {
|
||||||
...presentationScreenOptions,
|
...presentationScreenOptions,
|
||||||
animation: 'slide_from_bottom',
|
|
||||||
headerLeft: () => screenHeaderCloseButton(goBackToWelcomeScreen)
|
headerLeft: () => screenHeaderCloseButton(goBackToWelcomeScreen)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { View, Text, TextInput, FlatList } from 'react-native';
|
import { View, Text, TextInput, FlatList, Platform } from 'react-native';
|
||||||
import { Divider, TouchableRipple } from 'react-native-paper';
|
import { Divider, TouchableRipple } from 'react-native-paper';
|
||||||
|
|
||||||
import Button from '../../../base/react/components/native/Button';
|
import Button from '../../../base/react/components/native/Button';
|
||||||
|
@ -127,6 +127,8 @@ const PollCreate = (props: AbstractProps) => {
|
||||||
}
|
}
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
const buttonRowStyles = Platform.OS === 'android'
|
||||||
|
? chatStyles.buttonRowAndroid : chatStyles.buttonRowIos;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style = { chatStyles.pollCreateContainer }>
|
<View style = { chatStyles.pollCreateContainer }>
|
||||||
|
@ -167,7 +169,7 @@ const PollCreate = (props: AbstractProps) => {
|
||||||
style = { chatStyles.pollCreateAddButton }
|
style = { chatStyles.pollCreateAddButton }
|
||||||
type = { SECONDARY } />
|
type = { SECONDARY } />
|
||||||
<View
|
<View
|
||||||
style = { chatStyles.buttonRow }>
|
style = { buttonRowStyles }>
|
||||||
<Button
|
<Button
|
||||||
accessibilityLabel = 'polls.create.cancel'
|
accessibilityLabel = 'polls.create.cancel'
|
||||||
label = 'polls.create.cancel'
|
label = 'polls.create.cancel'
|
||||||
|
|
|
@ -170,10 +170,29 @@ export const chatStyles = createStyleSheet({
|
||||||
marginHorizontal: BaseTheme.spacing[2]
|
marginHorizontal: BaseTheme.spacing[2]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
pollSendLabel: {
|
||||||
|
color: BaseTheme.palette.text01,
|
||||||
|
textTransform: 'capitalize'
|
||||||
|
},
|
||||||
|
|
||||||
|
pollSendDisabledLabel: {
|
||||||
|
color: BaseTheme.palette.text03,
|
||||||
|
textTransform: 'capitalize'
|
||||||
|
},
|
||||||
|
|
||||||
buttonRow: {
|
buttonRow: {
|
||||||
flexDirection: 'row'
|
flexDirection: 'row'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
buttonRowAndroid: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginBottom: BaseTheme.spacing[3]
|
||||||
|
},
|
||||||
|
|
||||||
|
buttonRowIos: {
|
||||||
|
flexDirection: 'row'
|
||||||
|
},
|
||||||
|
|
||||||
answerContent: {
|
answerContent: {
|
||||||
paddingBottom: 8
|
paddingBottom: 8
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue