Skip to content

Upgrade RN #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oleksandrkaDev wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Upgrade RN #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a670ef7
Upgrade libs
oleksandrkaDev Apr 11, 2025
eb619d4
Change deprecated TouchableWithoutFeedback to Pressable
oleksandrkaDev Apr 15, 2025
e07bb0a
Update theme for action bottom
oleksandrkaDev Aug 21, 2025
84d12c8
Merge branch 'main' into upgrade-rn
adebroux Sep 15, 2025
29659c2
Add color
adebroux Oct 22, 2025
128523e
Use tintColor
adebroux Oct 23, 2025
2e47827
Merge branch 'bugfix/custom-icons-colors' into upgrade-rn
adebroux Oct 28, 2025
a08a40d
Update version
adebroux Oct 28, 2025
8d23624
Update packages for custom icons (#6)
adebroux Mar 26, 2026
4605230
Redo TintedSvgIcon
adebroux Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{
"name": "@protonapp/react-native-material-ui",
"version": "2.0.9",
"version": "2.0.11",
"description": "React Native Material Design Components",
"main": "./index.js",
"scripts": {
"test": "jest",
"copy": "rm -rf ../material-components-library/node_modules/@protonapp/react-native-material-ui/src && cp -r src ../material-components-library/node_modules/@protonapp/react-native-material-ui/src",
"copy:test": "rm -rf ../../Builds/Fab/node_modules/@protonapp/react-native-material-ui/src && cp -r src ../../Builds/Fab/node_modules/@protonapp/react-native-material-ui/src",
"lint": "eslint ./"
"lint": "eslint ./",
"postinstall": "patch-package"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -35,14 +36,16 @@
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-vector-icons": "*"
"react-native-vector-icons": "*",
"react-native-svg": "*"
},
"dependencies": {
"color": "3.1.0",
"hoist-non-react-statics": "^2.5.5",
"lodash.merge": "^4.0.0",
"patch-package": "^8.0.0",
"prop-types": "^15.5.10",
"react-native-material-design-styles": "^0.2.6"
"react-native-material-design-styles": "^0.2.7"
},
"devDependencies": {
"babel-core": "^6.25.0",
Expand All @@ -61,11 +64,12 @@
"eslint-plugin-react-native": "^3.5.0",
"jest": "23.6.0",
"prettier": "1.14.3",
"react": "16.4.1",
"react-native": "0.57.4",
"react-native-vector-icons": "^6.0.2",
"react-native-web": "^0.9.8",
"react-test-renderer": "16.4.1",
"react": "18.2.0",
"react-native": "0.77.2",
"react-native-svg": "13.14.1",
"react-native-vector-icons": "^10.2.0",
"react-native-web": "0.19.10",
"react-test-renderer": "^18.2.0",
"semantic-release": "^15.13.3"
}
}
309 changes: 309 additions & 0 deletions patches/react-native-web+0.19.10.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,309 @@
diff --git a/node_modules/react-native-web/dist/exports/TouchableWithoutFeedback/index.js b/node_modules/react-native-web/dist/exports/TouchableWithoutFeedback/index.js
index b74ce35..a8072e0 100644
--- a/node_modules/react-native-web/dist/exports/TouchableWithoutFeedback/index.js
+++ b/node_modules/react-native-web/dist/exports/TouchableWithoutFeedback/index.js
@@ -15,6 +15,8 @@ import { useMemo, useRef } from 'react';
import pick from '../../modules/pick';
import useMergeRefs from '../../modules/useMergeRefs';
import usePressEvents from '../../modules/usePressEvents';
+import StyleSheet from '../StyleSheet';
+import Touchable from '../Touchable';
import { warnOnce } from '../../modules/warnOnce';
var forwardPropsList = {
accessibilityDisabled: true,
@@ -64,9 +66,19 @@ function TouchableWithoutFeedback(props, forwardedRef) {
supportedProps.accessibilityDisabled = disabled;
supportedProps.focusable = !disabled && focusable !== false;
supportedProps.ref = useMergeRefs(forwardedRef, hostRef, element.ref);
- var elementProps = Object.assign(supportedProps, pressEventHandlers);
+
+ warnOnce(!element.type || element.type.displayName !== 'Text', 'TouchableWithoutFeedback does not work well with Text children. Wrap children in a View instead. See ' + (element._owner && element._owner.getName && element._owner.getName() || '<unknown>'));
+ var style = [!disabled && styles.actionable, element.props.style];
+
+ var elementProps = Object.assign(supportedProps, pressEventHandlers, { style });
return /*#__PURE__*/React.cloneElement(element, elementProps, ...children);
}
+var styles = StyleSheet.create({
+ actionable: {
+ cursor: 'pointer',
+ touchAction: 'manipulation'
+ }
+});
var MemoedTouchableWithoutFeedback = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(TouchableWithoutFeedback));
MemoedTouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
export default MemoedTouchableWithoutFeedback;
\ No newline at end of file
diff --git a/node_modules/react-native-web/dist/index.js b/node_modules/react-native-web/dist/index.js
index 4f69987..312bdb5 100644
--- a/node_modules/react-native-web/dist/index.js
+++ b/node_modules/react-native-web/dist/index.js
@@ -1,69 +1,207 @@
-export { default as unstable_createElement } from './exports/createElement';
-export { default as findNodeHandle } from './exports/findNodeHandle';
-export { default as processColor } from './exports/processColor';
-export { default as render } from './exports/render';
-export { default as unmountComponentAtNode } from './exports/unmountComponentAtNode';
-export { default as NativeModules } from './exports/NativeModules';
+import unstable_createElement from './exports/createElement';
+import findNodeHandle from './exports/findNodeHandle';
+import processColor from './exports/processColor';
+import render from './exports/render';
+import unmountComponentAtNode from './exports/unmountComponentAtNode';
+import NativeModules from './exports/NativeModules';

// APIs
-export { default as AccessibilityInfo } from './exports/AccessibilityInfo';
-export { default as Alert } from './exports/Alert';
-export { default as Animated } from './exports/Animated';
-export { default as Appearance } from './exports/Appearance';
-export { default as AppRegistry } from './exports/AppRegistry';
-export { default as AppState } from './exports/AppState';
-export { default as BackHandler } from './exports/BackHandler';
-export { default as Clipboard } from './exports/Clipboard';
-export { default as Dimensions } from './exports/Dimensions';
-export { default as Easing } from './exports/Easing';
-export { default as I18nManager } from './exports/I18nManager';
-export { default as Keyboard } from './exports/Keyboard';
-export { default as InteractionManager } from './exports/InteractionManager';
-export { default as LayoutAnimation } from './exports/LayoutAnimation';
-export { default as Linking } from './exports/Linking';
-export { default as NativeEventEmitter } from './exports/NativeEventEmitter';
-export { default as PanResponder } from './exports/PanResponder';
-export { default as PixelRatio } from './exports/PixelRatio';
-export { default as Platform } from './exports/Platform';
-export { default as Share } from './exports/Share';
-export { default as StyleSheet } from './exports/StyleSheet';
-export { default as UIManager } from './exports/UIManager';
-export { default as Vibration } from './exports/Vibration';
+import AccessibilityInfo from './exports/AccessibilityInfo';
+import Alert from './exports/Alert';
+import Animated from './exports/Animated';
+import Appearance from './exports/Appearance';
+import AppRegistry from './exports/AppRegistry';
+import AppState from './exports/AppState';
+import BackHandler from './exports/BackHandler';
+import Clipboard from './exports/Clipboard';
+import Dimensions from './exports/Dimensions';
+import Easing from './exports/Easing';
+import I18nManager from './exports/I18nManager';
+import Keyboard from './exports/Keyboard';
+import InteractionManager from './exports/InteractionManager';
+import LayoutAnimation from './exports/LayoutAnimation';
+import Linking from './exports/Linking';
+import NativeEventEmitter from './exports/NativeEventEmitter';
+import PanResponder from './exports/PanResponder';
+import PixelRatio from './exports/PixelRatio';
+import Platform from './exports/Platform';
+import Share from './exports/Share';
+import StyleSheet from './exports/StyleSheet';
+import UIManager from './exports/UIManager';
+import Vibration from './exports/Vibration';

// components
-export { default as ActivityIndicator } from './exports/ActivityIndicator';
-export { default as Button } from './exports/Button';
-export { default as CheckBox } from './exports/CheckBox';
-export { default as FlatList } from './exports/FlatList';
-export { default as Image } from './exports/Image';
-export { default as ImageBackground } from './exports/ImageBackground';
-export { default as KeyboardAvoidingView } from './exports/KeyboardAvoidingView';
-export { default as Modal } from './exports/Modal';
-export { default as Picker } from './exports/Picker';
-export { default as Pressable } from './exports/Pressable';
-export { default as ProgressBar } from './exports/ProgressBar';
-export { default as RefreshControl } from './exports/RefreshControl';
-export { default as SafeAreaView } from './exports/SafeAreaView';
-export { default as ScrollView } from './exports/ScrollView';
-export { default as SectionList } from './exports/SectionList';
-export { default as StatusBar } from './exports/StatusBar';
-export { default as Switch } from './exports/Switch';
-export { default as Text } from './exports/Text';
-export { default as TextInput } from './exports/TextInput';
-export { default as Touchable } from './exports/Touchable';
-export { default as TouchableHighlight } from './exports/TouchableHighlight';
-export { default as TouchableNativeFeedback } from './exports/TouchableNativeFeedback';
-export { default as TouchableOpacity } from './exports/TouchableOpacity';
-export { default as TouchableWithoutFeedback } from './exports/TouchableWithoutFeedback';
-export { default as View } from './exports/View';
-export { default as VirtualizedList } from './exports/VirtualizedList';
-export { default as YellowBox } from './exports/YellowBox';
-export { default as LogBox } from './exports/LogBox';
+import ActivityIndicator from './exports/ActivityIndicator';
+import Button from './exports/Button';
+import CheckBox from './exports/CheckBox';
+import FlatList from './exports/FlatList';
+import Image from './exports/Image';
+import ImageBackground from './exports/ImageBackground';
+import KeyboardAvoidingView from './exports/KeyboardAvoidingView';
+import Modal from './exports/Modal';
+import Picker from './exports/Picker';
+import Pressable from './exports/Pressable';
+import ProgressBar from './exports/ProgressBar';
+import RefreshControl from './exports/RefreshControl';
+import SafeAreaView from './exports/SafeAreaView';
+import ScrollView from './exports/ScrollView';
+import SectionList from './exports/SectionList';
+import StatusBar from './exports/StatusBar';
+import Switch from './exports/Switch';
+import Text from './exports/Text';
+import TextInput from './exports/TextInput';
+import Touchable from './exports/Touchable';
+import TouchableHighlight from './exports/TouchableHighlight';
+import TouchableNativeFeedback from './exports/TouchableNativeFeedback';
+import TouchableOpacity from './exports/TouchableOpacity';
+import TouchableWithoutFeedback from './exports/TouchableWithoutFeedback';
+import View from './exports/View';
+import VirtualizedList from './exports/VirtualizedList';
+import YellowBox from './exports/YellowBox';
+import LogBox from './exports/LogBox';

// plugins
-export { default as DeviceEventEmitter } from './exports/DeviceEventEmitter';
+import DeviceEventEmitter from './exports/DeviceEventEmitter';

// hooks
-export { default as useColorScheme } from './exports/useColorScheme';
-export { default as useLocaleContext } from './exports/useLocaleContext';
-export { default as useWindowDimensions } from './exports/useWindowDimensions';
\ No newline at end of file
+import useColorScheme from './exports/useColorScheme';
+import useLocaleContext from './exports/useLocaleContext';
+import useWindowDimensions from './exports/useWindowDimensions';
+
+export {
+ unstable_createElement,
+ findNodeHandle,
+ processColor,
+ render,
+ unmountComponentAtNode,
+ NativeModules,
+ // APIs
+ AccessibilityInfo,
+ Alert,
+ Animated,
+ Appearance,
+ AppRegistry,
+ AppState,
+ BackHandler,
+ Clipboard,
+ Dimensions,
+ Easing,
+ I18nManager,
+ Keyboard,
+ InteractionManager,
+ LayoutAnimation,
+ Linking,
+ NativeEventEmitter,
+ PanResponder,
+ PixelRatio,
+ Platform,
+ Share,
+ StyleSheet,
+ UIManager,
+ Vibration,
+ // components
+ ActivityIndicator,
+ Button,
+ CheckBox,
+ FlatList,
+ Image,
+ ImageBackground,
+ KeyboardAvoidingView,
+ Modal,
+ Picker,
+ Pressable,
+ ProgressBar,
+ RefreshControl,
+ SafeAreaView,
+ ScrollView,
+ SectionList,
+ StatusBar,
+ Switch,
+ Text,
+ TextInput,
+ Touchable,
+ TouchableHighlight,
+ TouchableNativeFeedback,
+ TouchableOpacity,
+ TouchableWithoutFeedback,
+ View,
+ VirtualizedList,
+ YellowBox,
+ LogBox,
+ // plugins
+ DeviceEventEmitter,
+ // hooks
+ useColorScheme,
+ useLocaleContext,
+ useWindowDimensions,
+}
+
+var ReactNative = {
+ unstable_createElement,
+ findNodeHandle,
+ processColor,
+ render,
+ unmountComponentAtNode,
+ NativeModules,
+ // APIs
+ AccessibilityInfo,
+ Alert,
+ Animated,
+ Appearance,
+ AppRegistry,
+ AppState,
+ BackHandler,
+ Clipboard,
+ Dimensions,
+ Easing,
+ I18nManager,
+ Keyboard,
+ InteractionManager,
+ LayoutAnimation,
+ Linking,
+ NativeEventEmitter,
+ PanResponder,
+ PixelRatio,
+ Platform,
+ Share,
+ StyleSheet,
+ UIManager,
+ Vibration,
+ // components
+ ActivityIndicator,
+ Button,
+ CheckBox,
+ FlatList,
+ Image,
+ ImageBackground,
+ KeyboardAvoidingView,
+ Modal,
+ Picker,
+ Pressable,
+ ProgressBar,
+ RefreshControl,
+ SafeAreaView,
+ ScrollView,
+ SectionList,
+ StatusBar,
+ Switch,
+ Text,
+ TextInput,
+ Touchable,
+ TouchableHighlight,
+ TouchableNativeFeedback,
+ TouchableOpacity,
+ TouchableWithoutFeedback,
+ View,
+ VirtualizedList,
+ YellowBox,
+ LogBox,
+ // plugins
+ DeviceEventEmitter,
+ // hooks
+ useColorScheme,
+ useLocaleContext,
+ useWindowDimensions,
+}
+
+export default ReactNative;
6 changes: 3 additions & 3 deletions src/ActionButton/ActionButton.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
Text,
LayoutAnimation,
StyleSheet,
TouchableWithoutFeedback,
Pressable,
Animated,
} from 'react-native';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -300,7 +300,7 @@ class ActionButton extends PureComponent {

return (
<View style={[StyleSheet.absoluteFillObject, { flex: 1 }]}>
<TouchableWithoutFeedback onPress={this.toggleState}>
<Pressable onPress={this.toggleState}>
<View style={styles.overlayContainer}>
<View style={[styles.positionContainer, styles.speedDialContainer]}>
<View
Expand All @@ -326,7 +326,7 @@ class ActionButton extends PureComponent {
{this.renderMainButton(styles)}
</View>
</View>
</TouchableWithoutFeedback>
</Pressable>
</View>
);
};
Expand Down
Loading