callstack · pac-guerreiro · Mar 22, 2023 · Apr 17, 2023 · Apr 17, 2023 · Apr 18, 2023
diff --git a/docs/docs/guides/05-react-native-web.md b/docs/docs/guides/05-react-native-web.md
@@ -1,8 +1,8 @@
 ---
-title: Using on the Web
+title: Usage on the Web
 ---
 
-# Using on the Web
+# Usage on the Web
 
 ## Pre-requisites
 
@@ -270,6 +270,19 @@ You can also load these fonts using [`css-loader`](https://github.com/webpack-co
 
 The default theme in React Native Paper uses the Roboto font. You can add them to your project following [the instructions on its Google Fonts page](https://fonts.google.com/specimen/Roboto?selection.family=Roboto:100,300,400,500).
 
+## RTL support for Web
+Since `react-native-web` does not support `I18nManager`, in order to support RTL layouts you have to define text direction manually:
+
+```jsx
+export default function Main() {
+  return ( 
+    <PaperProvider direction="rtl">
+      <App />
+    </PaperProvider> 
+  );
+}
+```
+
 ## We're done!
 
 You can run `webpack-dev-server` to run the webpack server and open your project in the browser. You can add the following script in your `package.json` under the `"scripts"` section to make it easier:

diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
   },
   button: {
-    marginRight: 16,
+    marginEnd: 16,
   },
 });
 
