chore(feed): Remove deprecated Stylesheet.create usages (#1378)

* chore(feed): Remove deprecated Stylesheet.create usages * chore(feed): Remove StyleSheet * chore: remove StyleSheet from ScreenContainer * chore: yarn lint-fix --------- Co-authored-by: n0izn0iz <[email protected]>
TERITORI · Nov 19, 2024 · 8ad4855 · 8ad4855
1 parent 5e0b483
commit 8ad4855
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 170 deletions.
diff --git a/packages/components/ScreenContainer/index.tsx b/packages/components/ScreenContainer/index.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode, useCallback, useMemo } from "react";
 import {
   SafeAreaView,
   ScrollView,
-  StyleSheet,
   useWindowDimensions,
   View,
 } from "react-native";
@@ -126,7 +125,14 @@ export const ScreenContainer: React.FC<ScreenContainerProps> = ({
     <SafeAreaView style={{ width: "100%", flex: 1 }}>
       {/*FIXME: Too many containers levels*/}
 
-      <View style={styles.container}>
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: "#000000",
+          flexDirection: "row",
+          zIndex: 999,
+        }}
+      >
         {!hideSidebar ? <Sidebar /> : null}
 
         <View style={{ flex: 1 }}>
@@ -150,9 +156,8 @@ export const ScreenContainer: React.FC<ScreenContainerProps> = ({
                   >
                     <View
                       style={[
-                        styles.childrenContainer,
                         marginStyle,
-                        { width, flex: 1 },
+                        { width, flex: 1, height: "100%", alignSelf: "center" },
                       ]}
                     >
                       {children}
@@ -161,7 +166,10 @@ export const ScreenContainer: React.FC<ScreenContainerProps> = ({
                   </ScrollView>
                 ) : (
                   <View
-                    style={[styles.childrenContainer, marginStyle, { width }]}
+                    style={[
+                      marginStyle,
+                      { width, height: "100%", alignSelf: "center" },
+                    ]}
                   >
                     {children}
                     {footerChildren ? footerChildren : <Footer />}
@@ -220,18 +228,3 @@ export const ScreenContainer: React.FC<ScreenContainerProps> = ({
     </SafeAreaView>
   );
 };
-
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#000000",
-    flexDirection: "row",
-    zIndex: 999,
-  },
-  childrenContainer: {
-    height: "100%",
-    alignSelf: "center",
-  },
-});
diff --git a/packages/components/socialFeed/EmojiSelector.tsx b/packages/components/socialFeed/EmojiSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle } from "react-native";
 import { ActivityIndicator } from "react-native-paper";
 import { Menu, MenuOptions, MenuTrigger } from "react-native-popup-menu";
 
