@wereform/pkgm-wire 1.0.0

package/README.md

@@ -0,0 +1,28 @@
+# @begenone/pkgm-wire
+
+This package provides all functionality for the **"Wire" feature**, BEGENONE’s short-post or tweet-like system.
+
+## Overview
+
+The Wire is a lightweight social feed for thoughts, links, or discussions. This package handles:
+
+- Rendering short posts
+- Creating and deleting wires
+- Displaying like counts and comments
+- Basic interactions (likes, replies)
+
+## Features
+
+- 📝 Compose & post wires
+- 🧵 Thread-style replies
+- 💬 Comment & like logic
+- 📄 Clean and scrollable feed interface
+
+## Usage
+
+Used in the mobile app’s **Wire tab**, and may also appear on user profiles or notifications.
+
+## Tech Stack
+
+- React Native FlatList
+- Shared formatting tools from `@begenone/pkgm-shared`

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["module:metro-react-native-babel-preset"],
+};

package/dist/components/WireChannelMetadata.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireChannelMetadata=WireChannelMetadata;var _reactNative=require("react-native");var _WireChannelMetadataStyles=require("../styles/WireChannelMetadataStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\components\\WireChannelMetadata.jsx";function WireChannelMetadata(_ref){var channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,containerStyles=_ref.containerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.channelMetaContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.channelMetaContainer_ColumnOne,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireChannelMetadataStyles.WireChannelMetadataStyles.userImage}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.nameSubcountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.userName,children:userName||"Default Username"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subCountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subCount,children:subscribersCount||"0"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subText,children:"Subscribers"})]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_WireChannelMetadataStyles.WireChannelMetadataStyles.dateViewsContainer,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateText,children:timeAgo||"14 Hours Ago"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar",size:16,color:"white"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.viewsContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.viewsText,children:viewsText||"0"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.eyeIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:16,color:"white"})})]})]})]});}

package/dist/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"WireCardLayout",{enumerable:true,get:function get(){return _WireCardLayout.WireCardLayout;}});Object.defineProperty(exports,"WireUploadLayout",{enumerable:true,get:function get(){return _WireUploadLayout.WireUploadLayout;}});Object.defineProperty(exports,"WireViewLayout",{enumerable:true,get:function get(){return _WireViewLayout.WireViewLayout;}});var _WireCardLayout=require("./layout/WireCardLayout.jsx");var _WireViewLayout=require("./layout/WireViewLayout.jsx");var _WireUploadLayout=require("./layout/WireUploadLayout.jsx");

package/dist/layout/WireCardLayout.js

