{"id":29012370,"url":"https://github.com/muhammadibrahim-dev/facebook-copy-build","last_synced_at":"2025-06-25T18:36:10.818Z","repository":{"id":297266549,"uuid":"995280668","full_name":"MuhammadIbrahim-dev/facebook-copy-build","owner":"MuhammadIbrahim-dev","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-19T06:14:28.000Z","size":679,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-19T07:26:56.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MuhammadIbrahim-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-03T08:40:09.000Z","updated_at":"2025-06-19T06:14:32.000Z","dependencies_parsed_at":"2025-06-04T22:36:58.327Z","dependency_job_id":"0b1040ae-43b0-4ba7-963b-4e6ce77043ab","html_url":"https://github.com/MuhammadIbrahim-dev/facebook-copy-build","commit_stats":null,"previous_names":["muhammadibrahim-dev/facebook-copy-build"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MuhammadIbrahim-dev/facebook-copy-build","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuhammadIbrahim-dev%2Ffacebook-copy-build","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuhammadIbrahim-dev%2Ffacebook-copy-build/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuhammadIbrahim-dev%2Ffacebook-copy-build/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuhammadIbrahim-dev%2Ffacebook-copy-build/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MuhammadIbrahim-dev","download_url":"https://codeload.github.com/MuhammadIbrahim-dev/facebook-copy-build/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MuhammadIbrahim-dev%2Ffacebook-copy-build/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261931626,"owners_count":23232123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-25T18:36:08.250Z","updated_at":"2025-06-25T18:36:10.796Z","avatar_url":"https://github.com/MuhammadIbrahim-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to your Expo app 👋\n\nThis is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).\n\n## Get started\n\n1. Install dependencies\n   ```bash\n   npm install\n   ```\n\n2. Start the app\n\n   ```bash\n   npx expo start\n   ```\n\nIn the output, you'll find options to open the app in a\n\n- [development build](https://docs.expo.dev/develop/development-builds/introduction/)\n- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)\n- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)\n- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo\n\nYou can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).\n\n## Get a fresh project\n\nWhen you're ready, run:\n\n```bash\nnpm run reset-project\n```\n\nThis command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.\n\n## Learn more\n\nTo learn more about developing your project with Expo, look at the following resources:\n\n- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).\n- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.\n\n## Join the community\n\nJoin our community of developers creating universal apps.\n\n- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.\n- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.\n\n## create tabs slide to add \nthis method is very perfect for navigator i will recommended you.\n\n# import this \n```\nimport { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';\n```\nand \n```\ncosnt Tab = createMetrialTopTabNavigator()\n```\n\n✅ Option 2: Use react-native-tab-view for Fully Custom Swipeable + Bottom UI\nIf swipeable \"slides\" at the bottom is the main goal, it’s better to not rely on the navigators and instead use react-native-tab-view directly. Here’s a sample:\n\n📦 Install it first:\n```\nnpm install react-native-tab-view\n```\n💡 Example: Custom Bottom Swipe Tabs\n```\nimport * as React from 'react';\nimport { View, Text, useWindowDimensions, StyleSheet } from 'react-native';\nimport { TabView, SceneMap, TabBar } from 'react-native-tab-view';\n\nconst Home = () =\u003e \u003cView style={styles.scene}\u003e\u003cText\u003eHome Screen\u003c/Text\u003e\u003c/View\u003e;\nconst Explore = () =\u003e \u003cView style={styles.scene}\u003e\u003cText\u003eExplore Screen\u003c/Text\u003e\u003c/View\u003e;\nconst Profile = () =\u003e \u003cView style={styles.scene}\u003e\u003cText\u003eProfile Screen\u003c/Text\u003e\u003c/View\u003e;\n\nexport default function SwipeTabs() {\n  const layout = useWindowDimensions();\n  const [index, setIndex] = React.useState(0);\n  const [routes] = React.useState([\n    { key: 'home', title: 'Home' },\n    { key: 'explore', title: 'Explore' },\n    { key: 'profile', title: 'Profile' },\n  ]);\n\n  const renderScene = SceneMap({\n    home: Home,\n    explore: Explore,\n    profile: Profile,\n  });\n\n  return (\n    \u003c\u003e\n      \u003cTabView\n        navigationState={{ index, routes }}\n        renderScene={renderScene}\n        onIndexChange={setIndex}\n        initialLayout={{ width: layout.width }}\n        renderTabBar={() =\u003e null} // Hide the top tab bar\n      /\u003e\n      \u003cView style={styles.bottomTabs}\u003e\n        {routes.map((route, i) =\u003e (\n          \u003cText\n            key={route.key}\n            style={[styles.tabItem, index === i \u0026\u0026 styles.activeTab]}\n            onPress={() =\u003e setIndex(i)}\n          \u003e\n            {route.title}\n          \u003c/Text\u003e\n        ))}\n      \u003c/View\u003e\n    \u003c/\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  scene: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  bottomTabs: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    paddingVertical: 10,\n    backgroundColor: '#eee',\n  },\n  tabItem: {\n    padding: 10,\n    color: 'gray',\n  },\n  activeTab: {\n    color: 'blue',\n        fontWeight: 'bold',\n  },\n});\n```\n# if this method is not work to this two method use.\n## tabs create to use this code\n```\nexport default function TabLayout() {\n  const colorScheme = useColorScheme();\n\n  return (\n    \u003cTabs\n      screenOptions={{\n        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,\n        headerShown: false,\n        tabBarButton: HapticTab,\n        tabBarBackground: TabBarBackground,\n        tabBarStyle: Platform.select({\n          ios: {\n            // Use a transparent background on iOS to show the blur effect\n            position: 'absolute',\n          },\n          default: {},\n        }),\n      }}\u003e\n      \u003cTabs.Screen\n        name=\"index\"\n        options={{\n          title: 'Home',\n          tabBarIcon: ({ color }) =\u003e \u003cIconSymbol size={28} name=\"house.fill\" color={color} /\u003e,\n        }}\n      /\u003e\n      \u003cTabs.Screen\n        name=\"explore\"\n        options={{\n          title: 'Explore',\n          tabBarIcon: ({ color }) =\u003e \u003cIconSymbol size={28} name=\"paperplane.fill\" color={color} /\u003e,\n        }}\n      /\u003e\n    \u003c/Tabs\u003e\n```\n## how to create tab navigation\nif navigatore create on the top to this use \n```\nimport React from 'react';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { Ionicons } from '@expo/vector-icons'; // Or another icon set\n\nconst Tab = createBottomTabNavigator();\n\nfunction HomeScreen() {\n  return null; // replace with your screen content\n}\n\nfunction ProfileScreen() {\n  return null;\n}\n\nexport default function App() {\n  return (\n    \u003cNavigationContainer\u003e\n      \u003cTab.Navigator\n        screenOptions={({ route }) =\u003e ({\n          tabBarIcon: ({ color, size }) =\u003e {\n            let iconName;\n\n            if (route.name === 'Home') {\n              iconName = 'home-outline';\n            } else if (route.name === 'Profile') {\n              iconName = 'person-circle-outline';\n            }\n\n            return \u003cIonicons name={iconName} size={size} color={color} /\u003e;\n          },\n        })}\n      \u003e\n        \u003cTab.Screen name=\"Home\" component={HomeScreen} /\u003e\n        \u003cTab.Screen name=\"Profile\" component={ProfileScreen} /\u003e\n      \u003c/Tab.Navigator\u003e\n    \u003c/NavigationContainer\u003e\n  );\n}\n```\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c HEAD\n=======\n# Create slides..\n```\nnpm install --save react-native-snap-carousel\n# or\nyarn add react-native-snap-carousel\n # add animation.\n npm install react-native-reanimated react-native-gesture-handler\n```\n# code ...\n```\nimport React from 'react';\nimport { View, Text, Dimensions, StyleSheet, Image } from 'react-native';\nimport Carousel from 'react-native-snap-carousel';\n\nconst { width: screenWidth } = Dimensions.get('window');\n\nconst data = [\n  { title: 'Slide 1', image: 'https://via.placeholder.com/300x150' },\n  { title: 'Slide 2', image: 'https://via.placeholder.com/300x150' },\n  { title: 'Slide 3', image: 'https://via.placeholder.com/300x150' },\n];\n\nconst MyCarousel = () =\u003e {\n  const renderItem = ({ item }) =\u003e (\n    \u003cView style={styles.card}\u003e\n      \u003cImage source={{ uri: item.image }} style={styles.image} /\u003e\n      \u003cText style={styles.title}\u003e{item.title}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n\n  return (\n    \u003cCarousel\n      data={data}\n      renderItem={renderItem}\n      sliderWidth={screenWidth}\n      itemWidth={screenWidth * 0.8}\n      layout=\"default\"\n      loop={true}\n      autoplay={true}\n      autoplayDelay={1000}\n      autoplayInterval={3000}\n    /\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  card: {\n    backgroundColor: '#fff',\n    borderRadius: 8,\n    padding: 10,\n    alignItems: 'center',\n  },\n  image: {\n    width: '100%',\n    height: 150,\n    borderRadius: 8,\n  },\n  title: {\n    marginTop: 10,\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n});\n\nexport default MyCarousel;\n\n```\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e ff14daf62092b4cf70eea46ddd1c04cfe2df0af5\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuhammadibrahim-dev%2Ffacebook-copy-build","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuhammadibrahim-dev%2Ffacebook-copy-build","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuhammadibrahim-dev%2Ffacebook-copy-build/lists"}