diff --git a/docs/docs/guides/02-theming.mdx b/docs/docs/guides/02-theming.mdx index 5ea9029b66..26a055e736 100644 --- a/docs/docs/guides/02-theming.mdx +++ b/docs/docs/guides/02-theming.mdx @@ -63,7 +63,6 @@ You can change the theme prop dynamically and all the components will automatica A theme usually contains the following properties: - `dark` (`boolean`): whether this is a dark theme or light theme. -- `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)). - `roundness` (`number`): roundness of common elements, such as buttons. - `colors` (`object`): various colors used throughout different elements. diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index f502c84795..07503bdf79 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -46,9 +46,6 @@ const AppbarExample = ({ navigation }: Props) => { header: () => ( @@ -171,7 +168,6 @@ const AppbarExample = ({ navigation }: Props) => { }, ]} safeAreaInsets={{ bottom, left, right }} - theme={{ mode: 'adaptive' }} > {}} /> {}} /> diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index 2279cbdcb3..e332c0ee34 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -69,9 +69,6 @@ export type Props = Omit< * The top bar usually contains the screen title, controls such as navigation buttons, menu button etc. * The bottom bar usually provides access to a drawer and up to four actions. * - * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead. - * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations - * * ## Usage * ### Top bar * ```js diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index 18e49fe09c..6cff64ff05 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -266,9 +266,6 @@ const SceneComponent = React.memo(({ component, ...rest }: any) => * BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar. * It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar). * - * By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead. - * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information. - * * ## Usage * ```js * import * as React from 'react'; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 422101b4e8..5f101a33fe 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -145,7 +145,7 @@ const Card = ( onLongPress, onPressOut, onPressIn, - mode: cardMode = 'elevated', + mode = 'elevated', children, style, contentStyle, @@ -158,11 +158,16 @@ const Card = ( ref: React.ForwardedRef ) => { const theme = useInternalTheme(themeOverrides); + const { + animation: { scale }, + roundness, + } = theme; + const isMode = React.useCallback( (modeToCompare: Mode) => { - return cardMode === modeToCompare; + return mode === modeToCompare; }, - [cardMode] + [mode] ); const hasPassedTouchHandler = hasTouchHandler({ @@ -172,45 +177,9 @@ const Card = ( onPressOut, }); - // Default animated value const { current: elevation } = React.useRef( new Animated.Value(cardElevation) ); - // Dark adaptive animated value, used in case of toggling the theme, - // it prevents animating the background with native drivers inside Surface - const { current: elevationDarkAdaptive } = React.useRef( - new Animated.Value(cardElevation) - ); - const { animation, dark, mode, roundness } = theme; - - const prevDarkRef = React.useRef(dark); - React.useEffect(() => { - prevDarkRef.current = dark; - }); - - const prevDark = prevDarkRef.current; - const isAdaptiveMode = mode === 'adaptive'; - const animationDuration = 150 * animation.scale; - - React.useEffect(() => { - /** - * Resets animations values if updating to dark adaptive mode, - * otherwise, any card that is in the middle of animation while - * toggling the theme will stay at that animated value until - * the next press-in - */ - if (dark && isAdaptiveMode && !prevDark) { - elevation.setValue(cardElevation); - elevationDarkAdaptive.setValue(cardElevation); - } - }, [ - prevDark, - dark, - isAdaptiveMode, - cardElevation, - elevation, - elevationDarkAdaptive, - ]); const runElevationAnimation = (pressType: HandlePressType) => { if (isMode('contained')) { @@ -218,19 +187,11 @@ const Card = ( } const isPressTypeIn = pressType === 'in'; - if (dark && isAdaptiveMode) { - Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? 2 : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } else { - Animated.timing(elevation, { - toValue: isPressTypeIn ? 2 : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } + Animated.timing(elevation, { + toValue: isPressTypeIn ? 2 : cardElevation, + duration: 150 * scale, + useNativeDriver: false, + }).start(); }; const handlePressIn = useLatestCallback((e: GestureResponderEvent) => { @@ -249,12 +210,10 @@ const Card = ( ? (child.type as any).displayName : null ); - const computedElevation = - dark && isAdaptiveMode ? elevationDarkAdaptive : elevation; const { backgroundColor, borderColor: themedBorderColor } = getCardColors({ theme, - mode: cardMode, + mode, }); const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle; @@ -295,7 +254,7 @@ const Card = ( style, ]} theme={theme} - elevation={isMode('elevated') ? computedElevation : 0} + elevation={isMode('elevated') ? elevation : 0} testID={`${testID}-container`} container {...rest} diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index c15fd0ad64..52b13d7159 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -209,8 +209,6 @@ const SurfaceIOS = forwardRef< /** * Surface is a basic container that can give depth to an element with elevation shadow. - * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface. - * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information. * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS. * * ## Usage diff --git a/src/styles/themes/DarkTheme.tsx b/src/styles/themes/DarkTheme.tsx index f7e52634f1..5d5cdae97c 100644 --- a/src/styles/themes/DarkTheme.tsx +++ b/src/styles/themes/DarkTheme.tsx @@ -9,7 +9,6 @@ const { palette, opacity } = tokens.md.ref; export const DarkTheme: Theme = { ...LightTheme, dark: true, - mode: 'adaptive', colors: { primary: palette.primary80, primaryContainer: palette.primary30, diff --git a/src/types.tsx b/src/types.tsx index d257c3ec30..ba97a2d104 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -19,8 +19,6 @@ export type Font = { fontStyle?: 'normal' | 'italic' | undefined; }; -type Mode = 'adaptive' | 'exact'; - export type Colors = { primary: string; primaryContainer: string; @@ -61,7 +59,6 @@ export type ThemeProp = $DeepPartial; export type ThemeBase = { dark: boolean; - mode?: Mode; roundness: number; animation: { scale: number;