@@ -70,7 +70,7 @@ const Shimmer = () => {
       <View
         style={{
           width: 121,
-          marginRight: 16,
+          marginEnd: 16,
           borderWidth: 1,
           borderColor: 'rgba(125, 82, 96, 0.4)',
           borderStyle: 'solid',

diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { I18nManager, StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View, Platform } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
-import * as Updates from 'expo-updates';
 import {
   Badge,
   Drawer,
@@ -13,9 +12,10 @@ import {
   TouchableRipple,
 } from 'react-native-paper';
 
-import { deviceColorsSupported, isWeb } from '../utils';
+import { deviceColorsSupported } from '../utils';
+import { usePreferences } from './PreferencesContext';
 
-import { PreferencesContext, useExampleTheme } from './';
+import { useExampleTheme } from './';
 
 const DrawerItemsData = [
   {
@@ -87,39 +87,29 @@ const DrawerCollapsedItemsData = [
 
 function DrawerItems() {
   const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(0);
-  const preferences = React.useContext(PreferencesContext);
+  const preferences = usePreferences();
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
   const { isV3, colors } = useExampleTheme();
   const isIOS = Platform.OS === 'ios';
 
-  if (!preferences) throw new Error('PreferencesContext not provided');
-
   const {
     toggleShouldUseDeviceColors,
     toggleTheme,
-    toggleRtl: toggleRTL,
     toggleThemeVersion,
     toggleCollapsed,
     toggleCustomFont,
     toggleRippleEffect,
+    toggleRTL,
     customFontLoaded,
     rippleEffectEnabled,
     collapsed,
-    rtl: isRTL,
+    isRTL,
     theme: { dark: isDarkTheme },
     shouldUseDeviceColors,
   } = preferences;
 
-  const _handleToggleRTL = () => {
-    toggleRTL();
-    I18nManager.forceRTL(!isRTL);
-    if (isWeb) {
-      Updates.reloadAsync();
-    }
-  };
-
   const coloredLabelTheme = {
     colors: isV3
       ? {
@@ -190,16 +180,14 @@ function DrawerItems() {
               </View>
             </TouchableRipple>
 
-            {!isWeb && (
-              <TouchableRipple onPress={_handleToggleRTL}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">RTL</Text>
-                  <View pointerEvents="none">
-                    <Switch value={isRTL} />
-                  </View>
+            <TouchableRipple onPress={toggleRTL}>
+              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <Text variant="labelLarge">RTL</Text>
+                <View pointerEvents="none">
+                  <Switch value={isRTL} />
                 </View>
-              </TouchableRipple>
-            )}
+              </View>
+            </TouchableRipple>
 
             <TouchableRipple onPress={toggleThemeVersion}>
               <View style={[styles.preference, isV3 && styles.v3Preference]}>

diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
@@ -157,8 +157,8 @@ export default function ExampleList({ navigation }: Props) {
       contentContainerStyle={{
         backgroundColor: colors.background,
         paddingBottom: safeArea.bottom,
-        paddingLeft: safeArea.left,
-        paddingRight: safeArea.right,
+        paddingStart: safeArea.left,
+        paddingEnd: safeArea.right,
       }}
       style={{
         backgroundColor: colors.background,

diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
+import { useLocale } from '../../../../src/core/Localization';
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {
   Controls,
@@ -33,6 +34,7 @@ type Item = {
 
 const AnimatedFABExample = () => {
   const { colors, isV3 } = useExampleTheme();
+  const { localeProps } = useLocale();
 
   const isIOS = Platform.OS === 'ios';
 
@@ -155,6 +157,7 @@ const AnimatedFABExample = () => {
         ]}
         contentContainerStyle={styles.container}
         onScroll={onScroll}
+        {...localeProps}
       />
 
       <CustomFAB
@@ -177,7 +180,7 @@ const styles = StyleSheet.create({
     paddingBottom: 60,
   },
   avatar: {
-    marginRight: 16,
+    marginEnd: 16,
     marginTop: 8,
   },
   flex: {
@@ -204,15 +207,15 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   icon: {
-    marginLeft: 16,
+    marginStart: 16,
     alignSelf: 'flex-end',
   },
   date: {
     fontSize: 12,
   },
   header: {
     fontSize: 14,
-    marginRight: 8,
+    marginEnd: 8,
     flex: 1,
   },
 });

diff --git a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx
@@ -139,7 +139,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   controlItem: {
-    marginLeft: 16,
+    marginStart: 16,
     flexDirection: 'row',
     alignItems: 'center',
   },

diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
   badge: {
     position: 'absolute',
     top: 4,
-    right: 0,
+    end: 0,
   },
   label: {
     flex: 1,

diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx
@@ -11,8 +11,9 @@ import {
   Text,
 } from 'react-native-paper';
 
-import { PreferencesContext, useExampleTheme } from '..';
+import { useExampleTheme } from '..';
 import { isWeb } from '../../utils';
+import { usePreferences } from '../PreferencesContext';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Mode = 'elevated' | 'outlined' | 'contained';
@@ -21,7 +22,7 @@ const CardExample = () => {
   const { colors, isV3 } = useExampleTheme();
   const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode);
   const [isSelected, setIsSelected] = React.useState(false);
-  const preferences = React.useContext(PreferencesContext);
+  const preferences = usePreferences();
 
   const modes = isV3
     ? ['elevated', 'outlined', 'contained']
@@ -188,7 +189,7 @@ const CardExample = () => {
         <Card
           style={styles.card}
           onPress={() => {
-            preferences?.toggleTheme();
+            preferences.toggleTheme();
           }}
           mode={selectedMode}
         >

diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx
@@ -354,8 +354,8 @@ const styles = StyleSheet.create({
   },
   tiny: {
     marginVertical: 2,
-    marginRight: 2,
-    marginLeft: 2,
+    marginEnd: 2,
+    marginStart: 2,
     minHeight: 19,
     lineHeight: 19,
   },

diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -25,7 +25,7 @@ const DialogWithLoadingIndicator = ({
             <ActivityIndicator
               color={isV3 ? MD3Colors.tertiary30 : MD2Colors.indigo500}
               size={isIOS ? 'large' : 48}
-              style={styles.marginRight}
+              style={styles.marginEnd}
             />
             <TextComponent>Loading.....</TextComponent>
           </View>
@@ -40,8 +40,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  marginRight: {
-    marginRight: 16,
+  marginEnd: {
+    marginEnd: 16,
   },
 });
 

diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
@@ -106,6 +106,6 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
   },
   text: {
-    paddingLeft: 8,
+    paddingStart: 8,
   },
 });
diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
@@ -185,7 +185,10 @@ const styles = StyleSheet.create({
   md3Divider: {
     marginVertical: 8,
   },
-  bottomMenu: { width: '40%' },
+  bottomMenu: {
+    width: '50%',
+    paddingStart: 20,
+  },
   contentContainer: {
     justifyContent: 'space-between',
     flex: 1,

diff --git a/example/src/Examples/SnackbarExample.tsx b/example/src/Examples/SnackbarExample.tsx
@@ -3,15 +3,16 @@ import { StyleSheet, View } from 'react-native';
 
 import { Snackbar, Button, List, Text, Switch } from 'react-native-paper';
 
-import { PreferencesContext, useExampleTheme } from '..';
+import { useExampleTheme } from '..';
+import { usePreferences } from '../PreferencesContext';
 import ScreenWrapper from '../ScreenWrapper';
 
 const SHORT_MESSAGE = 'Single-line snackbar';
 const LONG_MESSAGE =
   'Snackbar with longer message which does not fit in one line';
 
 const SnackbarExample = () => {
-  const preferences = React.useContext(PreferencesContext);
+  const preferences = usePreferences();
   const theme = useExampleTheme();
 
   const [options, setOptions] = React.useState({
@@ -33,7 +34,7 @@ const SnackbarExample = () => {
   const action = {
     label: showLongerAction ? 'Toggle Theme' : 'Action',
     onPress: () => {
-      preferences?.toggleTheme();
+      preferences.toggleTheme();
     },
   };
 

diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
@@ -53,10 +53,10 @@ const SurfaceExample = () => {
         <View style={styles.content}>
           <View style={styles.horizontalSurfacesContainer}>
             <Surface style={styles.horizontalSurface}>
-              <Text style={styles.centerText}>Left</Text>
+              <Text style={styles.centerText}>Start</Text>
             </Surface>
             <Surface style={styles.horizontalSurface}>
-              <Text style={styles.centerText}>Right</Text>
+              <Text style={styles.centerText}>End</Text>
             </Surface>
           </View>
           <View style={styles.verticalSurfacesContainer}>

diff --git a/example/src/Examples/TeamDetails.tsx b/example/src/Examples/TeamDetails.tsx
@@ -23,6 +23,7 @@ import {
 } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useLocale } from '../../../src/core/Localization';
 import { colorThemes, teamResultsData } from '../../utils';
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -180,6 +181,7 @@ const Results = () => {
 const ThemeBasedOnSourceColor = ({ navigation, route }: Props) => {
   const insets = useSafeAreaInsets();
   const [index, setIndex] = React.useState(0);
+  const { direction } = useLocale();
 
   const { params } = route;
   const { sourceColor, headerTitle, darkMode } = params;
@@ -217,7 +219,7 @@ const ThemeBasedOnSourceColor = ({ navigation, route }: Props) => {
   const colorScheme = darkMode ? 'dark' : systemColorScheme;
 
   return (
-    <PaperProvider theme={theme[colorScheme]}>
+    <PaperProvider theme={theme[colorScheme]} direction={direction}>
       <View style={styles.screen}>
         <Appbar.Header elevated>
           <Appbar.BackAction onPress={() => navigation.goBack()} />
@@ -264,7 +266,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   score: {
-    marginRight: 16,
+    marginEnd: 16,
   },
   fab: {
     position: 'absolute',
@@ -282,10 +284,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   chipsContent: {
-    paddingLeft: 8,
+    paddingStart: 8,
     paddingVertical: 8,
   },
   chip: {
-    marginRight: 8,
+    marginEnd: 8,
   },
 });
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -701,7 +701,7 @@ const styles = StyleSheet.create({
     margin: 8,
   },
   inputContentStyle: {
-    paddingLeft: 50,
+    paddingStart: 50,
     fontWeight: 'bold',
     fontStyle: 'italic',
   },