@@ -57,7 +57,12 @@ export const EmojiSelector: React.FC<EmojiSelectorProps> = ({
 
       <MenuOptions
         customStyles={{
-          optionsContainer: StyleSheet.flatten([styles.optionsContainer]),
+          optionsContainer: {
+            width: WIDTH,
+            height: HEIGHT,
+            left: 0,
+            backgroundColor: "transparent",
+          },
         }}
       >
         <EmojiModal
@@ -67,7 +72,15 @@ export const EmojiSelector: React.FC<EmojiSelectorProps> = ({
             }
             toggleEmojiModal();
           }}
-          containerStyle={styles.modalContainer}
+          containerStyle={{
+            paddingHorizontal: layout.spacing_x1,
+            paddingVertical: layout.spacing_x1_5,
+            backgroundColor: neutral67,
+            borderWidth: 1,
+            borderColor: neutral33,
+            width: WIDTH,
+            height: HEIGHT,
+          }}
           searchStyle={{
             backgroundColor: neutral33,
             // @ts-expect-error: description todo
@@ -82,23 +95,3 @@ export const EmojiSelector: React.FC<EmojiSelectorProps> = ({
     </Menu>
   );
 };
-
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  modalContainer: {
-    paddingHorizontal: layout.spacing_x1,
-    paddingVertical: layout.spacing_x1_5,
-    backgroundColor: neutral67,
-    borderWidth: 1,
-    borderColor: neutral33,
-    width: WIDTH,
-    height: HEIGHT,
-  },
-  optionsContainer: {
-    width: WIDTH,
-    height: HEIGHT,
-    left: 0,
-    backgroundColor: "transparent",
-  },
-});
diff --git a/packages/components/socialFeed/GIFSelector.tsx b/packages/components/socialFeed/GIFSelector.tsx
@@ -4,7 +4,6 @@ import {
   FlatList,
   Image,
   StyleProp,
-  StyleSheet,
   TextInput,
   View,
   ViewStyle,
@@ -112,12 +111,35 @@ export const GIFSelector: React.FC<GIFSelectorProps> = ({
 
       <MenuOptions
         customStyles={{
-          optionsContainer: StyleSheet.flatten([styles.optionsContainer]),
+          optionsContainer: {
+            width: WIDTH,
+            height: HEIGHT,
+            left: 0,
+            backgroundColor: "transparent",
+          },
         }}
       >
-        <View style={styles.modalContainer}>
+        <View
+          style={{
+            backgroundColor: neutral67,
+            borderWidth: 1,
+            borderColor: neutral33,
+            paddingHorizontal: layout.spacing_x1,
+            paddingVertical: layout.spacing_x1_5,
+            width: WIDTH,
+            height: HEIGHT,
+            borderRadius: 10,
+          }}
+        >
           <TextInput
-            style={styles.input}
+            style={{
+              backgroundColor: neutral33,
+              width: "100%",
+              paddingVertical: layout.spacing_x0_5,
+              paddingLeft: layout.spacing_x1_5,
+              color: secondaryColor,
+              borderRadius: 3,
+            }}
             onChangeText={handleSearchTextChange}
           />
 
@@ -141,7 +163,11 @@ export const GIFSelector: React.FC<GIFSelectorProps> = ({
               <CustomPressable onPress={() => onPressItem(item)}>
                 <Image
                   source={{ uri: item.media_formats["gif"].url }}
-                  style={styles.gif}
+                  style={{
+                    width: 65,
+                    height: 65,
+                    margin: layout.spacing_x0_5,
+                  }}
                 />
               </CustomPressable>
             )}
@@ -158,37 +184,3 @@ export const GIFSelector: React.FC<GIFSelectorProps> = ({
     </Menu>
   );
 };
-
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  modalContainer: {
-    backgroundColor: neutral67,
-    borderWidth: 1,
-    borderColor: neutral33,
-    paddingHorizontal: layout.spacing_x1,
-    paddingVertical: layout.spacing_x1_5,
-    width: WIDTH,
-    height: HEIGHT,
-    borderRadius: 10,
-  },
-  optionsContainer: {
-    width: WIDTH,
-    height: HEIGHT,
-    left: 0,
-    backgroundColor: "transparent",
-  },
-  input: {
-    backgroundColor: neutral33,
-    width: "100%",
-    paddingVertical: layout.spacing_x0_5,
-    paddingLeft: layout.spacing_x1_5,
-    color: secondaryColor,
-    borderRadius: 3,
-  },
-  gif: {
-    width: 65,
-    height: 65,
-    margin: layout.spacing_x0_5,
-  },
-});
diff --git a/packages/components/socialFeed/NewsFeed/CreateShortPost/CreateShortPostButton.tsx b/packages/components/socialFeed/NewsFeed/CreateShortPost/CreateShortPostButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 
 import penSVG from "@/assets/icons/pen.svg";
 import { BrandText } from "@/components/BrandText";
@@ -13,34 +13,29 @@ export const CreateShortPostButton: React.FC<{
   onPress?: () => void;
 }> = ({ label, onPress }) => {
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
+    <TouchableOpacity
+      style={{
+        alignSelf: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: neutral17,
+        borderWidth: 1,
+        borderColor: neutral33,
+        borderRadius: 999,
+        paddingLeft: layout.spacing_x1_5,
+        paddingRight: layout.spacing_x2,
+        height: 42,
+      }}
+      onPress={onPress}
+    >
       <SVG source={penSVG} width={24} height={24} color={secondaryColor} />
-      <View style={styles.textContainer}>
+      <View
+        style={{
+          marginLeft: layout.spacing_x1,
+        }}
+      >
         <BrandText style={fontSemibold14}>{label}</BrandText>
       </View>
     </TouchableOpacity>
   );
 };
-
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  selfCenter: {
-    alignSelf: "center",
-  },
-  container: {
-    alignSelf: "center",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: neutral17,
-    borderWidth: 1,
-    borderColor: neutral33,
-    borderRadius: 999,
-    paddingLeft: layout.spacing_x1_5,
-    paddingRight: layout.spacing_x2,
-    height: 42,
-  },
-  textContainer: {
-    marginLeft: layout.spacing_x1,
-  },
-});
diff --git a/packages/components/socialFeed/NewsFeed/RefreshButton/RefreshButton.tsx b/packages/components/socialFeed/NewsFeed/RefreshButton/RefreshButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
+import { TouchableOpacity } from "react-native";
 import Animated, {
   Easing,
   SharedValue,
@@ -77,36 +77,41 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({
   );
 
   return (
-    <Animated.View style={[styles.selfCenter, animStyle]}>
-      <TouchableOpacity style={styles.container} onPress={onPress}>
+    <Animated.View
+      style={[
+        {
+          alignSelf: "center",
+        },
+        animStyle,
+      ]}
+    >
+      <TouchableOpacity
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          backgroundColor: neutral17,
+          borderWidth: 1,
+          borderColor: neutral33,
+          borderRadius: 999,
+          paddingHorizontal: layout.spacing_x1_5,
+          height: 42,
+        }}
+        onPress={onPress}
+      >
         <Animated.View style={animatedStyles}>
           <SVG source={refreshSVG} width={SVG_SIZE} height={SVG_SIZE} />
         </Animated.View>
-        <Animated.View style={[styles.textContainer, opacityStyle]}>
+        <Animated.View
+          style={[
+            {
+              marginLeft: layout.spacing_x1_5,
+            },
+            opacityStyle,
+          ]}
+        >
           <BrandText style={fontSemibold14}>Refresh feed</BrandText>
         </Animated.View>
       </TouchableOpacity>
     </Animated.View>
   );
 };
-
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  selfCenter: {
-    alignSelf: "center",
-  },
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: neutral17,
-    borderWidth: 1,
-    borderColor: neutral33,
-    borderRadius: 999,
-    paddingHorizontal: layout.spacing_x1_5,
-    height: 42,
-  },
-  textContainer: {
-    marginLeft: layout.spacing_x1_5,
-  },
-});