@@ -0,0 +1,8 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireCardLayout=WireCardLayout;var _reactNative=require("react-native");var _pkgmShared=require("@wereform/pkgm-shared");var _vectorIcons=require("@expo/vector-icons");var _WireChannelMetadata=require("../components/WireChannelMetadata");var _WireCardLayoutStyles=require("../styles/WireCardLayoutStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireCardLayout.jsx";function WireCardLayout(_ref){var _this=this;var content=_ref.content,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,onPress=_ref.onPress;var limit=8;var contentText=content!=null?content:`Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem
+            distinctio porro qui minus totam eius. Sed laudantium nisi expedita
+            distinctio dignissimos dicta praesentium nihil iste velit cumque!
+            Assumenda illum veritatis, ipsam sint
+            
+            vero corporis distinctio rem
+            quisquam natus iste. Unde esse consequuntur maiores repellendus, cum
+            voluptatem vero incidunt temporibus.`;var finalText=contentText?contentText.replace(/\r\n/g,"\n").split("\n"):[];return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:_WireCardLayoutStyles.WireCardLayoutStyles.container,onPress:onPress,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_WireChannelMetadata.WireChannelMetadata,{channelLogo:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",userName:userName,subscribersCount:subscribersCount,timeAgo:timeAgo,viewsText:viewsText}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireCardLayoutStyles.WireCardLayoutStyles.mainTextContainer,children:[finalText.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:limit,style:_WireCardLayoutStyles.WireCardLayoutStyles.mainText,children:finalText.map(function(text,index){return(0,_jsxRuntime.jsxs)(_reactNative.Text,{children:[text.trim().replace(/\s+/g," "),index<finalText.length-1?"\n":""]},index);})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{children:" "}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireCardLayoutStyles.WireCardLayoutStyles.seeMore,children:"See more \u2192"})]})]}),(0,_jsxRuntime.jsx)(_pkgmShared.MenuInteraction,{containerStyles:{marginBottom:12}})]});}

package/dist/layout/WireUploadLayout.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadLayout=WireUploadLayout;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var ImagePicker=_interopRequireWildcard(require("expo-image-picker"));var VideoThumbnails=_interopRequireWildcard(require("expo-video-thumbnails"));var _vectorIcons=require("@expo/vector-icons");var _WireUploadStyles=require("../styles/WireUploadStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireUploadLayout.jsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function WireUploadLayout(_ref){var _this=this;var profilePic=_ref.profilePic,userName=_ref.userName,onPressVideoUploadScreen=_ref.onPressVideoUploadScreen,onPressWireUpload=_ref.onPressWireUpload;var _useState=(0,_react.useState)(``),_useState2=(0,_slicedToArray2.default)(_useState,2),wireText=_useState2[0],setWireText=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),media=_useState4[0],setMedia=_useState4[1];var _useState5=(0,_react.useState)([]),_useState6=(0,_slicedToArray2.default)(_useState5,2),thumbnails=_useState6[0],setThumbnails=_useState6[1];var _useState7=(0,_react.useState)("Default Heading!"),_useState8=(0,_slicedToArray2.default)(_useState7,2),heading=_useState8[0],setHeading=_useState8[1];var pickMedia=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){var result=yield ImagePicker.launchImageLibraryAsync({mediaTypes:["images","videos"],allowsMultipleSelection:true,selectionLimit:4,quality:1});if(result.canceled)return;var assets=result.assets;setMedia(assets);var finalThumbs=yield Promise.all(assets.map(function(){var _ref3=(0,_asyncToGenerator2.default)(function*(asset){var _asset$mimeType;var isVideo=asset.type==="video"||((_asset$mimeType=asset.mimeType)==null?void 0:_asset$mimeType.startsWith("video"));if(isVideo){try{var _yield$VideoThumbnail=yield VideoThumbnails.getThumbnailAsync(asset.uri,{time:1000}),uri=_yield$VideoThumbnail.uri;return uri;}catch(err){console.log("Video thumbnail error:",err);return null;}}return asset.uri;});return function(_x){return _ref3.apply(this,arguments);};}()));console.log(finalThumbs);setThumbnails(finalThumbs);});return function pickMedia(){return _ref2.apply(this,arguments);};}();console.log(wireText);return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.profileSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:profilePic||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireUploadStyles.WireUploadStyles.userImage}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.userInfo,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireUploadStyles.WireUploadStyles.userName,children:userName||"Default Username"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"900",fontSize:24,paddingBottom:12,flexGrow:1,justifyContent:"flex-start"},children:["Create ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Wire"})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressVideoUploadScreen,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"500",fontSize:14,paddingBottom:12,alignSelf:"center"},children:["Upload ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Video"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputTextContainer,children:[(0,_jsxRuntime.jsx)(_pkgmShared.InputField,{multiline:true,placeholder:"Write your Wire...",inputWrapper:_WireUploadStyles.WireUploadStyles.inputWrapper,inputStyle:_WireUploadStyles.WireUploadStyles.aboutTextArea,value:wireText,onChangeText:setWireText}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.mediaContainer,children:thumbnails.map(function(uri,index){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:uri},style:_WireUploadStyles.WireUploadStyles.mediaThumb,resizeMode:"cover"})},index);})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.uploadButtonContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_WireUploadStyles.WireUploadStyles.AIGenerateButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"sparkles-outline",size:24,color:"#fff"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,style:_WireUploadStyles.WireUploadStyles.uploadImageButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"image",size:24,color:"#fff"})})]})]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},iconStyles:{paddingRight:16},selectText:"Select Age Group",data:[{key:1,label:"Under 14 of age"},{key:2,label:"Above 14 of age"}]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},selectText:"Comments",iconStyles:{paddingRight:16},data:[{key:1,label:"Turn — ON"},{key:2,label:"Turn — OFF"}]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",width:"auto",justifyContent:"space-between",marginTop:60,marginLeft:24,marginRight:24},children:(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedButton,{label:"Post Wire",style:{backgroundColor:"#ff6000",marginRight:6},fontWeight:"900",textColor:"#fff",onPress:function onPress(){return onPressWireUpload(wireText,heading);}})})]})});}var styles=_reactNative.StyleSheet.create({});

package/dist/layout/WireViewLayout.js

@@ -0,0 +1,7 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireViewLayout=WireViewLayout;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _WireChannelMetadata=require("../components/WireChannelMetadata");var _WireCardLayoutStyles=require("../styles/WireCardLayoutStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _WireViewLayoutStyles=require("../styles/WireViewLayoutStyles");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireViewLayout.jsx";function WireViewLayout(_ref){var _this=this;var content=_ref.content,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,isItMe=_ref.isItMe,onPressDeleteButton=_ref.onPressDeleteButton;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPressed=_useState2[0],setPressed=_useState2[1];var contentText=content!=null?content:`Curiosity is the real engine of progress. You don’t need certainty — you need movement. Every experiment, every failure, every weird idea you chase sharpens your understanding of reality. 
+
+Stop waiting to “figure it out” first. Dive in, break things, rebuild smarter. The mind grows through friction, not comfort. 
+
+Mastery isn’t perfection; it’s the relentless act of returning to the edge — again and again — until the unknown feels like home. The goal isn’t to win. It’s to keep becoming.
+
+#curiosity #growth #mindset #learning`;var finalText=contentText?contentText.replace(/\r\n/g,"\n").split("\n"):[];function togglePressed(){setPressed(function(prev){return!prev;});}return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:_WireViewLayoutStyles.WireViewLayoutStyles.container,contentContainerStyle:{flexGrow:1},children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireViewLayoutStyles.WireViewLayoutStyles.secondaryContainer,children:[(0,_jsxRuntime.jsx)(_pkgmShared.MenuChannelMeta,{containerStyles:{marginTop:0,paddingBottom:12,marginLeft:0,marginRight:0},channelLogo:channelLogo,userName:userName,subscribersCount:subscribersCount,timeAgo:timeAgo,viewsText:viewsText}),(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireViewLayoutStyles.WireViewLayoutStyles.mainText,children:finalText.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireViewLayoutStyles.WireViewLayoutStyles.mainText,children:finalText.map(function(text,index){return(0,_jsxRuntime.jsxs)(_reactNative.Text,{children:[text.trim().replace(/\s+/g," "),index<finalText.length-1?"\n":""]},index);})})})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_pkgmShared.MenuInteraction,{pressed:togglePressed}),isItMe&&isPressed&&(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedButton,{label:"Delete",textColor:"white",style:[{backgroundColor:"red",marginTop:12},isItMe?{position:"absolute",width:80,height:35,right:24,bottom:48}:""],onPress:function onPress(){console.log("DELETE PRESSED");onPressDeleteButton();}})]})]});}

