fixed string ref deprecation warnings

ZeusLN · Jun 13, 2024 · a24b80c · a24b80c
1 parent 1c97cdd
commit a24b80c
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 27 deletions.
diff --git a/components/Modals/AndroidNfcModal.tsx b/components/Modals/AndroidNfcModal.tsx
@@ -38,7 +38,6 @@ export default class AndroidNfcModal extends React.Component<
                 backButtonClose={false}
                 backdropPressToClose={false}
                 position="bottom"
-                ref="modal"
             >
                 <View
                     style={{

diff --git a/components/Modals/ExternalLinkModal.tsx b/components/Modals/ExternalLinkModal.tsx
@@ -42,7 +42,6 @@ export default class ExternalLinkModal extends React.Component<
                 }}
                 onClosed={() => toggleExternalLinkModal(false)}
                 position="bottom"
-                ref="modal"
             >
                 <View
                     style={{

diff --git a/components/Modals/InfoModal.tsx b/components/Modals/InfoModal.tsx
@@ -38,7 +38,6 @@ export default class InfoModal extends React.Component<InfoModalProps, {}> {
                     minHeight: 200
                 }}
                 onClosed={() => toggleInfoModal()}
-                ref="modal"
             >
                 <View
                     style={{

diff --git a/views/OpenChannel.tsx b/views/OpenChannel.tsx
@@ -273,6 +273,8 @@ export default class OpenChannel extends React.Component<
         });
     };
 
+    private scrollViewRef = React.createRef<ScrollView>();
+
     render() {
         const {
             ChannelsStore,
@@ -366,7 +368,7 @@ export default class OpenChannel extends React.Component<
                         flex: 1
                     }}
                     keyboardShouldPersistTaps="handled"
-                    ref="_scrollView"
+                    ref={this.scrollViewRef}
                 >
                     {!!suggestImport && (
                         <View style={styles.clipboardImport}>
@@ -974,7 +976,7 @@ export default class OpenChannel extends React.Component<
                                     color: 'white'
                                 }}
                                 onPress={() => {
-                                    this.refs._scrollView.scrollTo({
+                                    this.scrollViewRef.current?.scrollTo({
                                         y: 0,
                                         animated: true
                                     });

diff --git a/views/Receive.tsx b/views/Receive.tsx
@@ -968,6 +968,8 @@ export default class Receive extends React.Component<
         });
     };
 
+    private modalBoxRef = React.createRef<ModalBox>();
+
     render() {
         const {
             InvoicesStore,
@@ -1055,7 +1057,7 @@ export default class Receive extends React.Component<
         );
 
         const SettingsButton = () => (
-            <TouchableOpacity onPress={() => this.refs.modal.open()}>
+            <TouchableOpacity onPress={() => this.modalBoxRef.current?.open()}>
                 <Gear
                     style={{ alignSelf: 'center' }}
                     fill={themeColor('text')}
@@ -2662,7 +2664,7 @@ export default class Receive extends React.Component<
                     swipeToClose={true}
                     backButtonClose={true}
                     position="bottom"
-                    ref="modal"
+                    ref={this.modalBoxRef}
                 >
                     <Text
                         style={{
@@ -2681,7 +2683,7 @@ export default class Receive extends React.Component<
                             onPress={() => {
                                 InvoicesStore.clearAddress();
                                 this.setState({ addressType: d.value });
-                                this.refs.modal.close();
+                                this.modalBoxRef.current?.close();
                             }}
                             style={{
                                 backgroundColor: themeColor('secondary'),

diff --git a/views/Routing/SetFees.tsx b/views/Routing/SetFees.tsx
@@ -29,6 +29,8 @@ interface SetFeesProps {
 @inject('ChannelsStore', 'FeeStore', 'NodeInfoStore')
 @observer
 export default class SetFees extends React.PureComponent<SetFeesProps, {}> {
+    private scrollViewRef = React.createRef<ScrollView>();
+
     render() {
         const { ChannelsStore, FeeStore, NodeInfoStore, navigation, route } =
             this.props;
@@ -90,7 +92,7 @@ export default class SetFees extends React.PureComponent<SetFeesProps, {}> {
                     navigation={navigation}
                 />
 
-                <ScrollView ref="_scrollView">
+                <ScrollView ref={this.scrollViewRef}>
                     <View style={{ padding: 15 }}>
                         {channel && policy && BackendUtils.isLNDBased() && (
                             <SetFeesForm
@@ -107,11 +109,9 @@ export default class SetFees extends React.PureComponent<SetFeesProps, {}> {
                                 }`}
                                 channelPoint={channelPoint}
                                 channelId={channelId}
-                                setFeesCompleted={() => {
-                                    (
-                                        this.refs._scrollView as ScrollView
-                                    ).scrollToEnd();
-                                }}
+                                setFeesCompleted={() =>
+                                    this.scrollViewRef.current?.scrollToEnd()
+                                }
                             />
                         )}
                         {channel && !BackendUtils.isLNDBased() && (
@@ -128,20 +128,16 @@ export default class SetFees extends React.PureComponent<SetFeesProps, {}> {
                                 }
                                 channelPoint={channelPoint}
                                 channelId={channelId}
-                                setFeesCompleted={() => {
-                                    (
-                                        this.refs._scrollView as ScrollView
-                                    ).scrollToEnd();
-                                }}
+                                setFeesCompleted={() =>
+                                    this.scrollViewRef.current?.scrollToEnd()
+                                }
                             />
                         )}
                         {!channel && (
                             <SetFeesForm
-                                setFeesCompleted={() => {
-                                    (
-                                        this.refs._scrollView as ScrollView
-                                    ).scrollToEnd();
-                                }}
+                                setFeesCompleted={() =>
+                                    this.scrollViewRef.current?.scrollToEnd()
+                                }
                             />
                         )}
                     </View>

diff --git a/views/Settings/InvoicesSettings.tsx b/views/Settings/InvoicesSettings.tsx
@@ -81,6 +81,8 @@ export default class InvoicesSettings extends React.Component<
         />
     );
 
+    private modalBoxRef = React.createRef<ModalBox>();
+
     render() {
         const { navigation, SettingsStore } = this.props;
         const {
@@ -135,7 +137,7 @@ export default class InvoicesSettings extends React.Component<
               ];
 
         const SettingsButton = () => (
-            <TouchableOpacity onPress={() => this.refs.modal.open()}>
+            <TouchableOpacity onPress={() => this.modalBoxRef.current?.open()}>
                 <Gear
                     style={{ alignSelf: 'center' }}
                     fill={themeColor('text')}
@@ -441,7 +443,7 @@ export default class InvoicesSettings extends React.Component<
                     swipeToClose={true}
                     backButtonClose={true}
                     position="bottom"
-                    ref="modal"
+                    ref={this.modalBoxRef}
                 >
                     <Text
                         style={{
@@ -471,7 +473,7 @@ export default class InvoicesSettings extends React.Component<
                                         showCustomPreimageField
                                     }
                                 });
-                                this.refs.modal.close();
+                                this.modalBoxRef.current?.close();
                             }}
                             style={{
                                 backgroundColor: themeColor('secondary'),