All-In-One

The All In One Extention

The extention has 33 mixed component and function and set for firebase and backend with socket.is and a prisma module for admin Sql search in google to learn more

The dependencies required

1.	@react-navigation/material-top-tabs ^6.6.13,
2.	@react-navigation/native ^6.1.17,
3.	@react-navigation/native-stack ^6.9.26,
4.	firebase ^10.11.1,
5.	react-native 0.73.6,
6.	react-native-hooks ^0.9.0,
7.	react-native-safe-area-context ^4.10.1,
8.	react-native-tab-view ^3.5.2,
9.	expo-image-picker

for servers:

1.	    dotenv ^16.4.5,
2.	    express ^4.19.2,
3.	    nodemon ^3.1.0,
4.	    socket.io ^4.7.5

The streaming component:

1.	react-icons/fi,
2.	socket.io-client 

for socket.io-clien add it in forntend or client side

A The list of objects and arrays snippets only to be use in the TheoneComponet bellow:

  i.	ObjectTab
  ii.	tab
  iii.	routes
  iv.	scrol
  v.	press
  vi.	img
  vii.	itemlist
  viii.	div

B The list bellow:

i.	TheoneComponet 
ii.	ListComponet
iii.	IconBtncomponent
iv.	TabComponent
v.	RoutesComponent
vi.	AppComponent

C Firebase functions bellow:

i.	FunctionSignIn
ii.	FunctionSignUp
iii.	FunctionSignOut
iv.	FunctionGetDocs
v.	FunctionGetDoc
vi.	FunctionSetDoc
vii.	FunctionUpdateDoc
viii.	FunctionDeleteDoc
ix.	FunctionFileUpload
x.	FunctionMuliMediaUpload
xi.	UploadFilesFunction

D sets for the firebase and server with socket.io, prisma bellow:

i.	FirebaseSets
ii.	ServerSocket
iii.	PrismaModule

E Functions uid generator , regEx youtube detector link, animatedpop with sliding effect, a ready straeming component bellow:

I.	FunctionUid
II.	RegExYoutubeLink
III.	AnimatedPopUp
IV.	StreamingWebRtc
V. socketSet
VI.SocketRoomServer


other function and other featuries and set may be added in the future
VII.
VIII.
IX.
x.
XI.
XII.

Note: Please remember to add the dependencies first before using any of the components.

compnentNames

compnentNames are ["tab","routes","scrol","div","press","txt","img","iconbtn","list"] // ill add extension in vscde to make easier to just write for example compnentNames add the snapshots

// like this one but this one is for anther project it take arabic to english snapshort

// i'll show you

tab

componentName: "tab", children: { initTab: "tabA", tabs: [ { tabName: "name", screen: youComponent }, /// or { tabName: "tabA", screen: TheOne([compnentNames["tab","routes","scrol","div","press","txt","img","iconbtn","list"]]) }, ], },

Test example

import React from "react"; import { Text } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import TheOne from "./src/OneComponentForAll/TheOne";

const TabA = () => { return TabA; }; const TabB = () => { return TabB; }; const TabC = () => { return TabC; }; const App = () => { const dataRouts = [ { componentName: "tab", children: { initTab: "test", tabs: [ { tabName: "TabA", screen: TabA }, { tabName: "TabB", screen: TabB }, { tabName: "TabC", screen: TabC }, ], }, }, ];

return ( ); }; export default App;

routes

componentName: "routes", children: { initScreen: "test", screenOpt: { headerShown: false }, routes: [ { screenName: "name", screen: Component },// or { screenName: "name", screen: TheOne([compnentNames["tab","routes","scrol","div","press","txt","img","iconbtn","list"]]) }, ], },

Test example

import React from "react"; import { NavigationContainer } from "@react-navigation/native"; import TheOne from "./src/OneComponentForAll/TheOne"; import { Text } from "react-native";

const ScreenA = () => { return this screen A; }; const ScreenB = () => { return this screen B; }; const ScreenC = () => { return this screen C; };

const App = () => { const dataRoutes = [ { componentName: "routes", children: { initScreen: "ScreenC", screenOpt: { headerShown: false }, routes: [ { screenName: "ScreenA", screen: ScreenA }, { screenName: "ScreenB", screen: ScreenB }, { screenName: "ScreenC", screen: ScreenC }, ], }, }, ];

return ( ); }; export default App;

scrol

{ componentName: "scrol", style: {you'r style}, showV: true, // or showH: true // or horizontal: true, children: ["tab","routes","scrol","div","press","txt","img","iconbtn","list"], }

showH = showsHorizontalScrollIndicator showV = showsVerticalScrollIndicator

the showH horizontal and showV vertical both are initalized state as false if you dont want to show

if you want the scroll view to scroll horizontally just add horizontal: true to the pass

Test example

div

{ componentName: "div", style: {you'er style}, children: ["tab","routes","scrol","div","press","txt","img","iconbtn","list"], }

Test example

press

{ componentName: "press", style: {you'r style}, onPress: () => console.log("press"), children: ["tab","routes","scrol","div","press","txt","img","iconbtn","list"], },

Test example

txt

{ componentName: "txt", text: "your text",//or text: valueOfArgument, style:{you'r style} }, a txt can have a children so don't attempt to add children to a txt

Test example

img

img is a react native Image { componentName: "img", uri: "", // or icon:"" style:{} , resizeMode: "",// any one of the following | 'cover'| 'contain' | 'stretch' | 'repeat' | 'center' }, a img can have a children so don't attempt to add children to a txt

Test example

Test example : div is a react native View { componentName: "div", style: { width: 300, height: 300 }, children: [ { componentName: "img", uri: "https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg", style: { width: "100%", height: "100%" }, resizeMode: "contain", }, ], },

iconbtn

icon button is pre made button component that is composed of react Pressable and Image

the components feature is hover option for web that change the color of the icon and also the background color in with the color of you choice

so the icon button is made for circle button with icon

it composed of press and img

the there is no need for width in height both are one as size

the press size is what ever size number you give + 10 to make look as padding

Pressradius has auto options which get the size and divid on 2 if you use auto any given number radius would be use for example you can add just 5 or what ever number of you'r choice

argguments: "hoverColor","color","iconHover","Iconcolor","size","resizeMode","icon","uri","Pressradius","radius",

{ componentName: "iconbtn", style: {you'r style}, hoverColor: "colorOfChoice", color: "colorOfChoice", iconHover: "colorOfChoice", Iconcolor: "colorOfChoice", radius: "auto", // or number Pressradius: "auto", // or number // icon: require("loaction") // or just import the icon and put the name here // or uri: "url", size: number, resizeMode: "",// any one of the following | 'cover'| 'contain' | 'stretch' | 'repeat' | 'center' },

Test Example

{ componentName: "iconbtn", style: { width: "auto", height: "auto" }, hoverColor: "#fff", color: "black", iconHover: "black", iconColor: "#fff", radius: "auto", Pressradius: "auto", icon: require("../../assets/ico.png"), // uri: "https://static-00.iconduck.com/assets.00/table-of-contents-icon-428x512-2ag0931e.png", size: 30, resizeMode: "contain", },

// styles= {styles of the components } // children[{compnentNames: compnentNames, styles: styles, children: children}]

list

let create snap vscode extention to make the use of one component faster and easier