package/dist/styles/WireCardLayoutStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireCardLayoutStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var WireCardLayoutStyles=exports.WireCardLayoutStyles=_reactNative.StyleSheet.create({container:{width:"auto",minHeight:200,justifyContent:"space-between",margin:12,padding:12,backgroundColor:_globalStyles.globalStyles.colors.colorPrimary350,borderRadius:_globalStyles.globalStyles.borders.borderPrimary100},mainTextContainer:{borderRadius:12,paddingVertical:12,paddingHorizontal:10,marginTop:10,maxHeight:360},mainText:{color:"#ddd",fontSize:15,lineHeight:22,letterSpacing:0.3},seeMore:{color:"#fff",fontWeight:"600",marginTop:4,fontSize:14}});

package/dist/styles/WireChannelMetadataStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireChannelMetadataStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var WireChannelMetadataStyles=exports.WireChannelMetadataStyles=_reactNative.StyleSheet.create({dateViewsContainer:{flexDirection:"column",width:"auto",justifyContent:"center",alignItems:"flex-end"},dateContainer:{flexDirection:"row",paddingBottom:4},viewsContainer:{flexDirection:"row",justifyContent:"flex-end"},dateText:{color:_globalStyles.globalStyles.colors.colorPrimary600,marginRight:8,fontSize:_reactNative.Platform.OS==="ios"?14:12},viewsText:{color:_globalStyles.globalStyles.colors.colorPrimary600,marginRight:8,fontSize:_reactNative.Platform.OS==="ios"?14:12},channelMetaContainer:{width:"auto",flexDirection:"row",backgroundColor:_globalStyles.globalStyles.colors.colorPrimary200,justifyContent:"space-between",padding:12,borderRadius:_globalStyles.globalStyles.borders.borderPrimary100},channelMetaContainer_ColumnOne:{flexDirection:"row"},userImage:{width:40,height:40,borderRadius:_globalStyles.globalStyles.borders.borderPrimary50},nameSubcountContainer:{flexDirection:"column",justifyContent:"center",paddingLeft:12},userName:{color:"#fff",fontSize:16,paddingBottom:4,fontWeight:"bold"},subCountContainer:{flexDirection:"row"},subCount:{color:_globalStyles.globalStyles.colors.colorPrimary600,paddingRight:6,fontSize:12,fontWeight:"bold"},subText:{color:"#fff",fontSize:12},subscribeButtonContainer:{backgroundColor:_globalStyles.globalStyles.colors.colorPrimary600,width:100,borderRadius:_globalStyles.globalStyles.borders.borderPrimary400,alignItems:"center",justifyContent:"center"},subscribeButtonText:{color:"#fff",fontWeight:"bold"}});

