teleren/devto huggingface dataset:
iPhone 15 Website using React.js and Tailwind CSS
Tags: website
Published: 2024-04-08 02:45:08

---
title: iPhone 15 Website using React.js and Tailwind CSS
published: true
date: 2024-03-19 01:07:28 UTC
tags: WebSite
canonical_url: https://reactjsexample.com/iphone-15-website-using-react-js-and-tailwind-css/
---

## iPhone 15 Website
 ![iPhone 15 Website using React.js and Tailwind CSS](https://reactjsexample.com/content/images/2024/03/Code_2024-03_08-56-15.jpg)

this project aims to recreate the Apple iPhone 15 Pro website using React.js and TailwindCSS, with a focus on implementing smooth animations using GSAP (Greensock Animations) and rendering 3D models of the iPhone 15 Pro in different colors and sizes using Three.js and its related libraries (React Three Fiber and React Three Drei).

[View Demo](https://iphone-doc.vercel.app/)[View Github](https://github.com/adrianhajdin/iphone)

## Tech Stack

- React.js
- Three.js
- React Three Fiber
- React Three Drei
- GSAP (Greensock)
- Vite
- Tailwind CSS

## Features

1. **Beautiful Subtle Smooth Animations using GSAP** : Enhancing the user experience with seamless and captivating animations powered by the GSAP library.
2. **3D Model Rendering with Different Colors and Sizes** : Allowing users to explore the iPhone 15 Pro from various angles with dynamic 3D rendering, offering different color and size options.
3. **Custom Video Carousel (made with GSAP)**: Engaging users with a unique and interactive video carousel developed using GSAP for a personalized browsing experience.
4. **Completely Responsive** : Ensuring consistent access and optimal viewing on any device with a fully responsive design that adapts to different screen sizes.
5. **Code Architecture and Reusability** : Implementing a well-structured and reusable codebase for maintainability and future enhancements.
How familiar are you with GPT's ability to create diagrams?
Published: 2024-03-19 00:50:31

Unleash the power of Diagram AI - your ultimate solution for effortless diagram creation! Powered by the advanced GPT-4 technology, this browser extension transforms text into visually stunning diagrams with unparalleled accuracy and speed.
Whether you're a student looking to visualize complex concepts, a professional needing to streamline workflow processes, or a designer seeking to bring ideas to life, Diagram AI is your go-to tool. From flowcharts to entity-relationship diagrams, this versatile extension supports a wide range of diagram types, making it the perfect companion for all your visualization needs.
Say goodbye to hours spent manually creating diagrams and hello to instant conversion with Diagram AI. With intuitive editing features, you can easily customize and refine your diagrams to suit your exact requirements. Collaborate seamlessly with colleagues, share your diagrams effortlessly, and take your communication to the next level.
Experience the future of diagram creation with Diagram AI. Enhance your productivity, streamline your workflow, and elevate your visual communication game. Embrace the power of GPT-4 and revolutionize the way you create diagrams. Try Diagram AI today and witness the magic unfold! Download now at: https://chromewebstore.google.com/detail/diagram-ai/klbgbmoinfidmgmjlliilmbofaokkilo
[How-To] 用「超迷你版本」搭配 Scrum/CI/CD 的精神來逐步的寫完整個程式
Tags: beginners, programming, tutorial, python
Published: 2024-03-19 00:48:36

我個人非常討厭跑 scrum，兩次的經驗都不是很好。原因是主管們的心態無法調適，導致跑起來往往很快就失去它原本的精神。

但是我卻蠻喜歡 scrum/CI/CD 的觀點，也發覺自己的開發流程往這個方向靠攏。漸漸的接到案子後不會先急著畫架構圖和流程圖，而是先將整個流程的「資料流」給打通。

我會先聚焦最最最重要的資料會從哪邊送到哪邊，它是數值、字串、list/dict/json還是物件？然後送一個最迷你版本的資料試試看行不行得通。

比如說某次主管們需要調閱部門成員的一些數值報告，他們希望看到的是成員們在專案進行時每個月的貢獻程度，也就是執行了多少次的測試，但有附加一些條件以免重覆計算。

於是我最先做的事就是寫一支小程式，把資料庫裡成員們執行測試的數據抓出來。但我只抓最前面10筆，因為這樣不管是寫後續程式、跑報告或除錯都會大大節省我的時間。

接著我就用人工的方式將那些附加條件套用在那10筆資料上，把「初版」的最終報告生出來給主管們看。這樣做的用意是我用最短的時間，把程式和資料在整個執行過程中的「程序」都給跑過一遍。雖然是迷你版、精簡版，但是我把整個程序從頭到尾給串起來了，確定這樣的資料流是可行的。

初版的最終報告的格式主管們看了不是很滿意，雖然這格式是他們提出的，但這很常見，他們總是要先看到一些實際的東西之後才會修正原本的想法。因此我不用花大把的時間寫出一個完整但他們卻不滿意的程式，我可以很快的修正我的流程，更快的推出下一版給他們參考。整個過程主管們滿意，我也輕鬆！

程式新手們也可以參考這個方式，不用急著把範例/作業一股腦地寫出來，而是從0開始，先找出下一個迷你版是什麼，最好是「超」迷你版本。然後找方法和工具來實作它，以 scrum/CI/CD 的精神來逐步的寫完整個程式，你可能會發現原來寫程式這麼有趣！
[How-To] 如何訓練程式的邏輯思考能力
Tags: beginners, programming, tutorial, python
Published: 2024-03-19 00:46:54

至於當初的那道 bonus 題（參閱：到底是怎麼訓練出我的邏輯思考能力的？現在回想起來，我認為是如下的過程。

第一個要完成的步驟是至少要把乘數和被乘數印出來吧！因此我先努力完成圖1。就是簡單的呼叫輸入函式以接受兩個數字，並用輸出函式把它們印成直式效果。這部分不至於太難。

接下來因為要印出乘數和被乘數的個位數字相乘的結果，所以我得把被乘數拆解成兩個數字。具體我到底怎麼做的，年代久遠已無法回想起來。也許是呼叫取餘數的函式？也許是用字串分割函式、再轉成 integer?

但重點在於實作這個步驟的過程中，我頭腦裡的思維模式，因為這就是拆解一道問題的必要程序。我「現在」已經能印出如圖1的樣子了，我「下一個階段」如圖2，它們之間的差距是什麼？我要如何做到？因此在心中會試想各種可能性，然後去書本上找有哪個「適合的工具」能幫我完成這個步驟。

這有點像圖3，小朋友在玩的、幫助建立認知能力的玩具。一個蘿蔔一個坑，我所要做的事就是找出合適形狀的「蘿蔔」來塞這個坑。有時我可能會誤解某個蘿蔔的用法，將它削去某部分、或是將兩個蘿蔔疊起來塞進去之類的奇葩方法，但重點是對於初學的我來講能解決問題即可，最佳化不是我現在該煩惱的事。

完成圖2之後，接下來就換十位數的相乘，又產生了新的「下一個階段」。就這樣一步一步下去直到完成作業。

我認為這就是我當初建立起邏輯思考的過程。不是靠大量實戰、也不是靠熟悉語法，而是將問題拆解成好幾段更小更容易的「小程式」，然後依序完成。

一直卡關的程式新手們，也許你需要的只是適當的分解問題，邏輯能力就會自然而然的培養起來了！
[How-To] 如何不用透過大量練習卻能訓練程式的邏輯思考能力？
Tags: beginners, programming, tutorial, python
Published: 2024-03-19 00:44:18

至於當初的那道 [bonus 題](https://dev.to/neilskilltree/xian-liao-zhao-chu-shu-yu-ni-de-bonus-ti-er-bu-shi-tou-guo-xin-xin-ku-ku-de-da-liang-lian-xi-4012)到底是怎麼訓練出我的邏輯思考能力的？現在回想起來，我認為是如下的過程。

第一個要完成的步驟是至少要把乘數和被乘數印出來吧！因此我先努力完成圖1。就是簡單的呼叫輸入函式以接受兩個數字，並用輸出函式把它們印成直式效果。這部分不至於太難。

![圖1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bfhot31u43nmvi1kpny.png)

接下來因為要印出乘數和被乘數的個位數字相乘的結果，所以我得把被乘數拆解成兩個數字。具體我到底怎麼做的，年代久遠已無法回想起來。也許是呼叫取餘數的函式？也許是用字串分割函式、再轉成 integer?

但重點在於實作這個步驟的過程中，我頭腦裡的思維模式，因為這就是拆解一道問題的必要程序。我「現在」已經能印出如圖1的樣子了，我「下一個階段」如圖2，它們之間的差距是什麼？我要如何做到？因此在心中會試想各種可能性，然後去書本上找有哪個「適合的工具」能幫我完成這個步驟。

![圖2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moqubf1onwqfbo5g9aki.png)

這有點像圖3，小朋友在玩的、幫助建立認知能力的玩具。一個蘿蔔一個坑，我所要做的事就是找出合適形狀的「蘿蔔」來塞這個坑。有時我可能會誤解某個蘿蔔的用法，將它削去某部分、或是將兩個蘿蔔疊起來塞進去之類的奇葩方法，但重點是對於初學的我來講能解決問題即可，最佳化不是我現在該煩惱的事。

![圖3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxz9jnturvcpzcvl1zk9.png)

完成圖2之後，接下來就換十位數的相乘，又產生了新的「下一個階段」。就這樣一步一步下去直到完成作業。

我認為這就是我當初建立起邏輯思考的過程。不是靠大量實戰、也不是靠熟悉語法，而是將問題拆解成好幾段更小更容易的「小程式」，然後依序完成。

一直卡關的程式新手們，也許你需要的只是適當的分解問題，邏輯能力就會自然而然的培養起來了！
[閒聊] 找出屬於你的 Bonus 題，而不是透過辛辛苦苦的大量練習
Tags: beginners, programming, python, tutorial
Published: 2024-03-19 00:39:14

我上大學那年的暑假，因為知道自己未來將會以寫程式為生（非常天真的想法），因此 K 了大約一個月的洪錦魁的書。照著書上的範例一個一個敲進原始檔裡、運行、修正，沒有遇到什麼大的困難。

上大學後的第一個程式作業是用「橫式」寫出兩個2位數相乘的結果，像是 32 * 13 = 416 這樣的輸出。那位老師蠻優秀的，同樣的題目給了 bonus 題，如果是以「直式」寫出相乘的過程，分數會更高。

也就是你得把乘數拆成兩個數字，像上例就變成了 32 * 10 + 32 * 3，其中還得處理印出時的排版問題，對於新手來說是個思維上的跳躍。由於基因裡有某種天然呆的成分，我決定挑戰 bonus 題！

從星期五晚上開始寫，寫了一天還是寫不出來。室友只是拿了課本跑到計中去，半天就回來說寫出來了，然後就一溜煙跑去山下玩。我乾瞪眼，羨慕又嫉妒，想說我暑假都先預習一個月了，第一個作業就卡關是怎麼回事？

基於基因裡有某種固執的成分，我仍然不想放棄這道 bonus 題，繼續苦戰！也漸漸的開始把自己的思維模式調整成用程式的方式來思考解題的過程。這道 bonus 題正式啟動了我變成宅男⋯丫不是，是工程師的頭腦，我感覺到我跨越了一道看不見的門檻，自此，我再也沒有被程式邏輯的轉換而困住過。

現在回想起來，我並不是因為大量的練習而學會寫程式的，而是那道 bonus 題的訓練方式把我頭腦裡的某個開關打開了。因此我認為邏輯思維的訓練才是重點，只要訓練方式對了，程式新手就不會被卡在最一開始的點。畢竟程式老手們的挑戰不只是邏輯而已，我們還得騰出更多時間來增強其他技能。

所以卡關的新手們，你們是不是開始覺得要找出那道屬於自己的 bonus 題，而不是透過辛辛苦苦的大量練習，祈求某天能夠突然開竅？
Blocks, Procs, and Lambdas
Tags: webdev
Published: 2024-03-19 00:37:45

Lambdas - nameless methods. This is how methods accept blocks using the yield keyword.

`.collect` method - returns a copy of a variable, doesn't change or mutate the original variable. ie `.collect!` in which the `!` means this method can do something dangerous in ruby.

Blocks - these are one of the few exceptions of things that aren't objects in ruby. Bit of code between `do` or `end` or `{}`, but can be passed to methods like `.each` or `.select`.


Proc - a block which is saved to a variable. Good for keeping code DRY aka Dont Repeat Yourself. 

To pass a proc to a method expecting a block use `&` right before the the parameter. 

Procs are objects so they have the power/abilities of objects and can be called over and over. This prevents you from having to retype the contents of your block every-time you need to execute a particular block of code. 

We can call procs directly by using ruby's `.call` method

Remember, in ruby there is always more than one way to do something. 

I learned I cant `puts` a proc because it is an object not a string, this will print the memory address instead of a proc. procs are callable objects that contain blocks of code and to see the effect of the code within a proc, you must call it. Lambdas are also objects. 

**Lambdas vs procs
Lambdas check the number of arguments passed to it while a proc does not. This means lambdas will give an error if you a pass it the wrong number of arguments. While a proc will ignore unexpected arguments and assign `nil` to any missing arguments. 
When Lambdas `return`, control is passed back to the calling method. When a proc `return`s it does so immediately without going back to the calling method. 
`&` is used to pass a lambda.
`()` and `{}` are important in the syntax of lambdas.
SQL Stored Procedures
Published: 2024-03-19 00:34:05

Stored Procedures is a collection of SQL statements that can executed in a single unit or function. It is used mostly for encapsulate info, and perform the same tasks multiple time.

You can specify what your procedure name, write as many sql statements that suits your needs within a stored procedure. It is like writing a method/function in SQL, but they don't return a value. its just an easier way to execute multiple sql statements into one location.

```
`CREATE PROCEDURE procedure_name
AS
BEGIN
    SELECT * FROM tbl_name;
    ... 
END;

EXEC procedure_name;`
```

You can write Stored Procedures with parameters to pass conditional values, which makes your stored procedure more flexible when quering data.

```
`CREATE PROCEDURE procedure_name_with_param @ParamName nvarchar(32)
AS
BEGIN
    SELECT * FROM tbl_name WHERE column_name = @ParamName;
    ... 
END;

EXEC procedure_name_with_param @ParamName='param_value';`
```
Building a Responsive Website with Bootstrap
Published: 2024-03-19 00:29:04

Introduction:
In the digital age, a responsive website is crucial for any business or organization to have a strong online presence. With the advancement of technology, people access the internet through various devices with different screen sizes. This is where Bootstrap comes in, a popular front-end web framework that allows developers to build responsive and mobile-friendly websites effortlessly.

Advantages:
1. Mobile-friendly: One of the major advantages of Bootstrap is its mobile-first approach. It automatically adjusts the layout and content to fit different screen sizes, creating a seamless user experience across various devices.

2. Easy to use: Bootstrap provides a comprehensive set of pre-designed templates, CSS styles, and components that can be easily customized according to the website's needs. This reduces development time and effort significantly.

3. Cross-browser compatibility: Bootstrap is compatible with all modern browsers, which guarantees a consistent and uniform appearance of the website.

Disadvantages:
1. Limited customization: With Bootstrap, there are limitations in terms of design flexibility and customization. This can be a disadvantage for developers who want to create unique and personalized websites.

2. Learning curve: Although Bootstrap is user-friendly, it does require some knowledge of HTML, CSS, and JavaScript. Beginners may find it challenging to use at first.

Features:
1. Grid system: Bootstrap's grid system allows the website to have a responsive layout that can easily adjust to different screen sizes.

2. Components: Bootstrap provides a wide range of components such as buttons, forms, navigation bars, etc. to enhance the website's functionality and visual appeal.

Conclusion:
In conclusion, Bootstrap is an excellent tool for building responsive and mobile-friendly websites. It offers numerous advantages such as being easy to use and cross-browser compatible. While there are a few limitations, the benefits of using Bootstrap outweigh them. As more users access the internet through different devices, having a responsive website using Bootstrap has become a necessity rather than an option.
Welcome to TikTok for Developers!
Tags: tiktok, developers, opensource, technology
Published: 2024-03-19 00:28:05

We are excited that you are seeking to integrate your app with TikTok. As developers, you can help us inspire creativity and bring joy by providing awesome experiences for TikTok users. In this blog post, we'll give you an overview of TikTok for Developers and show you how to get started building apps using the TikTok API and SDK.

TikTok is one of the most popular social media platforms in the world, with over 1 billion monthly active users. As a developer, you can use the TikTok API and SDK to build apps that integrate with TikTok and provide new experiences for TikTok users.

1. Sign up for a TikTok developer account
To start integrating with us, create your developer account and register your apps. [Learn more](https://developers.tiktok.com/doc/getting-started-create-an-app).

2. Set up your development environment
You will need to install the TikTok SDK and set up your development environment. You can find the SDK and documentation on the TikTok [developer website](https://developers.tiktok.com/doc/mobile-sdk-ios-quickstart/).

3. Browse our development kits
[Login Kit](https://developers.tiktok.com/doc/login-kit-ios-quickstart)
[Share Kit](https://developers.tiktok.com/doc/share-kit-ios-quickstart-v2)
[Green Screen Kit](https://developers.tiktok.com/doc/green-screen-kit)

4. View our API references
[Display API](https://developers.tiktok.com/doc/display-api-get-started)
[Content Posting API](https://developers.tiktok.com/doc/content-posting-api-get-started)
[Research API](https://developers.tiktok.com/doc/research-api-get-started)

5. Blogs
Read our blogs for the latest updates: https://developers.tiktok.com/blogs/

6. Support
Tell us about a problem you'd like to report or feedback you have about your experience with TikTok for developers. Information shared will only be used to respond to your [report](https://developers.tiktok.com/support/)

7. Terms and Policies
Below you can find our Terms of Service and other policy documents:
[Developer Terms of Service](https://www.tiktok.com/legal/tik-tok-developer-terms-of-service)
[Developer Data Sharing Agreement](https://www.tiktok.com/legal/tiktok-data-sharing-agreement)
[Branding Requirements](https://tiktokbrandbook.com/d/HhXfjVK1Poj9/legal)
[Community Guidelines](https://www.tiktok.com/community-guidelines)

For more information and documentation, please visit our website: https://developers.tiktok.com/doc/overview/
Google and Apple are partnering for AI
Published: 2024-03-19 00:22:11

What is going on here?
----------------------

Apple is looking to team up with Google for a mega deal to leverage Gemini for upcoming iPhones.


![Image](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2a2c5ea3-006b-4840-9ed4-ee9a6eab4141_680x342.png "Image")

What does this mean?
--------------------

While Apple has made some progress when it comes to AI, they still still haven't been quite as successful compared to their biggest competitors like Google, Microsoft and OpenAI. This has led people to speculate that Apple is falling behind which may come as a surprise given that they just released [MM1, a Multimodal LLM](https://www.thurrott.com/a-i/299663/apple-quietly-reveals-mm1-a-multimodal-llm) which is a pretty robust LLM.

By partnering with Google, they could gain a lot of useful expertise and quickly improve their AI features. Google also gets a good deal by having Gemini on > 2 billion Apple devices worldwide.

Why does Apple need help from Google though? Truthfully, there is no concrete answer right now but we can speculate:

-   Lack of compute power (it sounds silly but the chip shortage is also affecting large companies adversely)

-   Inability to hire ML/AI engineers with the relevant skills (it's no secret there is a shortage of workers in AI)

-   Time - Apple are releasing IOS 18 soon and their is speculation about new [generative AI features](https://www.macrumors.com/2024/02/16/ios-18-slew-of-new-ai-features/). (They may need an extra hand to meet their internal deadlines)

Why should I care?
------------------

Apple and Google are no stranger to partnerships (think, Google Maps). If a partnership does go through, Apple users could see major improvements to all aspects of IOS from Siri, better image and text processing capabilities, new spatial computing apps etc.

One concern remains and that is regulatory based. Apple is still the dominant force in the phone market and by partnering with Google, this could lead to too much of a competitive edge. There are however rumours that Apple is also looking to [partner with OpenAI](https://www.thestreet.com/technology/apple-google-gemini-in-talks-partnership-license-ai) which could allow Apple to overcome these regulatory hurdles.

If you enjoyed this deep dive, consider to subscribing to my [AI newsletter](https://airecapped.substack.com/). Thanks!
sensoryFeedback Samples App
Tags: programming, swift, opensource, app
Published: 2024-03-21 20:02:02

---
title: sensoryFeedback Samples App
published: true
date: 2024-03-19 00:00:00 UTC
tags: programming,swift,opensource,app
canonical_url: http://calebhearth.com/sensoryfeedback-swiftui
---

  ![An iPhone 15 Pro in portrait orientation showing the SensoryFeedbackSamples app. The app consists of a search box, a list of buttons with labels for each sensoryFeedback modifier, and a bottom toolbar with filter buttons indicating platforms.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i0kl7izq3ud0tuqznfs.png "An iPhone 15 Pro in portrait orientation showing the SensoryFeedbackSamples app. The app consists of a search box, a list of buttons with labels for each sensoryFeedback modifier, and a bottom toolbar with filter buttons indicating platforms.") 

[SensoryFeedbackSamples](https://github.com/calebhearth/SensoryFeedbackSamples) is an Open Source multiplatform SwiftUI app that provides a testing palette for SwiftUI’s new `.sensoryFeedback(_, trigger:)` modifier.

 

Something I find is often missing in my personal apps is the haptic feedback that more polished apps manage. While doing a quick search for how to add these effects, I found that in relatively recent OS versions<sup id="fnref:versions" role="doc-noteref"><a href="#fn:versions" rel="footnote">1</a></sup> there is a new modifier that accepts a `SensoryFeedback` instance representing a “canned” bit of haptic and/or audio feedback and some kind of trigger, the simplest being an `Equatable`.

 

The actual vibrations and audio of each `SensoryFeedback` aren’t documented–it would be pretty difficult to do so–so I thought it would be useful to throw together a quick app that would let me “play” each of them with a button press. And so, [SensoryFeedbackSamples](https://github.com/calebhearth/SensoryFeedbackSamples) is born!

 

It provides a list of buttons, each of which play some variant of `SensoryFeedback`. The supported platforms for each are indicated and there is search (by name of...

[Read More](http://calebhearth.com/dt/sensoryfeedback-swiftui)
Turbo 8 Prefetch (InstantClick)
Tags: turborails, prefetch, instantclick
Published: 2024-04-30 12:28:16

---
title: Turbo 8 Prefetch (InstantClick)
published: true
date: 2024-03-19 00:00:00 UTC
tags: turborails,prefetch,instantclick
canonical_url: https://blog.corsego.com/turbo-8-instantclick-prefetch
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7klg1wa5ku1v3rv6uatv.png
---

Inspired by [instaclick.io](http://instantclick.io/), instaclick [has been added](https://github.com/hotwired/turbo/pull/1101) as a default behaviour in Turbo 8.

InstantClick makes an assumption about potential user behaviour: now whenever you **hover** on a link, it will fire a GET request to retrieve that page. So when you actually click on the link, it will load faster.

InstantClick/prefetch example:

![turbo-8-prefetch-intantclick](https://blog.corsego.com/assets/images/turbo-8-prefetch-intantclick.gif)

Such a request will also have a header `X-Sec-Purpose: prefetch`

Here are a few tips based on [the docs](https://github.com/hotwired/turbo/pull/1101/files#diff-9c52929162118b63d4b92d7cfdd942a11cbb266179248b2500d5cadc8c42bfd5)

These links will never be prefetched:

```
# current page
link_to "Comments", request.path
# anchor tags (obviously on current page)
link_to "Comments", "#comments"
# non-GET requests
link_to "Upvote", upvote_post_path(@post), data: {turbo_method: :post}
# other websites
link_to "Other website", "https://superails.com"

```

Disable prefetch:

```
link_to "Admin", admin_path, data: {turbo_prefetch: false}
link_to "Admin", admin_path, data: {turbo: false}

# disable for a block
<div data-turbo="false">
  link_to "Admin", admin_path
</div>

# disable globally in application.html.erb
<meta name="turbo-prefetch" content="true" />

```

Caution:

- wrong assumptions can lead to more server load
- you would not want to count these prefetch requests as page visits
- whenever you re-hover on a link, it will trigger yet another request

![turbo-8-instantclick-prefetch-weird-revisits](https://blog.corsego.com/assets/images/turbo-8-instantclick-prefetch-weird-revisits.gif)
Responsividade
Published: 2024-03-18 23:48:34

A responsividade no React Native difere um pouco da abordagem utilizada em desenvolvimento web, onde usamos media queries e unidades relativas. No React Native, a responsividade é mais sobre adaptar os layouts e componentes para diferentes tamanhos de tela e orientações.

Aqui está um exemplo prático de como você pode lidar com a responsividade no React Native:

Suponha que você tenha um componente que exibe uma lista de itens. Você pode ajustar o layout e o estilo com base no tamanho da tela usando as dimensões da janela:

```
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista de Itens</Text>
      <View style={width < 500 ? styles.listViewSmall : styles.listViewLarge}>
        {/* Renderizar a lista de itens aqui */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  listViewSmall: {
    width: '80%',
    maxHeight: height * 0.5,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
  listViewLarge: {
    width: '90%',
    maxHeight: height * 0.8,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
});

export default MyComponent;

```

Neste exemplo:

* Usamos Dimensions.get('window') para obter as dimensões da janela.

* Dependendo do tamanho da largura da janela (width), aplicamos estilos diferentes para o componente da lista.

* Para telas menores, usamos estilos mais compactos (listViewSmall), e para telas maiores, usamos estilos mais espaçados (listViewLarge).

Isso é apenas um exemplo simples de como você pode abordar a responsividade no React Native. Dependendo das necessidades do seu aplicativo, você pode precisar adotar outras estratégias, como usar bibliotecas de layout responsivo ou criar layouts específicos para diferentes tamanhos de tela.


![Image description](https://blog.rocketseat.com.br/content/images/2019/05/Responsive-1.png)