package/dist/styles/WireUploadStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var WireUploadStyles=exports.WireUploadStyles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"#141414",marginBottom:120},profileSection:{flexDirection:"row",alignItems:"center",borderBottomWidth:1,paddingTop:18,paddingBottom:18,marginLeft:36,marginRight:36,borderColor:_globalStyles.globalStyles.colors.colorPrimary450},userImage:{width:60,height:60,borderRadius:12,marginRight:16},userInfo:{flexDirection:"column",justifyContent:"center"},userName:{color:"white",fontSize:18,fontWeight:"600"},channelSettingsText:{color:"#ff6600",marginTop:4},wireInputContainer:{marginRight:24,marginLeft:24,marginTop:24},wireInputTextContainer:{backgroundColor:"#202020",borderRadius:12},inputWrapper:{backgroundColor:"#202020",width:"auto",borderBottomRightRadius:0,borderBottomLeftRadius:0},aboutTextArea:{textAlignVertical:"top",whiteSpace:"pre",height:"auto",minHeight:200,color:"white",paddingTop:16,marginTop:0,lineHeight:24,fontWeight:400,fontSize:18,paddingBottom:36},media:{width:"auto",height:200,borderRadius:14,backgroundColor:"#000"},uploadButtonContainer:{flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},AIGenerateButton:{paddingRight:24},uploadImageButton:{paddingRight:24,paddingVertical:24,borderRadius:12},uploadButtonText:{color:"#fff",fontSize:14,fontWeight:"600",marginLeft:8},mediaContainer:{flexDirection:"row",flexWrap:"wrap",gap:10,width:"auto",marginBottom:16,paddingLeft:6,paddingRight:6,justifyContent:"space-evenly"},mediaThumb:{width:120,height:120,borderRadius:12,backgroundColor:"#000"}});

package/dist/styles/WireViewLayoutStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireViewLayoutStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var WireViewLayoutStyles=exports.WireViewLayoutStyles=_reactNative.StyleSheet.create({container:{width:"auto",margin:12,paddingTop:12,paddingBottom:12,paddingLeft:18,paddingRight:18,backgroundColor:_globalStyles.globalStyles.colors.colorPrimary350,borderRadius:_globalStyles.globalStyles.borders.borderPrimary200,marginBottom:96},secondaryContainer:{flexDirection:"column",paddingBottom:24},mainText:{color:"#fff",lineHeight:28,fontSize:18}});

package/dist/styles/globalStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.globalStyles=void 0;var globalStyles=exports.globalStyles={colors:{colorPrimary50:"rgba(21, 21, 21, .7)",colorPrimary100:"#151515",colorPrimary200:"#252525",colorPrimary250:"rgba(37, 37, 37, .9)",colorPrimary300:"#3C3C3C",colorPrimary350:"rgba(60,60,60,.2)",colorPrimary400:"#7F7F7F",colorPrimary450:"rgba(127, 127, 127, .3)",colorPrimary500:"#D3D3D3",colorPrimary600:"#ff6600ff",colorPrimary700:"#FF8800"},borders:{borderPrimary50:8,borderPrimary100:10,borderPrimary200:12,borderPrimary300:15,borderPrimary400:30}};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@wereform/pkgm-wire",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@wereform/pkgm-channel": "^1.0.0",
+    "@wereform/pkgm-settings": "^1.0.0",
+    "@wereform/pkgm-shared": "^1.0.0",
+    "@wereform/pkgm-video": "^1.0.0",
+    "expo-image-picker": "^17.0.8",
+    "expo-video-thumbnails": "^10.0.7"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/packageJSON.md

@@ -0,0 +1,29 @@
+{
+"name": "@begenone/pkgm-wire",
+"version": "1.0.0",
+"private": true,
+"main": "dist/index.js",
+"peerDependencies": {
+"@expo/vector-icons": "_",
+"react": "_",
+"react-native": "_"
+},
+"scripts": {
+"build": "babel src --out-dir dist --extensions .js,.jsx"
+},
+"dependencies": {
+"@begenone/pkgm-channel": "workspace:_",
+"@begenone/pkgm-settings": "workspace:_",
+"@begenone/pkgm-shared": "workspace:_",
+"@begenone/pkgm-video": "workspace:_",
+"@begenone/pkgm-wire": "workspace:_",
+"expo-image-picker": "^17.0.8",
+"expo-video-thumbnails": "^10.0.7"
+},
+"devDependencies": {
+"@babel/cli": "^7.28.3",
+"@babel/core": "^7.28.5",
+"@babel/preset-env": "^7.28.5",
+"metro-react-native-babel-preset": "^0.77.0"
+}
+}

package/src/components/WireChannelMetadata.jsx

@@ -0,0 +1,58 @@
+import { Image, Pressable, Text, View } from "react-native";
+import { WireChannelMetadataStyles } from "../styles/WireChannelMetadataStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function WireChannelMetadata({
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  containerStyles,
+}) {
+  return (
+    <View style={WireChannelMetadataStyles.channelMetaContainer}>
+      <View style={WireChannelMetadataStyles.channelMetaContainer_ColumnOne}>
+        <Image
+          source={{
+            uri:
+              channelLogo ||
+              "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+          }}
+          style={WireChannelMetadataStyles.userImage}
+        />
+        <View style={WireChannelMetadataStyles.nameSubcountContainer}>
+          <Text style={WireChannelMetadataStyles.userName}>
+            {userName || "Default Username"}
+          </Text>
+          <View style={WireChannelMetadataStyles.subCountContainer}>
+            <Text style={WireChannelMetadataStyles.subCount}>
+              {subscribersCount || "0"}
+            </Text>
+            <Text style={WireChannelMetadataStyles.subText}>Subscribers</Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={[WireChannelMetadataStyles.dateViewsContainer, containerStyles]}
+      >
+        <View style={WireChannelMetadataStyles.dateContainer}>
+          <Text style={WireChannelMetadataStyles.dateText}>
+            {timeAgo || "14 Hours Ago"}
+          </Text>
+          <View style={WireChannelMetadataStyles.dateIcon}>
+            <Ionicons name="calendar" size={16} color="white" />
+          </View>
+        </View>
+        <View style={WireChannelMetadataStyles.viewsContainer}>
+          <Text style={WireChannelMetadataStyles.viewsText}>
+            {viewsText || "0"}
+          </Text>
+          <View style={WireChannelMetadataStyles.eyeIcon}>
+            <Ionicons name="eye-outline" size={16} color="white" />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { WireCardLayout } from "./layout/WireCardLayout.jsx";
+export { WireViewLayout } from "./layout/WireViewLayout.jsx";
+export { WireUploadLayout } from "./layout/WireUploadLayout.jsx";

package/src/layout/WireCardLayout.jsx

@@ -0,0 +1,66 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { MenuChannelMeta, MenuInteraction } from "@wereform/pkgm-shared";
+import { Ionicons } from "@expo/vector-icons";
+import { WireChannelMetadata } from "../components/WireChannelMetadata";
+import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
+
+export function WireCardLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  onPress,
+}) {
+  const limit = 8;
+
+  const contentText =
+    content ??
+    `Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem
+            distinctio porro qui minus totam eius. Sed laudantium nisi expedita
+            distinctio dignissimos dicta praesentium nihil iste velit cumque!
+            Assumenda illum veritatis, ipsam sint
+            
+            vero corporis distinctio rem
+            quisquam natus iste. Unde esse consequuntur maiores repellendus, cum
+            voluptatem vero incidunt temporibus.`;
+
+  // Only compute finalText if we actually have content
+  const finalText = contentText
+    ? contentText.replace(/\r\n/g, "\n").split("\n")
+    : [];
+
+  return (
+    <TouchableOpacity style={WireCardLayoutStyles.container} onPress={onPress}>
+      <View>
+        <WireChannelMetadata
+          channelLogo={
+            channelLogo ||
+            "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"
+          }
+          userName={userName}
+          subscribersCount={subscribersCount}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+        />
+
+        <View style={WireCardLayoutStyles.mainTextContainer}>
+          {finalText.length > 0 && (
+            <Text numberOfLines={limit} style={WireCardLayoutStyles.mainText}>
+              {finalText.map((text, index) => (
+                <Text key={index}>
+                  {text.trim().replace(/\s+/g, " ")}
+                  {index < finalText.length - 1 ? "\n" : ""}
+                </Text>
+              ))}
+            </Text>
+          )}
+          <Text> </Text>
+          <Text style={WireCardLayoutStyles.seeMore}>See more →</Text>
+        </View>
+      </View>
+      <MenuInteraction containerStyles={{ marginBottom: 12 }} />
+    </TouchableOpacity>
+  );
+}

package/src/layout/WireUploadLayout.jsx

@@ -0,0 +1,241 @@
+import { useState } from "react";
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import * as ImagePicker from "expo-image-picker";
+import * as VideoThumbnails from "expo-video-thumbnails";
+import { Ionicons } from "@expo/vector-icons";
+import { WireUploadStyles } from "../styles/WireUploadStyles";
+import { CustomizedButton, DropDown, InputField } from "@wereform/pkgm-shared";
+
+export function WireUploadLayout({
+  profilePic,
+  userName,
+  onPressVideoUploadScreen,
+  onPressWireUpload,
+}) {
+  const [wireText, setWireText] = useState(``);
+  const [media, setMedia] = useState(null); // image/video URI
+  const [thumbnails, setThumbnails] = useState([]);
+  const [heading, setHeading] = useState("Default Heading!");
+
+  const pickMedia = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images", "videos"],
+      allowsMultipleSelection: true,
+      selectionLimit: 4,
+      quality: 1,
+    });
+
+    if (result.canceled) return;
+
+    const assets = result.assets;
+
+    // Save raw assets
+    setMedia(assets);
+
+    // Generate thumbnails for videos, or use image URI directly
+    const finalThumbs = await Promise.all(
+      assets.map(async asset => {
+        const isVideo =
+          asset.type === "video" || asset.mimeType?.startsWith("video");
+
+        if (isVideo) {
+          try {
+            const { uri } = await VideoThumbnails.getThumbnailAsync(asset.uri, {
+              time: 1000,
+            });
+            return uri;
+          } catch (err) {
+            console.log("Video thumbnail error:", err);
+            return null;
+          }
+        }
+
+        // Image → use directly
+        return asset.uri;
+      })
+    );
+
+    console.log(finalThumbs);
+
+    setThumbnails(finalThumbs);
+  };
+
+  console.log(wireText);
+
+  return (
+    <ScrollView>
+      <View style={WireUploadStyles.container}>
+        <View style={WireUploadStyles.profileSection}>
+          <Image
+            source={{
+              uri:
+                profilePic ||
+                "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+            }}
+            style={WireUploadStyles.userImage}
+          />
+
+          <View style={WireUploadStyles.userInfo}>
+            <Text style={WireUploadStyles.userName}>
+              {userName || "Default Username"}
+            </Text>
+
+            {/* Link to user's public-facing channel page */}
+            {/* <TouchableOpacity
+              onPress={() => Linking.openURL("https://begenone.com")}
+            >
+              <Text style={WireUploadStyles.channelSettingsText}>
+                View Channel
+              </Text>
+            </TouchableOpacity> */}
+          </View>
+        </View>
+        {/* 1 — Composer Input */}
+        <View style={WireUploadStyles.wireInputContainer}>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Text
+              style={{
+                color: "#fff",
+                fontWeight: "900",
+                fontSize: 24,
+                paddingBottom: 12,
+                flexGrow: 1,
+                justifyContent: "flex-start",
+              }}
+            >
+              Create <Text style={{ color: "#ff6000" }}>Wire</Text>
+            </Text>
+            <TouchableOpacity onPress={onPressVideoUploadScreen}>
+              <Text
+                style={{
+                  color: "#fff",
+                  fontWeight: "500",
+                  fontSize: 14,
+                  paddingBottom: 12,
+                  // flexGrow: 1,
+
+                  alignSelf: "center",
+                }}
+              >
+                Upload <Text style={{ color: "#ff6000" }}>Video</Text>
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={WireUploadStyles.wireInputTextContainer}>
+            <InputField
+              multiline
+              placeholder="Write your Wire..."
+              inputWrapper={WireUploadStyles.inputWrapper}
+              inputStyle={WireUploadStyles.aboutTextArea}
+              value={wireText}
+              onChangeText={setWireText}
+            />
+
+            {/* 2 — Media Preview (always below text) */}
+            <View style={WireUploadStyles.mediaContainer}>
+              {thumbnails.map((uri, index) => (
+                <TouchableOpacity key={index} onPress={pickMedia}>
+                  <Image
+                    source={{ uri }}
+                    style={WireUploadStyles.mediaThumb}
+                    resizeMode="cover"
+                  />
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {/* 3 — Upload Button */}
+            <View style={WireUploadStyles.uploadButtonContainer}>
+              <TouchableOpacity style={WireUploadStyles.AIGenerateButton}>
+                <Ionicons name="sparkles-outline" size={24} color="#fff" />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={pickMedia}
+                style={WireUploadStyles.uploadImageButton}
+              >
+                <Ionicons name="image" size={24} color="#fff" />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <DropDown
+            styles={{
+              marginLeft: 0,
+              marginRight: 0,
+              marginTop: 18,
+              // paddingRight: 24,
+            }}
+            iconStyles={{ paddingRight: 16 }}
+            selectText={"Select Age Group"}
+            data={[
+              { key: 1, label: "Under 14 of age" },
+              { key: 2, label: "Above 14 of age" },
+            ]}
+          />
+
+          <DropDown
+            styles={{ marginLeft: 0, marginRight: 0, marginTop: 18 }}
+            selectText={"Comments"}
+            iconStyles={{ paddingRight: 16 }}
+            data={[
+              { key: 1, label: "Turn — ON" },
+              { key: 2, label: "Turn — OFF" },
+            ]}
+          />
+        </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            width: "auto",
+            justifyContent: "space-between",
+
+            marginTop: 60,
+            marginLeft: 24,
+            marginRight: 24,
+          }}
+        >
+          <CustomizedButton
+            label={"Post Wire"}
+            style={{
+              backgroundColor: "#ff6000",
+              marginRight: 6,
+            }}
+            fontWeight={"900"}
+            textColor={"#fff"}
+            onPress={() => onPressWireUpload(wireText, heading)}
+          />
+          {/* <CustomizedButton
+            label={"Schedule"}
+            style={{
+              backgroundColor: "#202020",
+              marginLeft: 6,
+            }}
+            fontWeight={"900"}
+            textColor={"#404040"}
+          /> */}
+        </View>
+
+        {/* 4 — Future AI Row */}
+        {/* <WireAIBar text={text} onChange={setText} /> */}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({});

package/src/layout/WireViewLayout.jsx

@@ -0,0 +1,105 @@
+import { ScrollView, Text, View } from "react-native";
+import { WireChannelMetadata } from "../components/WireChannelMetadata";
+import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
+import {
+  MenuInteraction,
+  MenuChannelMeta,
+  CustomizedButton,
+} from "@wereform/pkgm-shared";
+import { WireViewLayoutStyles } from "../styles/WireViewLayoutStyles";
+import { useState } from "react";
+
+export function WireViewLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  isItMe,
+  onPressDeleteButton,
+}) {
+  const [isPressed, setPressed] = useState(false);
+
+  const contentText =
+    content ??
+    `Curiosity is the real engine of progress. You don’t need certainty — you need movement. Every experiment, every failure, every weird idea you chase sharpens your understanding of reality. 
+
+Stop waiting to “figure it out” first. Dive in, break things, rebuild smarter. The mind grows through friction, not comfort. 
+
+Mastery isn’t perfection; it’s the relentless act of returning to the edge — again and again — until the unknown feels like home. The goal isn’t to win. It’s to keep becoming.
+
+#curiosity #growth #mindset #learning`;
+
+  // Only compute finalText if we actually have content
+  const finalText = contentText
+    ? contentText.replace(/\r\n/g, "\n").split("\n")
+    : [];
+
+  function togglePressed() {
+    setPressed(prev => !prev);
+  }
+
+  return (
+    <ScrollView
+      style={WireViewLayoutStyles.container}
+      contentContainerStyle={{ flexGrow: 1 }}
+    >
+      <View style={WireViewLayoutStyles.secondaryContainer}>
+        <MenuChannelMeta
+          containerStyles={{
+            marginTop: 0,
+            paddingBottom: 12,
+            marginLeft: 0,
+            marginRight: 0,
+          }}
+          channelLogo={channelLogo}
+          userName={userName}
+          subscribersCount={subscribersCount}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+        />
+        <View>
+          <Text style={WireViewLayoutStyles.mainText}>
+            {finalText.length > 0 && (
+              <Text style={WireViewLayoutStyles.mainText}>
+                {finalText.map((text, index) => (
+                  <Text key={index}>
+                    {text.trim().replace(/\s+/g, " ")}
+                    {index < finalText.length - 1 ? "\n" : ""}
+                  </Text>
+                ))}
+              </Text>
+            )}
+          </Text>
+        </View>
+      </View>
+      <View>
+        <MenuInteraction pressed={togglePressed} />
+
+        {isItMe && isPressed && (
+          <CustomizedButton
+            label={"Delete"}
+            textColor={"white"}
+            style={[
+              { backgroundColor: "red", marginTop: 12 },
+              isItMe
+                ? {
+                    position: "absolute",
+                    width: 80,
+                    height: 35,
+                    right: 24,
+                    bottom: 48,
+                  }
+                : "",
+            ]}
+            onPress={() => {
+              console.log("DELETE PRESSED");
+              onPressDeleteButton();
+            }}
+          />
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/src/styles/WireCardLayoutStyles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireCardLayoutStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    minHeight: 200,
+    justifyContent: "space-between",
+    // aspectRatio: 1 / 1,
+    margin: 12,
+    padding: 12,
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  mainTextContainer: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    marginTop: 10,
+    maxHeight: 360,
+  },
+
+  mainText: {
+    color: "#ddd",
+    fontSize: 15,
+    lineHeight: 22,
+    letterSpacing: 0.3,
+  },
+
+  seeMore: {
+    color: "#fff",
+    fontWeight: "600",
+    marginTop: 4,
+    fontSize: 14,
+  },
+});

package/src/styles/WireChannelMetadataStyles.js

@@ -0,0 +1,104 @@
+import { Platform, StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireChannelMetadataStyles = StyleSheet.create({
+  dateViewsContainer: {
+    flexDirection: "column",
+    width: "auto",
+    justifyContent: "center",
+    alignItems: "flex-end",
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    paddingBottom: 4,
+    // rowGap: 20,
+  },
+
+  // dateIcon: {
+  //   marginRight: 8,
+  // },
+
+  viewsContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+
+  // eyeIcon: {
+  //   marginRight: 8,
+  // },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+    marginRight: 8,
+    fontSize: Platform.OS === "ios" ? 14 : 12,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+    marginRight: 8,
+    fontSize: Platform.OS === "ios" ? 14 : 12,
+  },
+
+  channelMetaContainer: {
+    width: "auto",
+    flexDirection: "row",
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    justifyContent: "space-between",
+    // margin: 12,
+    padding: 12,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  channelMetaContainer_ColumnOne: {
+    flexDirection: "row",
+  },
+
+  userImage: {
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  nameSubcountContainer: {
+    flexDirection: "column",
+    justifyContent: "center",
+    paddingLeft: 12,
+  },
+
+  userName: {
+    color: "#fff",
+    fontSize: 16,
+    paddingBottom: 4,
+    fontWeight: "bold",
+  },
+
+  subCountContainer: {
+    flexDirection: "row",
+  },
+
+  subCount: {
+    color: globalStyles.colors.colorPrimary600,
+    paddingRight: 6,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+
+  subText: {
+    color: "#fff",
+    fontSize: 12,
+  },
+
+  subscribeButtonContainer: {
+    backgroundColor: globalStyles.colors.colorPrimary600,
+    width: 100,
+    borderRadius: globalStyles.borders.borderPrimary400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  subscribeButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+});

package/src/styles/WireUploadStyles.js

@@ -0,0 +1,132 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireUploadStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#141414",
+    marginBottom: 120,
+    // paddingHorizontal: 16,
+    // paddingTop: 20,
+  },
+
+  profileSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    // paddingHorizontal: 36,
+
+    borderBottomWidth: 1,
+    paddingTop: 18,
+    paddingBottom: 18,
+    marginLeft: 36,
+    marginRight: 36,
+    borderColor: globalStyles.colors.colorPrimary450,
+  },
+  userImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 12,
+    marginRight: 16,
+  },
+  userInfo: {
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+  userName: {
+    color: "white",
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  channelSettingsText: {
+    color: "#ff6600",
+    marginTop: 4,
+  },
+
+  // /////////////////
+
+  wireInputContainer: {
+    marginRight: 24,
+    marginLeft: 24,
+    marginTop: 24,
+  },
+
+  wireInputTextContainer: {
+    backgroundColor: "#202020",
+    borderRadius: 12,
+  },
+
+  inputWrapper: {
+    backgroundColor: "#202020",
+    width: "auto",
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  aboutTextArea: {
+    textAlignVertical: "top",
+    // whiteSpace: "pre-line",
+    whiteSpace: "pre",
+
+    height: "auto",
+    minHeight: 200,
+    color: "white",
+    paddingTop: 16,
+    marginTop: 0,
+    lineHeight: 24,
+    fontWeight: 400,
+    fontSize: 18,
+    paddingBottom: 36,
+  },
+
+  media: {
+    width: "auto",
+    height: 200,
+    borderRadius: 14,
+    // marginBottom: 16,
+    backgroundColor: "#000",
+  },
+
+  uploadButtonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+  },
+
+  AIGenerateButton: {
+    paddingRight: 24,
+  },
+
+  uploadImageButton: {
+    paddingRight: 24,
+    // backgroundColor: "#252525",
+    paddingVertical: 24,
+    borderRadius: 12,
+    // marginBottom: 20,
+    // marginTop: 20,
+  },
+
+  uploadButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+
+  mediaContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+    width: "auto",
+    marginBottom: 16,
+    paddingLeft: 6,
+    paddingRight: 6,
+    justifyContent: "space-evenly",
+  },
+
+  mediaThumb: {
+    width: 120,
+    height: 120,
+    borderRadius: 12,
+    backgroundColor: "#000",
+  },
+});

package/src/styles/WireViewLayoutStyles.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireViewLayoutStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    margin: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 18,
+    paddingRight: 18,
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    marginBottom: 96,
+  },
+
+  secondaryContainer: {
+    flexDirection: "column",
+    paddingBottom: 24,
+  },
+
+  mainText: {
+    color: "#fff",
+    lineHeight: 28,
+    fontSize: 18,
+  },
+});

package/src/styles/globalStyles.js

@@ -0,0 +1,28 @@
+export const globalStyles = {
+  colors: {
+    colorPrimary50: "rgba(21, 21, 21, .7)",
+    colorPrimary100: "#151515",
+
+    colorPrimary200: "#252525",
+    colorPrimary250: "rgba(37, 37, 37, .9)",
+
+    colorPrimary300: "#3C3C3C",
+    colorPrimary350: "rgba(60,60,60,.2)",
+
+    colorPrimary400: "#7F7F7F",
+    colorPrimary450: "rgba(127, 127, 127, .3)",
+
+    colorPrimary500: "#D3D3D3",
+
+    colorPrimary600: "#ff6600ff",
+
+    colorPrimary700: "#FF8800",
+  },
+  borders: {
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+};